Тестовый стенд: стратегии рендеринга

Next.js 16 · React 19 · App Router

Rendering Strategies Benchmark

Каждый маршрут рендерит одинаковый контент (100 карточек) разной стратегией.

МаршрутСтратегияОписание
/csrClient-Side RenderingДанные загружаются в браузере через useEffect
/ssrServer-Side RenderingHTML генерируется на сервере при каждом запросе
/ssgStatic Site GenerationHTML генерируется при сборке
/isrIncremental Static Regen.Статика с ревалидацией каждые 60 секунд
/rscReact Server ComponentsСерверный компонент, без клиентского JS

Замер метрик

  1. npm run build && npm start
  2. Для каждого маршрута: npx lighthouse http://localhost:3000/csr --output json
  3. Или запустить: node run-all.js