Senior LevelVue JS
How does Nuxt 3 hybrid rendering (SSR, SSG, ISR, SWR) and Nitro server architecture work?
❓ Interview Prompt: Explain Nuxt 3 rendering modes, routeRules configuration, Nitro server engine, and universal data fetching with useAsyncData.
Nuxt 3 is the full-stack enterprise framework for Vue 3, powered by the high-performance Nitro server engine.
Hybrid Rendering ('routeRules'):
Instead of forcing an entire application to use SSR or SSG, Nuxt 3 allows configuring different rendering strategies per route:
•
SSR ('ssr: true'): On-demand server rendering on every HTTP request.
•
SSG ('prerender: true'): Pre-rendered to HTML at build time.
•
SWR ('swr: 3600'): Stale-While-Revalidate caching. Serves cached HTML instantly while background re-rendering every hour.
•
SPA ('ssr: false'): Pure client-side rendering for admin dashboards.
Universal Data Fetching:
'useFetch(url)' executes on the server during SSR, serializes the JSON result into the HTML payload ('__NUXT_DATA__'), and transfers it to the client hydration step without duplicate network requests!
Code Implementation Example
typescript
// nuxt.config.ts — Hybrid Rendering Configuration via Nitro
export default defineNuxtConfig({
routeRules: {
'/': { prerender: true }, // SSG: Static Homepage
'/blog/**': { swr: 3600 }, // SWR: Cache blog articles for 1 hour
'/admin/**': { ssr: false }, // SPA: Client-side render admin
}
});💡Nuxt 3 hybrid rendering route rules configuration.
🎯 Interview Key Takeaway
Nuxt 3 routeRules enable hybrid rendering per route (SSR, SSG, SWR, SPA). useFetch transfers server-fetched payloads to prevent client waterfalls.
#Nuxt 3#SSR#Nitro#Senior
Back to all Vue JS Questions→