Next.js: SSR и SSG

SPA «на голом React» плохо видят поисковики: HTML пустой, скрипты грузятся в браузере. Next.js рендерит HTML на сервере — скорость и SEO, не теряя React-дев-опыта.

Три режима рендеринга

• CSR — всё в браузере (ваш проект из урока 29). Быстро после загрузки, но первый HTML пуст;
• SSG — страницы собираются при построении и отдаются статикой. Блог, лендинг, документация — идеал;
• SSR — сервер собирает HTML на каждый запрос. Нужно, когда данные меняются часто (личный кабинет).

// app/posts/[id]/page.js — SSR-страница поста
export default async function PostPage({ params }) {
  const post = await fetch("https://api.x.dev/posts/" + params.id).then(r => r.json());
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </article>
  );
}

Файловые маршруты

В Next.js URL — это путь в папке app/:

app/
├── page.js              # /
├── about/page.js        # /about
├── posts/page.js        # /posts
└── posts/[id]/page.js   # /posts/42  (динамический сегмент)