Как работает механизм генерации HTML страницы из Next.js в React?

2.0 Middle🔥 212 комментариев

#React

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

🐱

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

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

Как работает механизм генерации HTML страницы из Next.js в React?

SSR (Server-Side Rendering)

Процесс генерации:

Пользователь запрашивает страницу (GET /about)
Next.js запускает React на сервере
React рендерит компоненты -> HTML строка
HTML отправляется браузеру
Браузер показывает HTML (быстро!)
JavaScript загружается и выполняется -> Hydration
React берёт управление и делает страницу интерактивной

// === Page component ===
// app/about/page.tsx

export default function AboutPage() {
  return <div>About Page</div>;
}

// === На сервере происходит: ===
// 1. React.renderToString(<AboutPage />) -> '<div>About Page</div>'
// 2. Next.js оборачивает в HTML:
// <html>
//   <head>...</head>
//   <body>
//     <div>About Page</div>
//     <script src="/_next/...js"></script>
//   </body>
// </html>
// 3. Отправляет браузеру

ISR (Incremental Static Regeneration)

// === Static generation with revalidation ===
// app/blog/[slug]/page.tsx

export const revalidate = 60; // перегенерировать каждые 60 секунд

export async function generateStaticParams() {
  // Pre-generate для популярных постов
  return [
    { slug: 'hello-world' },
    { slug: 'react-tips' },
  ];
}

export default function BlogPost({ params: { slug } }) {
  return <article>{/* ... */}</article>;
}

// === На build time: ===
// npm run build
// 1. Next.js генерирует HTML для всех slugs из generateStaticParams
// 2. Сохраняет в .next/server/pages/blog/hello-world.html
// 3. Отправляет готовый HTML при запросе (очень быстро)
// 4. Каждые 60 сек на фоне пересчитывает (revalidate)

Hydration

// === Проблема: Hydration mismatch ===

export function DateComponent() {
  const [isMounted, setIsMounted] = useState(false);

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

  // На сервере: дата/время это одно значение
  // На клиенте: после hydration может быть другое
  // Это вызывает ошибку!

  if (!isMounted) return null; // Skip первый рендер на клиенте

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

Output: standalone для production

// === next.config.js ===
const nextConfig = {
  output: 'standalone', // для Dokku deployment
};

// === Build process: ===
// npm run build
// 1. Компилирует React компоненты
// 2. Генерирует SSR функции
// 3. Создаёт .next/standalone папку
// 4. Эту папку можно запустить как сервер Node.js
// 5. node server.js -> слушает на порту 3000