{post.title}

\n {new Date(post.createdAt).toLocaleDateString()}\n

{post.content}

\n {/* Client Component для интерактивности */}\n \n

My Post

\n 2024-01-15\n

Content here

\n \n

← Назад к вопросам

Как виртуальное дерево формируется по данным Next.js полученным с сервера?

1.7 Middle🔥 191 комментариев

#JavaScript Core#Браузер и сетевые технологии

Комментарии (1)

🐱

claude-haiku-4.5PrepBro AI2 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Как Next.js формирует виртуальное дерево из данных сервера

Этот вопрос проверяет понимание SSR (Server-Side Rendering), гидратации (hydration) и работы React Virtual DOM в контексте Next.js.

Жизненный цикл Next.js приложения

Шаг 1: Серверная генерация HTML

// app/posts/[id]/page.tsx - Server Component по умолчанию
export default async function PostPage({ params }) {
  const post = await fetch(`/api/posts/${params.id}`).then(r => r.json());
  
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  );
}

// Next.js на сервере:
// 1. Получает данные (post с id=1)
// 2. Рендерит компонент с этими данными
// 3. Генерирует HTML:
//    <article><h1>My Post</h1><p>Content here</p></article>

Шаг 2: Отправка на клиент

<!-- Браузер получает готовый HTML -->
<!DOCTYPE html>
<html>
  <head>
    <script src="/next/bundle.js"></script>
  </head>
  <body>
    <!-- Статический HTML с данными -->
    <article>
      <h1>My Post</h1>
      <p>Content here</p>
    </article>
    <!-- Специальный скрипт для гидратации -->
    <script>
      window.__NEXT_DATA__ = {
        props: { pageProps: { post: { id: 1, title: 'My Post', content: 'Content here' } } },
        page: '/posts/[id]'
      };
    </script>
  </body>
</html>

Шаг 3: Гидратация (Hydration) на клиенте

// React на клиенте получает:
// 1. Уже готовый DOM (статический HTML)
// 2. Данные из window.__NEXT_DATA__
// 3. Компонент для рендера

// React::
// 1. Рендерит компонент в память (Virtual DOM)
// 2. Сравнивает Virtual DOM с реальным DOM в браузере
// 3. Если совпадают - отлично, добавляет обработчики событий
// 4. Если не совпадают - ошибка гидратации

Практический пример: Blog

// app/blog/[slug]/page.tsx
import { Metadata } from 'next';

interface Post {
  id: string;
  slug: string;
  title: string;
  content: string;
  createdAt: string;
}

// Генерируется на сервере
export async function generateMetadata({ params }): Promise<Metadata> {
  const post = await fetchPost(params.slug);
  return { title: post.title, description: post.content };
}

export default async function BlogPostPage({ params }) {
  // Серверная функция - данные получены на сервере
  const post: Post = await fetch(
    `https://api.example.com/posts/${params.slug}`
  ).then(r => r.json());

  return (
    <article>
      <h1>{post.title}</h1>
      <time>{new Date(post.createdAt).toLocaleDateString()}</time>
      <div>{post.content}</div>
      {/* Client Component для интерактивности */}
      <PostActions postId={post.id} />
    </article>
  );
}

// app/blog/[slug]/PostActions.tsx
'use client';

import { useState } from 'react';

export function PostActions({ postId }: { postId: string }) {
  const [liked, setLiked] = useState(false);

  return (
    <button onClick={() => setLiked(!liked)}>
      {liked ? 'Liked' : 'Like'}
    </button>
  );
}

Процесс формирования дерева:

1. Сервер генерирует HTML:
   <article>
     <h1>My Post</h1>
     <time>2024-01-15</time>
     <div>Content here</div>
     <button>Like</button>
   </article>

2. React на клиенте создаёт Virtual DOM:
   React.Element {
     type: 'article',
     props: {},
     children: [
       { type: 'h1', props: {}, children: 'My Post' },
       { type: 'time', props: {}, children: '2024-01-15' },
       { type: 'div', props: {}, children: 'Content here' },
       {
         type: PostActions,
         props: { postId: '123' },
         children: { type: 'button', ... }
       }
     ]
   }

3. React сравнивает Virtual DOM с реальным DOM в браузере
   - HTML совпадает -> не пересоздаёт DOM
   - Добавляет обработчики событий
   - Компонент готов к взаимодействию

Ошибка гидратации (Hydration Mismatch)

// ❌ Это вызовет ошибку гидратации
export default function Component() {
  const [text, setText] = useState('');
  
  // Проблема: на сервере не будет вызван useEffect
  // На клиенте текст в первый момент пустой
  useEffect(() => {
    setText(new Date().toLocaleString());
  }, []);

  return <div>{text}</div>;  // На сервере пусто, на клиенте текст
}

// Правильный подход:
export default function Component() {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) return null;  // На сервере и клиенте одинаково

  return <div>{new Date().toLocaleString()}</div>;
}

Server Components vs Client Components

Server Component (по умолчанию)

// Данные получены на СЕРВЕРЕ
export default async function UserProfile({ userId }) {
  const user = await db.user.findById(userId);  // Прямой доступ к БД
  
  return (
    <div>
      <h1>{user.name}</h1>  {/* HTML уже с данными */}
      <ClientInteractivity />
    </div>
  );
}

Client Component

'use client';

import { useState, useEffect } from 'react';

// Данные получены на КЛИЕНТЕ
export function ClientComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('/api/data').then(r => r.json()).then(setData);
  }, []);

  return <div>{data?.value}</div>;  // Virtual DOM формируется в браузере
}

Процесс Virtual DOM в Next.js

Server Side (Node.js):
┌─────────────────────────────┐
│ getServerSideProps (данные) │
└────────────┬────────────────┘
             │
             ▼
┌─────────────────────────────┐
│ Рендер React компонента     │
│ (создаёт Virtual DOM)       │
└────────────┬────────────────┘
             │
             ▼
┌─────────────────────────────┐
│ Преобразование в HTML       │
│ (renderToString)            │
└────────────┬────────────────┘
             │
          (отправить)
             │
             ▼
Client Side (браузер):
┌─────────────────────────────┐
│ Получить HTML + данные      │
└────────────┬────────────────┘
             │
             ▼
┌─────────────────────────────┐
│ React гидратирует компонент │
│ (создаёт Virtual DOM)       │
└────────────┬────────────────┘
             │
             ▼
┌─────────────────────────────┐
│ Сравнить Virtual DOM с DOM  │
│ Добавить обработчики        │
└─────────────────────────────┘

На собеседовании

Хороший ответ включает:

Что данные получены на сервере в Server Components
Как Next.js генерирует HTML с данными
Процесс гидратации на клиенте
Virtual DOM и как React сравнивает его с реальным DOM
Различие между Server и Client Components
Как избежать ошибок гидратации

Это демонстрирует понимание архитектуры Next.js и SSR.