Server и Client Components

Что такое Server Components и Client Components

В Next.js каждый компонент выполняется либо на сервере, либо в браузере (и на сервере при первом рендере). Выбор определяет, что компонент умеет и сколько JavaScript получит пользователь.

• Server Component — выполняется только на сервере. Его код никогда не попадает в браузер; пользователь получает только итоговый HTML.
• Client Component — отправляется в браузер как JavaScript, гидратируется и может быть интерактивным.

В app/ любой компонент по умолчанию — Server Component. Он становится Client Component, когда файл начинается с 'use client'.

Различия

Когда что использовать

// Server Component — по умолчанию
export default async function Page() {
  const posts = await db.post.findMany()
  return <PostList posts={posts} />
}

'use client'
import { useState } from 'react'

export function LikeButton({ initial }: { initial: number }) {
  const [likes, setLikes] = useState(initial)
  return <button onClick={() => setLikes(likes + 1)}>♥ {likes}</button>
}

Золотое правило

Держите 'use client' как можно ниже в дереве. Страница остаётся серверной; клиентской будет только интерактивная кнопка. 'use client' отмечает границу: файл и всё, что он импортирует, становится клиентским кодом.

• Pageserver
  • Headerserver
  • PostListserver
    • LikeButtonclient — только это попадает в браузер как JS
  • Footerserver

Граница server → client

Server Actions — мутации с клиента

Функции 'use server', которые вы вызываете с клиента, но выполняются они на сервере, — для форм и мутаций. Урок Server Actions.

Коротко

• Server Component (по умолчанию): async, доступ к данным и секретам, ноль JS в браузере.
• Client Component ('use client'): состояние, эффекты, события, API браузера.
• 'use client' как можно ниже; сериализуемые props через границу.

Официальные источники

• Next.js — Server and Client Components
• react.dev — 'use client'
• react.dev — Server Components