Глава 27. Server/Client компоненты и режимы рендера
Зачем эта глава
Next.js умеет рендерить страницы на сервере, на клиенте или заранее. Это влияет на скорость, SEO и пользовательский опыт.
Теория (коротко)
Server Components выполняются на сервере и не попадают в браузер.
Client Components работают в браузере и могут использовать хуки.
SSR, SSG и ISR — разные режимы генерации страниц.
Важно: по умолчанию компоненты в app router являются серверными.
JSX
Пример client-компонента
"use client";
import { useState } from "react";
export default function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}Задания
Задание: компоненты
- Создай server-компонент с данными.
- Добавь client-компонент с кнопкой.
- Раздели логику между ними.
Проверка себя
Ты понимаешь разницу между server и client компонентами.
Мини-проект
Цель: страница с серверным списком и клиентским фильтром.
Требования: список приходит с сервера, фильтр работает в браузере.
Критерий готовности: фильтр не ломает серверный рендер.
Словарь главы
- SSR
- Server-Side Rendering — рендер на сервере.
- SSG
- Static Site Generation — генерация страниц заранее.