Frontend Academy · leksjon

SSG, SSR og ISR

Generer sider statisk ved bygging, gjengi dem på serveren for hver forespørsel, eller valider bufrede sider på nytt etter en tidsplan med Incremental Static Regeneration.

Leksjon 3 av 414 trinn

SSG, SSR og ISR er en gratis leksjon i Frontend Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Frontend Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Tre strategier for gjengivelse

Next.js støtter tre måter å gjengi sider på: SSG (Static Site Generation), SSR (Server-Side Rendering) og ISR (Incremental Static Regeneration). Hver strategi har ulike avveininger.

SSG — generering ved bygging

Sider genereres som statisk HTML ved bygging og leveres fra et CDN. Dette gir raskest mulig levering. Best for: markedsføringssider, blogger og dokumentasjon.

SSG i Pages Router

Eksporter getStaticProps fra en side. Funksjonen kjører ved bygging og gir props til komponenten.

// pages/blog/[slug].tsx
export async function getStaticPaths() {
  const slugs = await fetchAllSlugs();
  return { paths: slugs.map(s => ({ params: { slug: s } })), fallback: false };
}

export async function getStaticProps({ params }) {
  const post = await fetchPost(params.slug);
  return { props: { post } };
}

SSG i App Router

Som standard henter asynkrone Server Components data ved bygging. Bruk generateStaticParams for dynamiske ruter.

// app/blog/[slug]/page.tsx
export async function generateStaticParams() {
  const posts = await fetchAllPosts();
  return posts.map(p => ({ slug: p.slug }));
}

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

SSR — generering per forespørsel

Sider gjengis ved hver forespørsel. Bruk dette når innholdet er brukerspesifikt eller endres for ofte til å kunne hurtigbufres.

SSR i Pages Router

Eksporter getServerSideProps.

// pages/dashboard.tsx
export async function getServerSideProps({ req }) {
  const userId = req.cookies.userId;
  const data = await fetchUserDashboard(userId);
  return { props: { data } };
}

SSR i App Router

Tving gjengivelse per forespørsel med dynamic = 'force-dynamic', eller ved å lese cookies/headers (som automatisk deaktiverer statisk gjengivelse).

// app/dashboard/page.tsx
import { cookies } from 'next/headers';

export default async function Dashboard() {
  const userId = cookies().get('userId')?.value;
  const data = await fetchUserDashboard(userId);
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

// Or explicit:
export const dynamic = 'force-dynamic';

ISR — det beste fra begge

ISR: lever en statisk side, men generer den på nytt i bakgrunnen hvert N. sekund. Kombinerer hastigheten til SSG med relativt ferske data.

ISR i Pages Router

Legg til revalidate i getStaticProps.

export async function getStaticProps() {
  const posts = await fetchPosts();
  return {
    props: { posts },
    revalidate: 60  // regenerate at most every 60 seconds
  };
}

ISR i App Router

Bruk next: { revalidate: N } i fetch-alternativene, eller angi export const revalidate = N på en side.

// Option A: per fetch
const posts = await fetch('https://api/posts', { next: { revalidate: 60 } })
  .then(r => r.json());

// Option B: whole page
export const revalidate = 60;

export default async function Page() {
  const posts = await fetch('https://api/posts').then(r => r.json());
  return <Feed posts={posts} />;
}

Revalidering ved behov

Utløs regenerering manuelt (for eksempel fra en CMS-webhook) uten å vente på tidsintervallet.

// pages/api/revalidate.ts (Pages) or app/api/revalidate/route.ts (App)
import { revalidatePath, revalidateTag } from 'next/cache';

export async function POST(req) {
  const { slug } = await req.json();
  revalidatePath(`/blog/${slug}`);
  return Response.json({ revalidated: true });
}

Velg riktig strategi

Bruk SSG når data endres sjelden (markedsføring, dokumentasjon og blogg). Bruk ISR når data oppdateres av og til (CMS-drevne nettsteder og produktlister for netthandel). Bruk SSR for brukerspesifikt innhold (dashbord og kontosider).

Kort kontroll

Hva gjør ISR (Incremental Static Regeneration) som ren SSG ikke gjør?

Besvar den i den interaktive leksjonen

Oppsummering: SSG, SSR og ISR

SSG: ved bygging, raskest, fast innhold. SSR: per forespørsel, dynamisk, tregere. ISR: SSG + planlagt regenerering i bakgrunnen — relativt ferskt og raskt. Pages Router bruker getStaticProps/getServerSideProps. App Router bruker asynkrone Server Components med fetch revalidate eller en revalidate-konstant på siden. revalidatePath/Tag brukes til oppdateringer ved behov.

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 41
Leksjoner: 163

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «SSG, SSR og ISR» gratis?

Ja – hele teksten i «SSG, SSR og ISR» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Frontend Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «SSG, SSR og ISR»?

Generer sider statisk ved bygging, gjengi dem på serveren for hver forespørsel, eller valider bufrede sider på nytt etter en tidsplan med Incremental Static Regeneration. Du øver på Frontend Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Frontend Academy?

Ingen tidligere erfaring er nødvendig. Frontend Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.

Hvor lang tid tar leksjonen «SSG, SSR og ISR»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Frontend Academy-leksjonen?

Ja. Alle Frontend Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Frontend Academy