Що таке гібридний рендеринг у Next.js?

Next.jsMiddle~1 хв читання

Гібридний рендеринг у Next.js - це підхід, при якому одна й та сама сторінка поєднує кілька стратегій рендерингу: серверні компоненти, клієнтські компоненти, статичну генерацію та динамічний рендеринг.

Простіше кажучи: Next.js дозволяє гнучко обирати, де і як рендерити кожну частину застосунку, а не використовувати один спосіб для всього.

Коротке визначення (для співбесіди)

Гібридний рендеринг - це можливість Next.js:

рендерити частину сторінки на сервері
частину - у браузері
частину - заздалегідь (static)
частину - за запитом (dynamic)

і все це в межах однієї сторінки.

Як це виглядає концептуально

https://h8dxkfmaphn8o0p3.public.blob.vercel-storage.com/learn/pages-router/data-fetching/server-side-rendering.png

https://nextjs.org/_next/image?q=75&url=https%3A%2F%2Fh8DxKfmAPhn8O0p3.public.blob.vercel-storage.com%2Flearn%2Flight%2Flearn-client-server-modules.png&w=3840

https://miro.medium.com/v2/resize%3Afit%3A1400/1%2AcKzjyFZerA-VKa8IueCYHA.png

Одна сторінка може складатися з:

серверного layout'а
серверного компонента з даними
клієнтського компонента для інтерактивності

Простий приклад гібридної сторінки

tsx

// Server Component (page.tsx)
import Counter from './Counter'

export default async function Page() {
  const products = await getProducts()

  return (
    <>
      <h1>Products</h1>
      <ProductList products={products} />
      <Counter />
    </>
  )
}

tsx

// Client Component
'use client'
import { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}