React Frontend Developer

Question 1

Как реализовать модальное окно с формой (логин/пароль) и обработкой внешних кликов (outside click) для закрытия?

Accepted Answer

Модальное окно реализуется как компонент, который отображается поверх основного контента. Обработка клика вне модалки (outside click) делается через проверку цели события: если клик был не по модалке, то закрываем ее.

Question 2

Что такое Server-Side Rendering (SSR) и какие преимущества он дает? (SEO, первоначальный рендеринг на сервере)

Accepted Answer

SSR — это процесс рендеринга React-приложения на сервере в HTML на каждый запрос. Это улучшает SEO, так как поисковые боты видят готовый контент, и ускоряет первоначальную загрузку страницы для пользователя, потому что браузер сразу получает готовую для отображения разметку.

Question 3

Как работает получение данных на сервере в Next.js? (Раньше — getServerSideProps, в App Router — async-компоненты)

Accepted Answer

В старом Pages Router для получения данных на сервере использовалась специальная функция getServerSideProps, которая передавала данные в компонент страницы через пропсы. В новом App Router Server Components (помеченные как async) могут напрямую получать данные с помощью fetch или других библиотек, а затем рендерить JSX.

Question 4

Чем отличаются getStaticProps, getServerSideProps и getStaticPaths?

Accepted Answer

getStaticProps получает данные для статических страниц во время сборки. getServerSideProps получает данные при каждом запросе на сервере. getStaticPaths определяет какие динамические пути должны быть предварительно сгенерированы для статических страниц.

Question 5

Что необходимо реализовать на стороне сервера для поддержки SSR?

Accepted Answer

Для поддержки SSR на сервере нужно настроить окружение Node.js, которое может выполнять React-код. Необходимо использовать методы ReactDOMServer, такие как renderToString или renderToPipeableStream, для преобразования компонентов в HTML. Также требуется реализовать маршрутизацию на сервере, чтобы обрабатывать запросы и отдавать готовый HTML. Важно обеспечить гидратацию (hydration) на клиенте, чтобы React мог взять управление над статическим HTML.

Question 6

Как работает SSR на Node.js?

Accepted Answer

SSR (Server-Side Rendering) — это процесс генерации HTML на сервере вместо клиента. На Node.js сервер обрабатывает запрос, рендерит React-компонент в строку HTML и отправляет её браузеру. После загрузки JavaScript на клиенте происходит гидратация — подключение реактивности к статическому HTML. Это улучшает SEO и время до первого контента (FCP).

Question 7

Что такое side effect?

Accepted Answer

Side effect (побочный эффект) — это любое изменение состояния или взаимодействие с внешним миром внутри функции, которое не связано напрямую с её возвращаемым значением. Примеры: запросы к API, работа с localStorage, изменение DOM. В React побочные эффекты обрабатываются с помощью хука useEffect, чтобы не нарушать чистоту рендеринга.

Question 8

Какие действия считаются side effect?

Accepted Answer

Побочные эффекты — это любые изменения состояния программы или взаимодействие с внешним миром, которые происходят во время выполнения функции. К ним относятся: изменение глобальных переменных, запись в файл, отправка HTTP-запроса, вывод в консоль, изменение DOM. Чистые функции не должны иметь побочных эффектов, что делает их предсказуемыми и тестируемыми.

Вопросы React Frontend Developer