Фундамент Next.js и React: Серверные компоненты, гидратация и границы ответственности
Фундамент Next.js и React: Серверные компоненты, гидратация и границы ответственности
Добро пожаловать в курс «Next.js 16.2: От основ до профессиональной архитектуры». Мы начинаем наше погружение не с написания кода «вслепую», а с понимания фундаментальных принципов, на которых строится современный веб.
Next.js версии 16.2 — это не просто фреймворк поверх React. Это полноценная архитектурная платформа, которая меняет подход к тому, как мы думаем о рендеринге, маршрутизации и взаимодействии с данными. Если у вас уже есть опыт работы с React или старыми версиями Next.js, приготовьтесь: правила игры изменились, и изменились к лучшему.
В этой статье мы разберем три кита современной разработки на Next.js:
- React Server Components (RSC) — почему код теперь выполняется на сервере по умолчанию.
- Гидратация — как статический HTML оживает в браузере.
- Маршрутизация и файловая система — как работают папки, файлы и те самые «квадратные скобки».
React и Next.js: Единое целое
Раньше React был библиотекой исключительно для клиента (браузера). Вы отправляли пустой HTML, загружали огромный JavaScript-файл, и только потом пользователь видел контент. Next.js решал эту проблему через SSR (Server-Side Rendering), но это было скорее надстройкой.
С приходом архитектуры App Router (которая является стандартом в Next.js 16.2), React и Next.js слились в единую экосистему. Теперь React — это библиотека, которая умеет работать и на сервере, и на клиенте, а Next.js — это «клей», который делает это переключение бесшовным.
Серверные компоненты (RSC): Новый стандарт
Главное, что нужно запомнить: в Next.js (App Router) все компоненты по умолчанию являются Серверными (Server Components).
Что это значит?
Когда вы создаете обычный компонент:
// app/page.tsx
export default async function Page() {
const data = await db.query('SELECT * FROM posts');
return (
<main>
<h1>Список постов</h1>
<ul>
{data.map(post => <li key={post.id}>{post.title}</li>)}
</ul>
</main>
);
}
Этот код никогда не попадет в браузер пользователя. Он выполнится на сервере, сходит в базу данных, сгенерирует HTML и отправит клиенту только результат.
Преимущества Серверных компонентов:
- Безопасность: Вы можете писать запросы к БД прямо в компоненте, не боясь утечки токенов или паролей.
- Скорость: Код библиотек для работы с данными (например, ORM) остается на сервере и не увеличивает размер JS-бандла, который скачивает пользователь.
- SEO: Поисковики получают полностью готовый HTML.
Клиентские компоненты и директива 'use client'
Но веб — это не только статический текст. Нам нужны кнопки, формы, хуки useState и useEffect. Серверные компоненты этого не умеют, так как на сервере нет «клика мыши» или «браузерного хранилища».
Здесь на сцену выходят Клиентские компоненты (Client Components). Чтобы превратить компонент в клиентский, нужно добавить одну строчку в самом верху файла:
'use client';
import { useState } from 'react';
export default function LikeButton() {
const [likes, setLikes] = useState(0);
return (
<button onClick={() => setLikes(likes + 1)}>
Лайков: {likes}
</button>
);
}
Границы ответственности
Важнейший архитектурный навык в Next.js 16.2 — умение правильно проводить границу между сервером и клиентом.
«Старайтесь оставлять компоненты серверными как можно дольше. Переходите на клиент только тогда, когда вам нужна интерактивность».
Это называется паттерном «Листьев» (Leaf Pattern). Представьте дерево компонентов: ствол и крупные ветки — это серверные компоненты (Layout, Page, Data Fetching), а самые кончики веток (кнопки, инпуты, карусели) — это клиентские компоненты.
Гидратация: Оживление интерфейса
Понятие «Гидратация» (Hydration) часто пугает новичков, но суть его проста.
Представьте, что сервер отправляет вам «сухой» HTML. Он выглядит как готовая страница: есть текст, кнопки, картинки. Но если вы нажмете на кнопку, ничего не произойдет, потому что JavaScript еще не подключен.
Гидратация — это процесс, когда React в браузере «проходится» по этому сухому HTML и «поливает» его JavaScript-ом, прикрепляя обработчики событий (onClick, onChange). После этого страница становится интерактивной.
В Next.js гидратация происходит частично. Серверные компоненты приходят как чистый HTML и не требуют гидратации (им не нужен JS). Гидратируются только те «островки», которые вы помечетили как 'use client'.
Архитектура маршрутизации: Файловая система
Next.js использует файловую систему для создания URL-адресов. Это значит, что структура папок в директории app напрямую отражает структуру вашего сайта.
Основные файлы
В каждой папке маршрута могут лежать специальные файлы:
page.tsx— сам контент страницы (UI), доступный по этому адресу.layout.tsx— обертка для страницы и всех вложенных страниц (шапка, подвал, боковое меню). Layout не перерисовывается при навигации между вложенными страницами.loading.tsx— компонент, который показывается, пока грузитсяpage.tsx.error.tsx— компонент для обработки ошибок.
Динамические маршруты: Магия квадратных скобок
Вы спрашивали про скобки — это один из самых мощных инструментов Next.js. Часто нам нужно создать страницы не для фиксированного адреса (как /about), а для динамического (например, профиль пользователя или карточка товара).
1. Одинарные квадратные скобки [slug]
Если вы создадите папку app/blog/[id]/page.tsx, то этот файл будет отвечать за любые адреса, подходящие под шаблон /blog/*.
Примеры URL:
/blog/1/blog/my-first-post/blog/react-tutorial
Как получить значение id внутри компонента? Next.js передает его через params:
// app/blog/[id]/page.tsx
export default async function BlogPost({ params }: { params: { id: string } }) {
// В Next.js 15+ и 16 params нужно ожидать (await),
// так как они могут приходить асинхронно
const { id } = await params;
return <h1>Пост номер: {id}</h1>;
}
2. Catch-all Segments [...slug]
Иногда нужно захватить не один сегмент пути, а сразу несколько. Для этого используется троеточие внутри скобок.
Если создать app/docs/[...slug]/page.tsx, он поймает:
/docs/getting-started->slugбудет['getting-started']/docs/components/button->slugбудет['components', 'button']
3. Optional Catch-all [[...slug]]
Двойные квадратные скобки делают параметр необязательным.
Файл app/shop/[[...category]]/page.tsx сработает для:
/shop/clothes/men(с параметрами)/shop(вообще без параметров!)
Группировка маршрутов (folder)
Если вы видите папку в круглых скобках, например app/(auth)/login/page.tsx, знайте: круглые скобки не влияют на URL.
Это нужно только для организации кода.
- Путь будет:
/login(а не/auth/login). - Это позволяет создавать разные
layout.tsxдля разных групп страниц (например, один Layout для админки, другой для сайта), не меняя структуру URL.
Резюме
- Server Components — это база. Используйте их для получения данных и генерации статики. Они не отправляют JS в браузер.
- Client Components (
'use client') — используйте их точечно, только там, где нуженuseState,useEffectили обработчики событий. - Гидратация — процесс оживления HTML на клиенте.
- Маршрутизация строится на папках.
[id]создает динамический сегмент, а(group)позволяет группировать файлы без изменения URL.
В следующей статье мы перейдем от теории к практике и настроим наше рабочее окружение, создав первый проект на Next.js 16.2 с использованием TypeScript и Tailwind CSS.