React Frontend Developer

Question 1

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

Accepted Answer

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

Question 2

Что такое useSyncExternalStore и для чего он нужен?

Accepted Answer

useSyncExternalStore — это хук React для безопасного подключения внешнего состояния к рендерингу. Он позволяет подписаться на внешний стор и гарантирует, что компонент всегда рендерится с актуальными данными. Этот хук решает проблемы, которые возникают при ручных подписках в условиях concurrent rendering и Strict Mode. Его используют как основу для state-менеджеров.

Question 3

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

Accepted Answer

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

Question 4

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

Accepted Answer

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

Question 5

Какие потери возникают, если реализовать авторизацию через client-side rendering вместо SSR? Почему в таких случаях часто выбирают SSR?

Accepted Answer

При авторизации через CSR токены и логика проверки прав могут быть видны в коде на стороне клиента, что создаёт риски утечки. SSR скрывает эти детали на сервере, улучшая безопасность. Также SSR быстрее отдаёт первый контент, что важно для UX. Поэтому для критичных данных часто выбирают SSR.

Вопросы React Frontend Developer