Rendering modellek (SSR, SSG, ISR)

A Next.js a legfontosabb előnye, hogy vegyítheted a rendering stratégiákat – oldalonként, sőt komponensenként.

8. Rendering modellek (SSR, SSG, ISR)

A Next.js a legfontosabb előnye, hogy vegyítheted a rendering stratégiákat – oldalonként, sőt komponensenként.

Static Site Generation (SSG)

Az oldal build időben generálódik egyszer, és CDN-ről tálalják ki. Leggyorsabb megoldás statikus tartalomhoz.

// app/about/page.tsx
// Nincs dinamikus függőség → automatikusan statikus
export default function AboutPage() {
  return <h1>Rólunk</h1>
}

// Dinamikus oldalak statikus generálása
// app/blog/[slug]/page.tsx
export async function generateStaticParams() {
  const posts = await fetchAllPosts()
  return posts.map(post => ({ slug: post.slug }))
}

export default async function BlogPost({ params }) {
  const { slug } = await params
  const post = await fetchPost(slug)
  return <article>{post.content}</article>
}

Server-Side Rendering (SSR)

Minden kérésnél szerveren generálódik az oldal. Szükséges, ha a tartalom felhasználóhoz kötött.

// app/dashboard/page.tsx
// A cookies() vagy headers() hívás SSR-t vált ki
import { cookies } from 'next/headers'

export default async function DashboardPage() {
  const cookieStore = await cookies()
  const userId = cookieStore.get('userId')?.value

  const userData = await fetchUserData(userId)
  return <Dashboard data={userData} />
}

Incremental Static Regeneration (ISR)

Statikusan generált oldal, amely megadott időnként újragenerálódik a háttérben.

// app/products/page.tsx
async function getProducts() {
  const res = await fetch('https://api.example.com/products', {
    next: { revalidate: 3600 }, // 1 óránként frissül
  })
  return res.json()
}

export default async function ProductsPage() {
  const products = await getProducts()
  return <ProductList products={products} />
}

On-Demand ISR

Esemény hatására manuálisan triggerelhető újragenerálás:

// app/actions.ts
'use server'

import { revalidatePath, revalidateTag } from 'next/cache'

export async function publishPost(postId: string) {
  await db.posts.publish(postId)

  revalidatePath('/blog')              // egy útvonal frissítése
  revalidateTag('posts')               // tag alapú frissítés
}

Streaming

A Streaming lehetővé teszi, hogy az oldal részletekben érkezzen a böngészőbe – a gyors részek azonnal megjelennek, a lassúak töltési jelzővel várnak.

// app/dashboard/page.tsx
import { Suspense } from 'react'
import { SlowStats } from '@/components/SlowStats'
import { FastHeader } from '@/components/FastHeader'

export default function DashboardPage() {
  return (
    <div>
      <FastHeader /> {/* Azonnal renderelődik */}
      <Suspense fallback={<StatsSkeleton />}>
        <SlowStats /> {/* Adatlekérés után streamelődik */}
      </Suspense>
    </div>
  )
}

Rendering modellek összehasonlítása

	SSG	ISR	SSR	Streaming
Mikor generálódik	Build	Build + időközönként	Minden kérésnél	Részletekben
Gyorsaság	⚡⚡⚡	⚡⚡	⚡	⚡⚡
Frissesség	Elavulhat	Időnként frissül	Mindig friss	Mindig friss
Felhasználó-specifikus	❌	❌	✅	✅
Ideális használat	Marketing, blog	Katalógus, lista	Dashboard, auth	Kevert tartalom

📝 Összefoglaló – 8. fejezet

SSG a leggyorsabb – build időben generál, CDN-ről tálal
ISR egyesíti az SSG sebességét a tartalomfrissesség igényével
SSR felhasználó-specifikus tartalomhoz szükséges
Streaming a modern megközelítés: a lap részletekben töltődik be, nincs "fehér képernyő"

Rendering modellek (SSR, SSG, ISR)

On this page