Как выполнить разный код на сервере и на клиенте в Next.js?

В Next.js (App Router) по умолчанию все компоненты являются Server Components: они рендерятся на сервере, не попадают в клиентский бандл и могут напрямую обращаться к базе данных, файловой системе или переменным окружения без префикса NEXT_PUBLIC_. Клиентские компоненты нужны там, где требуется интерактивность: useState, useEffect, обработчики событий, доступ к window или localStorage.

Как разделить код

• Директива "use client" в первой строке файла превращает модуль и всех его импортируемых детей в Client Components.
• Server Components могут импортировать Client Components, но не наоборот (клиент не может импортировать серверный модуль напрямую).
• Проверка окружения во время выполнения: typeof window === "undefined" — true на сервере, false в браузере.
• Серверные данные передаются в клиентские компоненты через props (должны быть сериализуемыми).

Пример

// app/page.tsx (Server Component по умолчанию)
import ClientCounter from "./ClientCounter";
import { db } from "@/lib/db";

export default async function Page() {
  const users = await db.user.findMany(); // только на сервере
  return (
    <div>
      <p>Users: {users.length}</p>
      <ClientCounter />
    </div>
  );
}

// app/ClientCounter.tsx
"use client";
import { useState } from "react";

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

Если нужно выполнить код только в браузере (например, работу с window), его помещают в useEffect внутри Client Component — тогда он не выполнится при серверном рендере и не сломает SSR.

Итог: используйте Server Components для данных и секретов, Client Components — для интерактивности; директива "use client" и проверка typeof window позволяют чётко разделить серверный и клиентский код.