Серверные и клиентские компоненты в Next.js
Определяйте, когда добавлять 'use client' и как объединять серверное и клиентское деревья компонентов.
«Серверные и клиентские компоненты в Next.js» — бесплатный урок React Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.
По умолчанию: серверные компоненты
В маршрутизаторе App все компоненты по умолчанию являются серверными компонентами. Они отображаются на сервере, не используют JavaScript на стороне клиента и могут напрямую обращаться к базам данных, переменным окружения и файловой системе.
Переход к клиентским компонентам
Добавьте 'use client' в начало файла, чтобы сделать его клиентским компонентом. Все его импорты тоже становятся клиентскими — так создается граница клиента.
'use client';
import { useState } from 'react';
export function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}Что могут серверные компоненты
Серверные компоненты могут получать данные с помощью await непосредственно в коде, читать переменные окружения, обращаться к файловой системе и импортировать большие пакеты, предназначенные только для сервера, не увеличивая клиентский пакет.
// app/products/page.tsx — Server Component
export default async function ProductsPage() {
const products = await db.query('SELECT * FROM products');
return (
<ul>
{products.map(p => <li key={p.id}>{p.name}</li>)}
</ul>
);
}Чего не могут серверные компоненты
Серверные компоненты не могут использовать хуки (useState, useEffect), браузерные API или обработчики событий. Для этого требуется 'use client'.
Сочетание серверных и клиентских компонентов
Передавайте результат серверного компонента в клиентские компоненты через свойства или дочерние элементы. Основное правило: получайте данные в серверных компонентах, а интерактивность реализуйте в клиентских.
// Server Component (no 'use client')
async function ProductPage({ id }) {
const product = await getProduct(id); // direct DB call
return <AddToCartButton product={product} />; // client component
}
// Client Component
'use client';
function AddToCartButton({ product }) {
const [added, setAdded] = useState(false);
return <button onClick={() => { addToCart(product); setAdded(true); }}>{added ? 'Added!' : 'Add to cart'}</button>;
}Передача дочерних элементов от сервера клиенту
Серверный компонент может передать JSX в качестве children клиентскому компоненту. Дочерние элементы остаются отображенными на сервере, а клиентская оболочка добавляет интерактивность.
// Client wrapper — Modal with open/close state
'use client';
function Modal({ children }) {
const [open, setOpen] = useState(false);
return (
<>
<button onClick={() => setOpen(true)}>Open</button>
{open && <dialog>{children}</dialog>}
</>
);
}
// Server Component — passes server-fetched content into client modal
async function Page() {
const content = await fetchContent();
return <Modal><ServerRenderedContent data={content} /></Modal>;
}Граница клиента
Добавление 'use client' делает файл и все его дочерние импорты клиентскими. Чтобы сохранить дочерний компонент серверным, передайте его через свойство или слот, а не импортируйте напрямую.
Способы получения данных
Получайте данные в серверных компонентах и передавайте их дальше. По возможности избегайте получения данных в клиентских компонентах — это увеличивает размер клиентского пакета и дублирует серверную логику.
// Good: fetch in server, pass to client
async function Page() {
const user = await getUser();
return <UserProfile user={user} />; // client component
}
// Avoid: fetch in client
'use client';
function UserProfile() {
const { data } = useSWR('/api/user', fetcher); // network request from browser
}Утилиты только для сервера
Пакет server-only вызывает ошибку сборки, если модуль, предназначенный только для сервера, случайно импортируется в клиентский компонент.
// lib/db.ts
import 'server-only'; // throws at build time if imported in 'use client' file
export const db = createDbClient(process.env.DB_URL);Общее состояние сервера и клиента
Серверные компоненты не могут хранить состояние. Чтобы передать состояние, полученное на сервере, интерактивным клиентским компонентам, передайте его через свойства при первом отображении, а затем управляйте обновлениями на клиенте.
Когда добавлять use client
Добавляйте 'use client', когда вам нужны: хуки (useState, useEffect), браузерные события (onClick), браузерные API (localStorage, window) или сторонние библиотеки для клиента.
Быстрая проверка
Что нужно добавить в начало файла, чтобы использовать useState или onClick в маршрутизаторе App Next.js?
Итоги
Все компоненты маршрутизатора App по умолчанию являются серверными — клиентский пакет не содержит JavaScript, а данные доступны напрямую. Добавляйте 'use client' только там, где нужна интерактивность. Передавайте полученные на сервере данные через свойства или дочерние элементы клиентским оболочкам, оставляя границу клиента как можно ближе к листовым компонентам.
Часто задаваемые вопросы
Урок «Серверные и клиентские компоненты в Next.js» бесплатный?
Да — полный текст урока «Серверные и клиентские компоненты в Next.js» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.
Чему я научусь в уроке «Серверные и клиентские компоненты в Next.js»?
Определяйте, когда добавлять 'use client' и как объединять серверное и клиентское деревья компонентов. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать React Academy?
Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Серверные и клиентские компоненты в Next.js»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке React Academy?
Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Соглашения об именовании файлов App Router
- Серверные и клиентские компоненты в Next.js
- Динамические маршруты и группы маршрутов
- API метаданных и SEO в App Router