SSR kontra SSG kontra SPA-läge
ssr:true/false, Nitros prerendering, generate-kommandot och hybridrendering per route.
SSR kontra SSG kontra SPA-läge är en gratis lektion i Vue Academy på CoddyKit. Detta är lektion 4 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 Vue Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Vue Academy innehåller totalt 4 lektioner.
Översikt över renderingslägen
Nuxt kan rendera Er app på tre sätt: SSR (servern renderar varje förfrågan), SSG (sidor byggs i förväg vid byggtillfället) och SPA (allt renderas i webbläsaren). Ni kan även blanda dem per route.
SSR: standardläget
Med ssr: true (standardinställningen) renderar servern HTML för varje förfrågan och klienten hydratiserar det. Det ger en snabb första rendering och bra SEO eftersom sökrobotar ser fullständig markup.
// nuxt.config.ts
export default defineNuxtConfig({
ssr: true
})När SSR passar bäst
SSR passar för innehåll som ändras ofta eller är personligt anpassat – instrumentpaneler, flöden och e-handel med aktuella priser – när Ni vill ha färsk HTML vid varje förfrågan.
SPA-läge
Om Ni anger ssr: false blir Nuxt en single-page-app: servern skickar ett tomt skal och webbläsaren renderar allt. Den är enklare att hosta, men har sämre SEO och långsammare första rendering.
export default defineNuxtConfig({
ssr: false
})När SPA passar
SPA-läget passar interna verktyg och appar bakom inloggning, där SEO inte spelar någon roll och Ni vill distribuera som statiska filer till valfri CDN.
SSG: statisk webbplatsgenerering
När Ni kör nuxt generate förhandsrenderas varje sida till statisk HTML vid byggtillfället. Resultatet blir en mapp med filer som Ni kan hosta var som helst utan en Node-server.
npx nuxt generate
# outputs static HTML to .output/publicNär SSG passar
SSG är perfekt för innehåll som sällan ändras – bloggar, dokumentation och marknadsföringssajter. Sidorna är mycket snabba och billiga att leverera från en CDN.
Rendera per route med routeRules
Konfigurationen routeRules anger renderingsläge för varje sökvägsmönster. Detta är hybridrendering: olika delar av samma app använder olika strategier.
export default defineNuxtConfig({
routeRules: {
'/': { prerender: true },
'/admin/**': { ssr: false },
'/blog/**': { swr: 3600 }
}
})Vanliga alternativ för routeRules
prerender: true bygger sidan vid byggtillfället; ssr: false gör den till en SPA; swr: n cachar SSR-resultatet i n sekunder (stale-while-revalidate); redirect skickar användare vidare.
Inkrementell statisk regenerering
Alternativet isr förhandsrenderar sidan vid den första förfrågan och cachar resultatet, som sedan genereras om med jämna mellanrum. Det kombinerar SSG:s hastighet med SSR:s aktualitet för populära sidor.
routeRules: {
'/products/**': { isr: 600 }
}Välja strategi
Börja med SSR som standardval för bästa kombination av SEO och interaktivitet. Använd SSG för statiskt innehåll, SPA för privata appar och routeRules för att finjustera enskilda routes när prestandabehoven blir tydliga.
Snabbtest
Testa Era kunskaper om renderingslägen.
Sammanfattning
Ni har lärt Er om renderingslägen:
- SSR (standard) renderar vid varje förfrågan och ger bra SEO och snabb första rendering.
- ssr:false ger en SPA för privata appar.
- nuxt generate skapar en statisk SSG-webbplats.
- routeRules möjliggör hybridrendering: prerender, swr, isr och ssr:false per route.
Lär dig HTML 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
- 42
- Lektioner
- 156
Vanliga frågor
Är lektionen ”SSR kontra SSG kontra SPA-läge” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Vue Academy, inklusive ”SSR kontra SSG kontra SPA-läge”, 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 Vue Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”SSR kontra SSG kontra SPA-läge”?
ssr:true/false, Nitros prerendering, generate-kommandot och hybridrendering per route. Ni övar på Vue Academy 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 Vue Academy?
Du behöver inga förkunskaper. Utbildningen i Vue Academy 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 4 av 4.
Hur lång tid tar lektionen ”SSR kontra SSG kontra SPA-läge”?
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 Vue Academy-lektionen?
Ja. Varje Vue Academy-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
- Nuxt 3-projektets struktur och filbaserad routing
- Datahämtning: useFetch och useAsyncData
- Nuxt-serverroutes och API-endpoints
- SSR kontra SSG kontra SPA-läge