> Что такое серверный рендеринг в Next.js (JavaScript, Next.js)

Уровень: junior · Роль: frontend · Категория: Технические вопросы

Компании: EvApps, ООО Рокет Тех, Билайн

Стек: JavaScript, Next.js

> Пример ответа

Серверный рендеринг (SSR) в Next.js - это процесс генерации HTML-кода страницы на сервере для каждого запроса, в отличие от статической генерации (SSG), где HTML создается один раз на этапе сборки. В Next.js SSR реализуется с помощью функции getServerSideProps (в Pages Router) или через динамический рендеринг в App Router (по умолчанию для компонентов без generateStaticParams). При запросе пользователя сервер выполняет JavaScript, получает данные, формирует полный HTML и отправляет его клиенту. Это улучшает SEO (поисковые системы видят готовый контент) и ускоряет первый отрисовку (FCP), но увеличивает нагрузку на сервер и время ответа по сравнению с SSG. Пример использования:

JSX
export async function getServerSideProps(context) {
  const data = await fetch('https://api.example.com/data');
  return { props: { data: await data.json() } };
}

В App Router достаточно сделать компонент асинхронным и использовать fetch без cache: 'force-cache'. SSR подходит для страниц с часто меняющимися данными (например, пользовательские дашборды или новости).