Проект создан на основании видеоурока, с целью изучения 13 версии Next.js.
-
SEO. При SSR на клиент отправляется уже готовая страница. При CSR - клиенту отправляется пустой HTML-файл, скрипт и данные. И далее уже происходит отрисовка интерфейса. Данный подход ухудшает индексацию данных на сайте, поисковыми роботами.
-
Скорость загрузки. Клиент при CSR должен скачивать много данных, в том числе и тех, которые ему не нужны на текущий момент. Особенно это заметно при первой загрузке данных на клиент. При SSR размер отправляемых данных меньше, т.к. часть логики остаётся на сервере и не отправляется клиенту. Весь код приложения автоматически разбивается на чанки и отправляется клиенту по мере необходимости.
-
Роутинг. Для CSR мы должны использовать вспомогательный пакет ReactRouter, чтобы реализовать роутинг в приложении. Для SSR роутинг просто выстраивается с помощью файловой структуры в папке
app/
(которая создаётся в корне Next-приложения).
Пример:
|app/
|--page.js // страница корневого роута (домашняя страница) https://localhost:3000/
|--posts/
|----page.js // страница со списком постов https://localhost:3000/posts
|------new
|--------page.js // страница с новым постом https://localhost:3000/posts/new
|------[postId]
|--------page.js // страница с динамическим роутом https://localhost:3000/posts/1234
Динамические сегменты (параметры пути) передаются в качестве параметра params
функциям layout, page, route и generateMetadata.
Пример:
export default function Page({ params }) {
return <div>My Post: {params.postId}</div>
}
Параметры запроса получаем с помощь хука useSearchParams(). Пример:
const searchParams = useSearchParams();
const someFilter = searchParams.get('filter');
- NextJS поддерживает SSR и/или SSG(Static Side Generation). Для SSG реализован механизм инкрементной регенерации статических сайтов - Incremental Static Regeneration (ISR). Данный механизм позволяет обновлять статический контент, без полной пересборки проекта.
-
В Next-приложении, компоненты бывают 2-х видов. По умолчанию все компоненты в папке
app/
серверные. Чтобы сделать компонент клиентским, необходимо в файл (первой строкой) добавить директиву"use client"
. -
Компонент серверный, если в нём:
- выполняем запрос на получение данных;
- получаем прямой доступ к бэкенд-ресурсам;
- храним чувствительную информацию (токены, ключи и пр);
- если в нём используется большое количество зависимостей.
- Компонет клиентский, если в нём:
- есть слушатели событий (onClick, onChange etc);
- используются реакт-хуки;
- используется браузерный API;
- используются классовые реакт-компоненты.
- NextJS-приложение сочетает в себе фронтенд и бэкенд логику.
В папке
app/
размещается папкаapi/
и в ней хранится вся логика связанная с бэкендом. Выстраивание файловой структуры в ней аналогично, тому как создаются роуты в папкеapp/
, только вместо файловpage.js
используются файлыroute.js
. Endpoint-ы в файлеroute.js
представляют собой функции, имена который совпадают с названием HTTP-методов -GET, POST, PATCH
и т.д. Таких функций может быть несколько вroute.js
, по одной на каждый метод.
Помимо файла page.js
в каждой папке-роутере могут располагаться вспомогательные файлы - layout.js, loading.js, error.js
.
-
Файл
layout.js
представляет собой некий шаблон, который отображается на всех дочерних роутах.layout.js
расположенный вapp/
будет использоваться на всех страницах.layout.js
расположенный вapp/posts
будет использоваться только для маршрутаhttps://localhost:3000/posts/
и всех роутов, которые являются дочерними по отношению к роутуposts/
, например -https://localhost:3000/posts/new
-
Файл
loading.js
- содержит в себе компонент - загрузочный экран. Данный компонент как следует из названия, отображается, когда происходит загрузка данных. И загрузка данных именно в файлеpage.js
который находится в одной директории с файлойломloading.js
. -
Файл
error.js
- запускается автоматически если, по тому маршруту, где он расположен происходит ошибка. Внутри него мы имеем доступ, к возникшим ошибкам, а так же можем реализовать различную логику, как пример перенаправление пользователя на исходную страницу. -
Файлы
page.js
, илиlayout.js
могут содержать специальный объектmetadata
, в который можно передавать как статические, так и динамические данные. Эти данные попадают в тегhead
и используются для SEO и для задания заголовка(title
) страницы в браузере.
app/ - директория со страница приложения. app/api - api-роуты с бэкенд-логикой. components/ - реакт-компоненты. models/ - модели для взаимодействия с БД. public/ - статика, изображения, видео и пр. styles/ - файл с глобальными стилями приложения. utils/ - файлы с утилитарными функциями.
Формируем страницу на основе реакт-компонентов. Там же выполняем запрос к api и получаем данные. Передаём данные компонентам, получаем готовую страницу.
Данное Next.js - приложение создано с помощью утилиты create-next-app
.
Для запуска dev-сервера выполните следующую команду:
npm run dev
# или
yarn dev
# или
pnpm dev
Откройте в браузере вкладку по следующему адресу http://localhost:3000.
Больше информации о Next.js, вы сможете получить следующих ресурсах:
- Next.js Documentation - особенности Next.js и API.
- Learn Next.js - интерактивный туторила по Next.js.
Развернуть приложение можно на Vercel Platform. Больше информации по данной теме по ссылке Next.js deployment documentation.