Next.js: Как встроить клиентскую логику?

[kirilljs]

Next.js сочетает преимущества серверного и клиентского рендеринга, но для реализации интерактивных фич (анимации, обработка событий, локальное состояние) требуется правильно интегрировать клиентскую логику.

Щас расскажу и покажу как это сделать легко и просто если вы не умеете читать документацию

---

🧩 Клиентские компоненты в Next.js

Начиная с Next.js 13, фреймворк поддерживает разделение на серверные (Server Components) и клиентские (Client Components).

Для активации клиентской логики в файле компонента добавьте директиву:

'use client';

import { useState, useEffect } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Счетчик: ${count}`;
  }, [count]);

  return (
    <button onClick={() => setCount(prev => prev + 1)}>
      Кликнуто {count} раз
    </button>
  );
}

️ Без 'use client' компонент будет обрабатываться на сервере, и клиентская логика работать не будет.

---

Взаимодействие с серверными компонентами

Серверные компоненты могут использовать клиентские как дочерние элементы:

// app/page.tsx (Server Component)
import Counter from './Counter';

export default function Home() {
  return (
    <main>
      <h1>Добро пожаловать!</h1>
      <Counter /> {/* Клиентский компонент */}
    </main>
  );
}

В 14 версии клиентские не могли использовать серверные как дочерние, но 15 версия все перевернула с ног на ногу, но об этом потом

---

🧰 Клиентские функции и API

Работа с DOM
Используйте useRef для доступа к элементам:

const inputRef = useRef<HTMLInputElement>(null);

Локальное состояние
useState, useReducer, useEffect работают как в обычном React-приложении.

Браузерные API
Доступны только в useEffect или обработчиках событий:

useEffect(() => {
  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize);
}, []);

Хотя вы наверное и так это знаете, но на всякий случай добавлю! Вдруг нас читают новички!!!

---

️ Распространенные ошибки

Использование window/document на сервере

// НЕПРАВИЛЬНО
if (typeof window !== 'undefined') { /* Проверка обязательна! */ }

// Правильно
useEffect(() => {
  console.log(window.innerWidth); // Только в useEffect или обработчиках
}, []);

Неинициализированные состояния
Избегайте несоответствия между серверным и клиентским рендерингом:

const [mounted, setMounted] = useState(false);
useEffect(() => setMounted(true), []);
return mounted ? <Component /> : <Skeleton />;

---

Оптимизация загрузки

Ленивая загрузка клиентских модулей

import dynamic from 'next/dynamic';
const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
  ssr: false, // Отключить серверный рендеринг
  loading: () => <p>Загрузка...</p>,
});

Разделение кода
Используйте splitChunks в next.config.js для оптимизации бандла.

---

Полезные ссылки

• Официальная документация: Client Components
• Data Fetching в Next.js
• React Server Components vs Client Components

---

Вопросики имеются?
Оставляйте комментарии ниже!

[Jspi]

А разве можно использовать useEffect в серверном компоненте???

[kirilljs]

@Jspi таки нет, где ты увидел юсэфект в серверном компоненте?