Специализация
Python Backend Developer
Java Backend Developer
Node.js Backend Developer
Golang Backend Developer
React Frontend Developer
Выберите навыки
React
JavaScript
Git
Redux
Webpack
Сложность
1-3
4-6
7-8
9-10
Рейтинг вопросов
1
2
3
4
5
Подпишись на React Developer в телеграм
Какие преимущества и недостатки у React Router DOM по сравнению с альтернативными библиотеками (например, Next.js маршрутизацией)?
React Router DOM предоставляет большую гибкость и интеграцию с любыми фреймворками и библиотеками на базе React, в то время как Next.js использует встроенную маршрутизацию и может предлагать оптимизации для серверной стороны.
Какие преимущества у Next.js перед обычным React?
Next.js предоставляет встроенные решения для рендеринга на сервере (SSR), статической генерации страниц (SSG), маршрутизации, оптимизации изображений и API-роутов, что ускоряет разработку, улучшает SEO и производительность по сравнению с настройкой этих систем вручную в React-приложении.
Что такое Server-Side Rendering (SSR) и какие преимущества он дает? (SEO, первоначальный рендеринг на сервере)
SSR — это процесс рендеринга React-приложения на сервере в HTML на каждый запрос. Это улучшает SEO, так как поисковые боты видят готовый контент, и ускоряет первоначальную загрузку страницы для пользователя, потому что браузер сразу получает готовую для отображения разметку.
Что такое статическая генерация страниц (Static Site Generation, SSG) и в каких случаях она полезна?
SSG — это процесс сборки HTML для страниц на этапе build time. Эти статические файлы затем обслуживаются CDN. Это самый быстрый метод, который идеально подходит для контента, который не меняется при каждом запросе, например, для блогов, документации и маркетинговых страниц.
Как работает получение данных на сервере в Next.js? (Раньше — getServerSideProps, в App Router — async-компоненты)
В старом Pages Router для получения данных на сервере использовалась специальная функция getServerSideProps, которая передавала данные в компонент страницы через пропсы. В новом App Router Server Components (помеченные как async) могут напрямую получать данные с помощью fetch или других библиотек, а затем рендерить JSX.
Можно ли в Next.js работать с базой данных или другими API на стороне сервера?
Как в Next.js добавляются скрипты, которые должны выполняться до рендера страницы?
Что такое middleware в Next.js и для чего они используются?
Какие есть ограничения у серверных компонентов в Next.js? (Отсутствие состояния, хуков)
Как Next.js оптимизирует изображения? (Компонент Image, сжатие, форматы)
Рейтинг:
2
Сложность:
7
Да, абсолютно. В Next.js можно и нужно напрямую обращаться к базам данных или внутренним API из Server Components, Server Actions или API Routes. Ключи доступа и логика остаются на сервере, никогда не попадая в клиентский код, что обеспечивает безопасность
Рейтинг:
2
Сложность:
6
Для скриптов, критичных к самому раннему выполнению, используется компонент next/script с стратегией beforeInteractive. Он вставляет скрипт в элемент <head> исходного HTML-документа, и тот выполняется до гидратации React-приложения.
Рейтинг:
2
Сложность:
7
Middleware в Next.js — это код, который выполняется на edge-сервере (или Node.js) перед тем, как запрос достигнет вашей страницы или API-роута. Он часто используется для аутентификации, проверки прав доступа, перезаписи URL-путей, работы с cookies и локализации.
Рейтинг:
2
Сложность:
7
Серверные компоненты не могут использовать состояние (useState), эффекты (useEffect) и другие хуки жизненного цикла, потому что они рендерятся один раз на сервере и не "живут" в браузере. Они также не могут использовать браузерные API (например, window или document) и обработчики событий.
Рейтинг:
3
Сложность:
6
Компонент next/image автоматически сжимает изображения, конвертирует их в современные форматы (WebP/AVIF), изменяет размеры под нужный макет и lazy load-ит их. Это уменьшает вес страниц и ускоряет их загрузку без усилий со стороны разработчика
Рейтинг:
5
Сложность:
7
Рейтинг:
2
Сложность:
8
Рейтинг:
2
Сложность:
7
Рейтинг:
2
Сложность:
7
Рейтинг:
2
Сложность:
7
