Next.js
Тема дорожной карты · Frontend разработчик
Next.js — это production-grade React-фреймворк от Vercel, предоставляющий server-side rendering, static site generation и incremental static regeneration из коробки, что делает его наиболее широко применяемым SSR-решением в экосистеме React. Современная директория app/ использует React Server Components по умолчанию — компоненты, рендерящиеся на сервере и не отправляющие JavaScript клиенту, — тогда как интерактивные части помечаются директивой "use client" для клиентской гидрации. Получение данных в SSR с Next.js происходит через async-Server Components, fetch() API со встроенными опциями кэширования ({ next: { revalidate: 60 } } для ISR) и generateStaticParams для SSG. TypeScript поддерживается первоклассно в Next.js с автогенерируемыми типами для параметров маршрутов и пропсов страниц через PageProps, а опыт разработки обеспечивается Vite-совместимым быстрым обновлением через next dev --turbo.
Как это работает
Next.js рендерят React/Vue/Svelte на сервере, шлют HTML в браузер, гидратируют JavaScript для интерактивности. Next.js (React, App Router с Server Components) — доминирующий выбор; Remix (теперь React Router 7) делает упор на data loaders; Astro — islands-архитектура (в основном статика, гидратация выборочно); Nuxt для Vue; SvelteKit для Svelte; Qwik для resumability. Варианты: SSR (per-request), SSG (на сборке), ISR (периодическая ревалидация), edge rendering (ближе к юзеру).
Когда применять
SSR/SSG — когда важен SEO (блог, маркетинг, продуктовые страницы) или начальный HTML должен быть полезен до JS. Astro — для контент-first сайтов с в основном статикой. Next.js (App Router) — для full-stack React-приложений с микс SSR/SSG/CSR-нужд. Обычная SPA — когда SEO не важен (внутренние тулы, дашборды за auth).
Типичные ошибки
Ловушки Next.js: browser-only API (window, localStorage) в компонентах, рендерящихся на сервере (краш — оборачивайте typeof window !== "undefined" или переносите в client-only); hydration mismatches (HTML сервера ≠ client render); огромные payload через getServerSideProps/loader убивают SSR-выигрыш; нет cache-заголовков на динамических маршрутах. Прочтите доки фреймворка про кеширование один раз.