Next.js 15 fullstack (App Router + Server Actions) · Lektion

Avancerade cachningsstrategier

Implementera avancerade cachningsstrategier, inklusive HTTP-cachningsheaders och CDN-integration, för maximal hastighet.

Lektion 3 av 412 steg

Avancerade cachningsstrategier är en gratis lektion i Next.js 15 fullstack (App Router + Server Actions) på CoddyKit. Detta är lektion 3 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Next.js 15 fullstack (App Router + Server Actions), och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Next.js 15 fullstack (App Router + Server Actions) innehåller totalt 4 lektioner.

Bortom grundläggande Next.js-cachning

Ni har lärt er om Next.js inbyggda cachning för datahämtning. Men webbprestanda omfattar mer än så! Avancerade cachningsstrategier utnyttjar hela webbinfrastrukturen, inklusive webbläsare och proxyservrar.

I den här lektionen går vi igenom HTTP-cachningsheaders och Content Delivery Networks (CDN:er) för att ge applikationen högre hastighet och effektivitet.

Styr webbläsarens och proxyns cache

HTTP-cachningsheaders är instruktioner som skickas från servern till klientens webbläsare eller till mellanliggande proxyservrar. Dessa headers anger hur länge och under vilka villkor de får lagra (cacha) ett svar.

Minskad fördröjning: Innehåll läses in snabbare från den lokala cachen.
Mindre bandbredd: Mindre data överförs via nätverket.
Minskad serverbelastning: Servern behöver inte generera samma svar om och om igen.

`max-age`, `public`, `private`

Headern Cache-Control är den mest kraftfulla HTTP-cachningsdirektivet. Den anger hur, var och hur länge ett svar får cachas.

max-age=<seconds>: Hur länge en resurs får cachas av webbläsaren (delade cachar följer också detta).
s-maxage=<seconds>: Åsidosätter max-age för delade cachar (CDN:er och proxyservrar).
public: Alla cachar (webbläsare och proxyservrar) får lagra svaret.
private: Endast klientens webbläsare får cacha svaret (inte delade cachar).

`no-cache`, `no-store` och fler

Andra viktiga Cache-Control-direktiv hjälper till att styra specifika cachningsbeteenden:

no-cache: Tvingar fram validering med ursprungsservern innan en cachad kopia skickas, även om den inte har gått ut.
no-store: Förbjuder all cachning av svaret; det måste hämtas från servern varje gång.
must-revalidate: Kräver omvalidering för utgångna cachar; inaktuellt innehåll får inte skickas.

Använd dessa med omsorg för att balansera aktualitet och prestanda.

Implementera cacheheaders

Ni kan ange HTTP-headers i Next.js Server Components eller API-rutter med funktionen headers() från next/headers eller direkt på objektet Response.

Det här exemplet anger en Cache-Control-header för en sida med en Server Component.

import { headers } from 'next/headers';

export default function ProductsPage() {
  // Set Cache-Control header for this page's response
  headers().set('Cache-Control', 'public, max-age=3600, s-maxage=86400');

  return (
    <main>
      <h1>Our Products</h1>
      <p>This content is highly cacheable!</p>
    </main>
  );
}

Effektiv omvalidering med ETag

Även med cachning kan innehåll ibland ändras. Med headererna ETag (Entity Tag) och Last-Modified kan webbläsare fråga servern: ”Har det här innehållet ändrats sedan jag hämtade det senast?”

ETag: En unik identifierare för en specifik version av en resurs.
Last-Modified: Datumet och tiden då resursen senast ändrades.

Om innehållet inte har ändrats svarar servern med statusen 304 Not Modified, vilket sparar bandbredd.

Content Delivery Networks (CDN:er)

Ett Content Delivery Network (CDN) är ett geografiskt distribuerat nätverk av proxyservrar och datacenter. Målet är att ge hög tillgänglighet och prestanda genom att distribuera tjänsten geografiskt i förhållande till slutanvändarna.

Tänk på det som att kopior av webbplatsens statiska resurser (bilder, CSS och JS) och även dynamiskt innehåll (om det har konfigurerats) lagras närmare era användare över hela världen.

CDN:er förbättrar Next.js-prestandan

Att integrera ett CDN med Next.js ger betydande fördelar:

Global räckvidd: Innehåll levereras från den närmaste servern, vilket minskar fördröjningen för användare över hela världen.
Minskad belastning på ursprungsservern: CDN:et hanterar de flesta förfrågningarna, vilket avlastar huvudservern.
Förbättrad tillförlitlighet: Trafiken fördelas, vilket gör appen mer motståndskraftig mot trafiktoppar.
Förbättrad säkerhet: Många CDN erbjuder DDoS-skydd och andra säkerhetsfunktioner.

Next.js `assetPrefix`

För statiska tillgångar (till exempel bilder i katalogen public) optimerar Next.js dem automatiskt. Om du uttryckligen vill ange att Next.js ska leverera dessa tillgångar från ett CDN kan du konfigurera assetPrefix i next.config.js.

Detta lägger till en URL framför alla statiska tillgångar, så att de hämtas från ditt CDN.

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  assetPrefix: 'https://cdn.example.com',
  // ... other Next.js configs
};

module.exports = nextConfig;

Vercel och Edge-cachning

När du distribuerar Next.js till Vercel får du automatiskt tillgång till deras globala Edge Network, som fungerar som ett inbyggt CDN.

Vercel cachar intelligent dina statiska tillgångar och svar från Server Components på edge-platser och använder s-maxage för optimal prestanda utan att du behöver konfigurera ett CDN manuellt.

Denna "edge-cachning" är en kraftfull form av CDN-integrering som är inbyggd direkt i plattformen.

Utmaning med Cache-Control

Du bygger en Next.js-applikation. Du har en sida som visar offentlig produktinformation som sällan ändras, och du vill att webbläsare och CDN ska cacha den i en dag. Samtidigt vill du, om möjligt, säkerställa att delade cacheminnen (som CDN) validerar innehållet på nytt efter en timme, utan att tvinga webbläsaren att validera det på nytt under en hel dag.

Besvara frågan i den interaktiva lektionen

Sammanfattning av avancerad cachning

Bra jobbat! Du har lärt dig att använda avancerade cachningsstrategier i dina Next.js-applikationer.

Vi undersökte HTTP-huvuden med Cache-Control (max-age, s-maxage, public, private, no-cache, no-store).
Du såg hur dessa huvuden implementeras i Next.js Server Components.
Vi gick igenom CDN:ers roll och hur de förbättrar global innehållsleverans.
Slutligen diskuterade vi Vercels Edge Network som en kraftfull, inbyggd CDN-lösning.

Dessa tekniker är avgörande för att bygga högpresterande och skalbara webbapplikationer!

Gratis att börja

Lär dig TypeScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 22
Lektioner: 88

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Avancerade cachningsstrategier” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Next.js 15 fullstack (App Router + Server Actions), inklusive ”Avancerade cachningsstrategier”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Next.js 15 fullstack (App Router + Server Actions) innehåller totalt 4 lektioner.

Vad lär jag mig i ”Avancerade cachningsstrategier”?

Implementera avancerade cachningsstrategier, inklusive HTTP-cachningsheaders och CDN-integration, för maximal hastighet. Ni övar på Next.js 15 fullstack (App Router + Server Actions) med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Next.js 15 fullstack (App Router + Server Actions)?

Du behöver inga förkunskaper. Utbildningen i Next.js 15 fullstack (App Router + Server Actions) på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”Avancerade cachningsstrategier”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Next.js 15 fullstack (App Router + Server Actions)-lektionen?

Ja. Varje Next.js 15 fullstack (App Router + Server Actions)-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Optimering av bilder och teckensnitt
Analys av paketstorlek
Avancerade cachningsstrategier
Strömmande gränssnitt med Suspense och laddningstillstånd

← Tillbaka till Next.js 15 fullstack (App Router + Server Actions)