Next.js SSR vs. SSG: Kada koristiti koju metodu?

Next.js je moćan React okvir koji omogućuje razvoj brzim i SEO-prijateljskim web aplikacijama. Jedna od ključnih značajki koja ga izdvaja jest fleksibilno dohvaćanje podataka — SSR (Server-Side Rendering) i SSG (Static Site Generation). U ovom ćemo postu razjasniti što ti pojmovi znače, kada ih koristiti i prikazati praktične primjere koristeći moderan Next.js App Router.

🧠 Što je Server-Side Rendering (SSR)?

Kod SSR-a, HTML za stranicu generira se na poslužitelju pri svakom pojedinačnom zahtjevu. To osigurava da su podaci uvijek svježi i ažurni.

✅ Prednosti:

• Trenutačni, svježi podaci pri svakom zahtjevu.
• Visoka SEO prilagođenost za dinamične podatke.
• Izvrsno funkcionira s personaliziranim sadržajem.

❌ Nedostaci:

• Sporije vrijeme učitavanja (TTFB) u odnosu na statičke stranice.
• Veće opterećenje poslužitelja.

🔧 Korištenje SSR-a u modernom Next.js-u (App Router)

U modernom App Routeru, svaka serverska komponenta prema zadanim postavkama je dinamična ako se ne koristi strogo keširanje:

// app/products/page.tsx
import React from 'react';

// Forsira dinamičko poslužiteljsko renderiranje pri svakom zahtjevu
export const dynamic = 'force-dynamic';

async function getProducts() {
  const res = await fetch('[https://api.example.com/products](https://api.example.com/products)', { cache: 'no-store' });
  return res.json();
}

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

  return (
    <div>
      <h1>Popis proizvoda uživo (SSR)</h1>
      <ul>
        {products.map((p: any) => (
          <li key={p.id}>{p.name}</li>
        ))}
      </ul>
    </div>
  );
}

---

🧊 Što je Static Site Generation (SSG)?

Kod SSG-a, HTML se generira jednom tijekom izgradnje (build time). Dobiveni rezultat isporučuje se trenutno na svaki zahtjev korisnika.

✅ Prednosti:

• Iznimno brzo učitavanje stranica.
• Minimalno opterećenje poslužitelja (može se hostati na bilo kojem CDN-u).
• Idealno za blogove, dokumentaciju i marketinške stranice.

❌ Nedostaci:

• Sadržaj ostaje nepromijenjen dok se stranica ponovno ne izgradi (rebuild).
• Nije prikladno za podatke u stvarnom vremenu.

🔧 Korištenje SSG-a u modernom Next.js-u (App Router)

Prema zadanim postavkama, standardni fetch zahtjevi u Next.js-u automatski se keširaju, čime dobivate SSG out-of-the-box:

// app/blog/page.tsx
import React from 'react';

async function getPosts() {
  // Keširano prema zadanim postavkama (SSG)
  const res = await fetch('[https://api.example.com/posts](https://api.example.com/posts)');
  return res.json();
}

export default async function BlogPage() {
  const posts = await getPosts();

  return (
    <div>
      <h1>Statički blog posts (SSG)</h1>
      <ul>
        {posts.map((post: any) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

---

🔄 Bonus: ISR (Incremental Static Regeneration)

Next.js također podržava inkrementalnu statičku regeneraciju, gdje se statičke stranice mogu ažurirati u pozadini nakon objave bez potrebe za potpunim rebiuldom cijele stranice.

async function getPosts() {
  const res = await fetch('[https://api.example.com/posts](https://api.example.com/posts)', {
    next: { revalidate: 60 }, // Osvježi svških 60 sekundi
  });
  return res.json();
}

---

🧪 Usporedba slučajeva korištenja

Slučaj korištenja	Preporučena strategija
Stranice proizvoda s aktivnim zalihama	SSR
Blog postovi i dokumentacija	SSG ili ISR
Korisničke nadzorne ploče (Dashboards)	SSR (Dinamički)
Marketinške landing stranice	SSG
Često ažurirane vijesti	ISR ili SSR

💡 Zaključak

Odabir između SSR-a i SSG-a ovisi o prirodi vaših podataka. Kada ste u nedoumici, koristite SSG za statičan sadržaj, a SSR kada podaci moraju biti svježi pri svakom kliku. Uz moderan Next.js, kombiniranje oba pristupa u istoj aplikaciji lakše je nego ikad!