Ключевые особенности Next.js:
1. Предварительный рендеринг страниц на стороне сервера:
- Эта возможность устраняет состояние первой загрузки, рендеря страницы на стороне сервера.
Компоненты React получают данные из API только после того, как были отрендерены, что предотвращает появление мигающих загрузчиков.
- Предварительный рендеринг улучшает SEO, поскольку поисковые боты видят содержимое страницы.
Поскольку React строит разметку внутри
<div id="root"/>, боты не могут прочитать HTML. Поэтому если у вас есть публичные страницы с большим количеством контента, которые нужно находить через поисковики, Next.js незаменим.
2. Маршрутизация на основе файлов (#File-based Routing):
- В отличие от React, который не имеет встроенного решения для роутинга, Next.js предлагает простую концепцию, напоминающую базовую разработку сайтов на чистом HTML.
- В этом подходе каждый файл
.html представляет страницу, а имя файла служит её путём.
- Next.js поддерживает вложенные, catch-all и динамические маршруты.
- К слову: Роутинг — это изменение содержимого экрана в зависимости от URL без отправки запроса на сервер, что предотвращает стандартное обновление страницы при смене адреса (например, при
window.location.href = "url").
3. Full Stack возможности:
- Next.js позволяет легко добавлять серверный код в проект через специальные функции предварительного рендеринга (например, static/serverSide Props).
- Также можно создавать собственные API с адресами эндпоинтов на основе файлов, где по необходимости можно писать бэкенд-код.
- В результате нет необходимости собирать отдельный проект REST API.
