Frontend Academy · Lektion

SSG, SSR og ISR

Generér sider statisk ved build-tid, render dem på serveren pr. forespørgsel, eller genvalidér cachede sider efter en tidsplan med Incremental Static Regeneration.

Lektion 3 af 414 trin

SSG, SSR og ISR er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.

Tre renderingsstrategier

Next.js understøtter tre måder at rendere sider på: SSG (statisk websidegenerering), SSR (rendering på serveren) og ISR (trinvis statisk regenerering). Hver strategi har forskellige afvejninger.

SSG — generering ved bygning

Sider genereres som statisk HTML ved bygningen og leveres fra et CDN. Den hurtigst mulige levering. Bedst til: marketingssider, blogs og dokumentation.

SSG i Pages Router

Eksportér getStaticProps fra en side. Funktionen kører ved bygningen og leverer 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 bygningen. Brug generateStaticParams til 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 pr. forespørgsel

Sider renderees ved hver forespørgsel. Brug dette, når indholdet afhænger af brugeren eller ændrer sig for ofte til caching.

SSR i Pages Router

Eksportér 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 rendering pr. forespørgsel med dynamic = 'force-dynamic' eller ved at læse cookies/headers, hvilket automatisk fravælger statisk rendering.

// 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 bedste fra begge verdener

ISR: lever en statisk side, men regenerér den i baggrunden hvert N. sekund. Du får SSG's hastighed kombineret med forholdsvis aktuelle data.

ISR i Pages Router

Tilføj revalidate til getStaticProps.

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

ISR i App Router

Brug next: { revalidate: N } i fetch-indstillingerne, eller angiv 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} />;
}

On-demand-regenerering

Udløs regenerering manuelt, f.eks. fra en CMS-webhook, uden at 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 });
}

Vælg den rigtige strategi

Brug SSG, når data sjældent ændrer sig (marketing, dokumentation, blog). Brug ISR, når data opdateres lejlighedsvist (CMS-drevne websites, e-handelslister). Brug SSR til indhold pr. bruger (dashboards, kontosider).

Hurtigt tjek

Hvad gør ISR (trinvis statisk regenerering), som ren SSG ikke gør?

Besvar den i den interaktive lektion

Opsummering: SSG, SSR, ISR

SSG: ved bygningen, hurtigst, fast indhold. SSR: pr. forespørgsel, dynamisk, langsommere. ISR: SSG + planlagt regenerering i baggrunden — forholdsvis aktuelt og hurtigt. Pages Router bruger getStaticProps/getServerSideProps. App Router bruger asynkrone Server Components med fetch revalidate eller en revalidate-konstant på siden. Brug revalidatePath/Tag til on-demand-opdateringer.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 41
Lektioner: 163

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “SSG, SSR og ISR” gratis?

Ja — hele teksten til “SSG, SSR og ISR” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “SSG, SSR og ISR”?

Generér sider statisk ved build-tid, render dem på serveren pr. forespørgsel, eller genvalidér cachede sider efter en tidsplan med Incremental Static Regeneration. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Frontend Academy?

Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “SSG, SSR og ISR”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Frontend Academy-lektion?

Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til Frontend Academy