Frontend Academy · Урок

Серверные и клиентские компоненты

«Серверные и клиентские компоненты» — бесплатный урок Frontend Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

Два мира в одном приложении

Серверные компоненты React (RSC) позволяют разделить дерево между частями, формируемыми на сервере, и интерактивными частями на клиенте. В маршрутизаторе приложения Next.js компоненты по умолчанию являются серверными; чтобы выбрать клиентский режим, укажите 'use client'.

Что делают серверные компоненты

Серверные компоненты выполняются только на сервере. Они могут: напрямую получать данные, обращаться к файловой системе, использовать секреты, доступные только серверу, формировать HTML без отправки React клиенту. Они не могут: использовать хуки, управлять состоянием, обрабатывать события.

Что делают клиентские компоненты

Клиентские компоненты выполняются на сервере для SSR (начальный HTML) и на клиенте для интерактивности. Они могут использовать useState, useEffect, обработчики событий и API браузера.

По умолчанию — сервер

В маршрутизаторе приложения Next.js каждый компонент по умолчанию является серверным. Это удобно: большая часть приложения представляет собой статическую генерацию.

// app/posts/page.tsx — Server Component by default
export default async function Posts() {
  const posts = await fetch('https://api/posts').then(r => r.json());
  return (
    <ul>
      {posts.map(p => <li key={p.id}>{p.title}</li>)}
    </ul>
  );
}

Выбор клиентского режима

Добавьте 'use client' в начало файла, чтобы отметить его компоненты (и импортированные ими зависимости) как клиентские компоненты.

// app/Counter.tsx
'use client';

import { useState } from 'react';

export default function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

Сочетание серверных и клиентских компонентов

Серверные компоненты могут формировать клиентские компоненты, но клиентские компоненты не могут импортировать серверные компоненты. Передавайте содержимое, сформированное на сервере, как дочернее содержимое клиентским оболочкам.

// app/page.tsx — Server
import ClientShell from './ClientShell';
import ServerWidget from './ServerWidget';

export default function Home() {
  return (
    <ClientShell>
      <ServerWidget />
    </ClientShell>
  );
}

Почему этот подход важен

Меньшие наборы JS — в браузер отправляются только клиентские компоненты. Прямой доступ к базе данных и файлам — для данных только для чтения слой API не нужен. Улучшенная SEO-оптимизация и более быстрый LCP — HTML поступает уже полностью сформированным.

Правила границы клиента

После того как файл помечен как 'use client', все компоненты в этом файле и любые импортированные дочерние компоненты становятся клиентскими компонентами. Директива 'use client' обозначает границу между сервером и клиентом.

Серверные действия

Функции, помеченные как 'use server', выполняются только на сервере, но могут вызываться из клиентских компонентов — подобно RPC. Их часто используют для отправки форм и изменения данных.

// app/actions.ts
'use server';
import { revalidatePath } from 'next/cache';

export async function createPost(formData: FormData) {
  const title = formData.get('title') as string;
  await db.posts.create({ data: { title } });
  revalidatePath('/posts');
}

// In a Client form component:
<form action={createPost}>
  <input name="title" />
  <button>Create</button>
</form>

Передача props с сервера на клиент

Props, передаваемые с сервера на клиент, должны сериализоваться в JSON — нельзя передавать функции, классы и объекты Date с нестандартной структурой. Преобразуйте данные перед передачей.

Как определить тип компонента

Посмотрите на импортируемые модули: хуки useState и useEffect, а также обработчики onClick требуют, чтобы компонент был клиентским. Простое отображение данных может оставаться серверным.

Преимущества для производительности

Серверные компоненты значительно уменьшают размер набора JS. Страница с преимущественно статическим содержимым и несколькими интерактивными виджетами отправляет только JS интерактивных частей — иногда на 90% меньше.

Быстрая проверка

Какой хук React нельзя использовать (NOT) в серверном компоненте Next.js?

Итоги: серверные и клиентские компоненты

Серверные компоненты: выполняются только на сервере, поддерживают async/await и OK, но не поддерживают хуки, состояние и обработчики; уменьшают размер наборов. Клиентские компоненты: выбираются директивой 'use client', обеспечивают интерактивность с помощью useState/useEffect и событий. Сервер может формировать клиентские компоненты, а клиент не может импортировать серверные, но может получать их как дочернее содержимое. Серверные действия ('use server') подходят для изменений данных в стиле RPC.

Часто задаваемые вопросы

Урок «Серверные и клиентские компоненты» бесплатный?

Да — полный текст урока «Серверные и клиентские компоненты» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «Серверные и клиентские компоненты»?

Разберитесь в серверных компонентах React, узнайте, когда добавлять директиву 'use client', и научитесь сочетать HTML, отрендеренный на сервере, с интерактивными клиентскими островами Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Серверные и клиентские компоненты»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Frontend Academy