1---
2name: rendering-modes
3description: Universal rendering, client-side rendering, and hybrid rendering in Nuxt
4---
5 
6# Rendering Modes
7 
8Nuxt supports multiple rendering modes: universal (SSR), client-side (CSR), and hybrid rendering.
9 
10## Universal Rendering (Default)
11 
12Server renders HTML, then hydrates on client:
13 
14```ts
15// nuxt.config.ts - this is the default
16export default defineNuxtConfig({
17  ssr: true,
18})
19```
20 
21**Benefits:**
22- Fast initial page load (HTML is ready)
23- SEO-friendly (content is in HTML)
24- Works without JavaScript initially
25 
26**How it works:**
271. Server executes Vue code, generates HTML
282. Browser displays HTML immediately
293. JavaScript loads and hydrates the page
304. Page becomes fully interactive
31 
32## Client-Side Rendering
33 
34Render entirely in the browser:
35 
36```ts
37// nuxt.config.ts
38export default defineNuxtConfig({
39  ssr: false,
40})
41```
42 
43**Benefits:**
44- Simpler development (no SSR constraints)
45- Cheaper hosting (static files only)
46- Works offline
47 
48**Use cases:**
49- Admin dashboards
50- SaaS applications
51- Apps behind authentication
52 
53### SPA Loading Template
54 
55Provide loading UI while app hydrates:
56 
57```html
58<!-- app/spa-loading-template.html -->
59<div class="loading">
60  <div class="spinner"></div>
61  <p>Loading...</p>
62</div>
63 
64<style>
65.loading {
66  display: flex;
67  flex-direction: column;
68  align-items: center;
69  justify-content: center;
70  height: 100vh;
71}
72.spinner {
73  width: 40px;
74  height: 40px;
75  border: 4px solid #f3f3f3;
76  border-top: 4px solid #00dc82;
77  border-radius: 50%;
78  animation: spin 1s linear infinite;
79}
80@keyframes spin {
81  to { transform: rotate(360deg); }
82}
83</style>
84```
85 
86## Hybrid Rendering
87 
88Mix rendering modes per route using route rules:
89 
90```ts
91// nuxt.config.ts
92export default defineNuxtConfig({
93  routeRules: {
94    // Static pages - prerendered at build
95    '/': { prerender: true },
96    '/about': { prerender: true },
97 
98    // ISR - regenerate in background
99    '/blog/**': { isr: 3600 }, // Cache for 1 hour
100    '/products/**': { swr: true }, // Stale-while-revalidate
101 
102    // Client-only rendering
103    '/admin/**': { ssr: false },
104    '/dashboard/**': { ssr: false },
105 
106    // Server-rendered (default)
107    '/api/**': { cors: true },
108  },
109})
110```
111 
112### Route Rules Reference
113 
114| Rule | Description |
115|------|-------------|
116| `prerender: true` | Pre-render at build time |
117| `ssr: false` | Client-side only |
118| `swr: number \| true` | Stale-while-revalidate caching |
119| `isr: number \| true` | Incremental static regeneration |
120| `cache: { maxAge: number }` | Cache with TTL |
121| `redirect: string` | Redirect to another path |
122| `cors: true` | Add CORS headers |
123| `headers: object` | Custom response headers |
124 
125### Inline Route Rules
126 
127Define per-page:
128 
129```vue
130<script setup lang="ts">
131defineRouteRules({
132  prerender: true,
133})
134</script>
135```
136 
137## Prerendering
138 
139Generate static HTML at build time:
140 
141```ts
142// nuxt.config.ts
143export default defineNuxtConfig({
144  // Prerender specific routes
145  routeRules: {
146    '/': { prerender: true },
147    '/about': { prerender: true },
148    '/posts/*': { prerender: true },
149  },
150})
151```
152 
153Or use `nuxt generate`:
154 
155```bash
156nuxt generate
157```
158 
159### Programmatic Prerendering
160 
161```ts
162// nuxt.config.ts
163export default defineNuxtConfig({
164  hooks: {
165    'prerender:routes'({ routes }) {
166      // Add dynamic routes
167      const posts = await fetchPostSlugs()
168      for (const slug of posts) {
169        routes.add(`/posts/${slug}`)
170      }
171    },
172  },
173})
174```
175 
176Or in pages:
177 
178```ts
179// server/api/posts.ts or a plugin
180prerenderRoutes(['/posts/1', '/posts/2', '/posts/3'])
181```
182 
183## Edge-Side Rendering
184 
185Render at CDN edge servers:
186 
187```ts
188// nuxt.config.ts
189export default defineNuxtConfig({
190  nitro: {
191    preset: 'cloudflare-pages', // or 'vercel-edge', 'netlify-edge'
192  },
193})
194```
195 
196Supported platforms:
197- Cloudflare Pages/Workers
198- Vercel Edge Functions
199- Netlify Edge Functions
200 
201## Conditional Rendering
202 
203Use `import.meta.server` and `import.meta.client`:
204 
205```vue
206<script setup>
207if (import.meta.server) {
208  // Server-only code
209  console.log('Running on server')
210}
211 
212if (import.meta.client) {
213  // Client-only code
214  console.log('Running in browser')
215}
216</script>
217```
218 
219For components:
220 
221```vue
222<template>
223  <ClientOnly>
224    <BrowserOnlyComponent />
225    <template #fallback>
226      <p>Loading...</p>
227    </template>
228  </ClientOnly>
229</template>
230```
231 
232<!-- 
233Source references:
234- https://nuxt.com/docs/guide/concepts/rendering
235- https://nuxt.com/docs/getting-started/prerendering
236- https://nuxt.com/docs/api/nuxt-config#routerules
237-->
238