SSR, SSG, ISR, CSR, PPR
Unde și când se randează pagina, ce alegi în ce context și cum deduce Next 16 strategia.
Actualizat
Ce înseamnă „strategie de randare”
Randarea = transformarea componentelor tale în HTML. Întrebarea e unde și când se întâmplă:
- unde — pe server sau în browser;
- când — o dată, la build; la fiecare request; sau o dată și apoi reîmprospătat periodic.
Fiecare combinație e o strategie, cu un acronim. Alegerea decide cât de rapid apare pagina, cât de proaspete sunt datele, cât costă serverul și cât de bine o vede Google.
Strategiile, pe scurt
| Strategie | Unde | Când | Rezultat |
|---|---|---|---|
| CSR — client-side rendering | browser | după ce se încarcă JS-ul | HTML aproape gol; JS-ul construiește pagina |
| SSR — server-side rendering | server | la fiecare request | HTML complet, cu date proaspete |
| SSG — static site generation | server | o dată, la build | fișiere HTML gata, servite de pe CDN |
| ISR — incremental static regeneration | server | la build sau la prima vizită, apoi reîmprospătat periodic / la cerere | static + date relativ proaspete |
| PPR — partial prerendering | ambele | shell static la build + părți dinamice la request, în stream | static și dinamic în aceeași pagină |
Cum se simte fiecare
CSR — userul vede conținutul abia la final:
HTML gol→descarcă JS→fetch date→pagina apareSSR — conținutul vine gata de pe server, dar serverul lucrează la fiecare request:
serverul ia datele→HTML complet→pagina apare→hidratareSSG / ISR — totul e gata dinainte, pe CDN:
HTML gata pe CDN→pagina apare instant→hidratareHidratarea = React atașează evenimentele pe HTML-ul primit de la server, ca să devină interactiv.
Comparație
| CSR | SSR | SSG | ISR | PPR | |
|---|---|---|---|---|---|
| Prima afișare | lentă | medie | instant | instant | instant (shell) |
| Date proaspete | da | da | doar la build | aproape | da, în părțile dinamice |
| Personalizare per user | da | da | nu | nu | da, în părțile dinamice |
| SEO | slab | bun | excelent | excelent | excelent |
| Cost server | mic | mare | minim | mic | mic |
Când folosești fiecare
| Context | Strategie | De ce |
|---|---|---|
| blog, documentație, landing, pagini de marketing | SSG | conținutul se schimbă rar; viteză maximă, SEO |
| catalog de produse, articole de știri | ISR | multe pagini, se schimbă din când în când (preț, stoc) |
| pagină care e statică, dar are o parte per user (coș, „bun venit, Ana”) | PPR | shell instant + personalizare |
| dashboard, inbox, cont — date private, mereu proaspete | SSR (dinamic) | depinde de user la fiecare request |
| editor, aplicație tip Figma / Excel, joc | CSR pentru zona interactivă | tot e interacțiune locală; SEO irelevant |
| căutare cu filtre | SSR pentru prima pagină + client pentru filtre | SEO + interactivitate |
Majoritatea aplicațiilor reale combină strategiile: marketing static, produse ISR, cont dinamic, editor client.
Cum se traduc în Next.js 16 (App Router)
În App Router nu alegi un acronim per pagină — Next deduce strategia din ce folosește codul:
| Ce faci în cod | Rezultat |
|---|---|
nimic dinamic (sau date în 'use cache') |
static (SSG) — ○ la build |
'use cache' + cacheLife('hours') |
ISR — static, regenerat după durata aleasă |
generateStaticParams + rute dinamice |
SSG pentru valorile listate, ISR pentru restul la prima vizită |
cookies(), headers(), searchParams în <Suspense> |
PPR — ◐ la build |
| aceleași API-uri peste toată pagina, fără cache | SSR dinamic — ƒ |
| Client Component cu fetch după montare / TanStack Query | CSR pentru acea zonă |
Aplicația asta: lecțiile sunt în static shell (generate la build, cache hours), progresul tău vine dinamic, în stream — PPR. Editorul de cod e CSR (next/dynamic cu ssr: false).
Automatic Static Optimization
Termen din Pages Router (vechiul router, folderul pages/): dacă o pagină nu exportă getServerSideProps sau getInitialProps, Next o pre-generează automat ca HTML static. Adică: static implicit, dinamic doar când ceri explicit.
App Router a dus ideea mai departe: deducția se face per componentă, nu per pagină — de aici PPR. Dacă lucrezi pe un proiect cu pages/, vei întâlni:
| Pages Router | Strategie |
|---|---|
| fără funcții de date | SSG automat (Automatic Static Optimization) |
getStaticProps |
SSG |
getStaticProps + revalidate: 60 |
ISR |
getServerSideProps |
SSR |
useEffect + fetch |
CSR |
Pe scurt
- CSR = în browser; SSR = pe server la fiecare request; SSG = la build; ISR = static reîmprospătat; PPR = static + dinamic în aceeași pagină.
- Conținut public, rar schimbat → static / ISR; date per user → dinamic / PPR; interacțiune pură → client.
- În Next 16 strategia e dedusă din cod:
'use cache', API-urile de runtime și<Suspense>.