Rendering módok (CSR, SSR, SSG, ISR, streaming) és adatlekérés Next.js App Router-ben.

Next.js – Rendering & adatlekérés

Ez az oldal a teljes Next.js jegyzet 3. és 5. fejezetének tömörített változata.

Rendering – alapfogalmak

A rendering azt jelenti, mikor és hol generálódik az oldal HTML‑je. Ez határozza meg:

teljesítmény,
SEO,
adatfrissesség.

Rendering módok röviden

CSR – Client‑Side Rendering

HTML szinte üres, a böngésző tölti be a JS‑t, és az renderel.
Jó: belső dashboard, ahol SEO nem számít.
Rossz: lassabb első betöltés, gyenge SEO.

SSR – Server‑Side Rendering

Minden kérésnél a szerver friss HTML‑t generál.
Jó: személyre szabott, mindig friss tartalom.
Hátrány: nagyobb szerverterhelés.

SSG – Static Site Generation

HTML build időben generálódik, minden kérés ugyanazt kapja.
Jó: blog, dokumentáció, marketing oldalak.
Előny: villámgyors, olcsó, jó SEO.

ISR – Incremental Static Regeneration

SSG + időzített megújítás.
revalidate után a háttérben újragenerálódik az oldal.

// app/products/page.tsx
export const revalidate = 60; // 60 mp-enként frissül

export default async function ProductsPage() {
  const products = await fetch('https://api.example.com/products').then(r => r.json());
  return <ProductList products={products} />;
}

Streaming

A kész részeket fokozatosan küldi a böngészőnek.
Suspense‑szel működik együtt.

import { Suspense } from 'react';

export default function Page() {
  return (
    <div>
      <h1>Gyorsan betölt</h1>
      <Suspense fallback={<div>Lassú rész töltődik...</div>}>
        <SlowComponent />
      </Suspense>
    </div>
  );
}

Mikor melyiket használd?

Rendering mód	Adatok	SEO	Frissesség	Tipikus use case
SSG	Build‑idejű	✅ Kiváló	Csak rebuildnél	Blog, doksi, marketing
ISR	Build + időzített	✅ Kiváló	Időzítve	Webshop, híroldal
SSR	Kérésenként	✅ Kiváló	Mindig friss	Személyre szabott tartalom
CSR	Böngészőben	❌ Gyenge	Mindig friss	Belső dashboard
Streaming	Fokozatos	✅ Jó	Igény szerint	Vegyes, nagy oldalak

Alapelv: Next.js 15-ben a default SSG, amíg nem használsz dinamikus API‑kat (cookies, headers, stb.).

Adatlekérés – server‑first szemlélet

Next.js App Router‑ben az ajánlott alap:

Server Component + fetch a szerveren.
Nincs useEffect + kliens oldali fetch, ha nem muszáj.

// app/blog/page.tsx – Server Component
export default async function BlogPage() {
  const posts = await fetch('https://api.example.com/posts').then(r => r.json());

  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

Előnyök:

API kulcsok nem mennek a kliensre.
Kevesebb round‑trip.
Gyorsabb első render.

Cache viselkedés Next.js 15-ben

Fontos változás:

Next.js 14: fetch alapból cache‑elt.
Next.js 15: fetch alapból nem cache‑el.

// Mindig friss (alapértelmezés 15-ben)
fetch('https://api.example.com/data');

// Végtelen ideig cache-elt
fetch('https://api.example.com/data', { cache: 'force-cache' });

// ISR – N másodpercenként frissül
fetch('https://api.example.com/data', { next: { revalidate: 60 } });

Revalidation – cache frissítés

Idő alapú

fetch('https://api.example.com/posts', {
  next: { revalidate: 3600 }, // 1 óránként frissül
});

On‑demand (esemény alapú)

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

// adott útvonal cache-ének törlése
revalidatePath('/blog');

// tag‑elt requestekhez
fetch('https://api.example.com/posts', { next: { tags: ['posts'] } });
revalidateTag('posts');

Mikor mit válassz?

Helyzet	Ajánlott megoldás
Statikus tartalom, ritkán változik	`fetch` + `cache: 'force-cache'` (SSG)
Tartalom változik, de nem kell mindig friss	`next: { revalidate: N }` (ISR)
Mindig friss, személyre szabott	Dinamikus route, cache nélküli `fetch` (SSR)
Felhasználói interakcióra változik	Kliens oldali fetch (React Query, stb.)
Eseményre frissül	`revalidatePath` / `revalidateTag`

Kliens oldali adatlekérés – mikor indokolt?

React Query / SWR / sima useEffect + fetch:

szűrés, keresés, sortolás UI‑ból,
real‑time adatok (chat, notificaton),
olyan személyre szabott adatok, amiket nem akarsz SSR‑elni.

Példa React Query‑vel:

"use client";
import { useQuery } from '@tanstack/react-query';

export default function UserProfile({ userId }: { userId: string }) {
  const { data, isLoading, error } = useQuery({
    queryKey: ['user', userId],
    queryFn: () => fetch(`/api/users/${userId}`).then(r => r.json()),
  });

  if (isLoading) return <div>Töltés...</div>;
  if (error) return <div>Hiba történt</div>;

  return <div>{data.name}</div>;
}

Összefoglalás

Server‑first szemlélet: amíg lehet, szerveren kérj adatot.
Next.js 15‑ben a fetch alapból nem cache‑el – cache stratégiát mindig tudatosan állíts be.
SSG/ISR‑t használd ahol lehet, SSR‑t csak ha tényleg kell mindig friss adat.
Kliens oldali adatlekérés inkább interaktív, user‑vezérelt esetekre való.

Rendering & adatlekérés

On this page