Nuxt.js Route Rules for Client-Side Rendering and Pre-Rendering in TypeWords

TypeWords configures its Nuxt.js route rules in nuxt.config.ts to use ssr: false for client-side rendering on /words, /articles, and /setting, while applying prerender: true to generate static pages for /book/nce1 through /book/nce4.

The TypeWords typing practice application—a Nuxt 3 open-source project—demonstrates how to strategically mix client-side rendering (CSR) and static pre-rendering within a single application. Understanding these Nuxt.js route rules helps developers optimize for both interactivity and SEO performance.

How TypeWords Uses routeRules in nuxt.config.ts

TypeWords defines its rendering strategy through the routeRules option in nuxt.config.ts at lines 65-73. This centralized configuration allows the application to apply different rendering modes without modifying individual page components.

The routeRules object maps URL patterns to rendering directives that Nuxt processes at build time and runtime.

Client-Side Rendering Routes

Three routes in TypeWords disable server-side rendering entirely. The server delivers only a minimal HTML shell containing the Vue application bootstrap code, and all content rendering happens in the browser.

Route	Rule	Purpose
/words	{ ssr: false }	Main typing practice interface
/articles	{ ssr: false }	Article reading mode
/setting	{ ssr: false }	User preferences panel

These pages prioritize interactivity over SEO. The /words route, for example, contains real-time typing feedback and dynamic word highlighting—features that benefit from immediate client-side execution without waiting for server round-trips.

// nuxt.config.ts – CSR configuration excerpt
export default defineNuxtConfig({
  // ...
  routeRules: {
    '/words':    { ssr: false },
    '/articles': { ssr: false },
    '/setting':  { ssr: false },
  },
  // ...
})

Pre-Rendered Static Routes

Four book content routes generate full static HTML at build time. Nuxt crawls these routes during npm run build and creates standalone HTML files in .output/public.

Route	Rule	Content
/book/nce1	{ prerender: true }	New Concept English Book 1
/book/nce2	{ prerender: true }	New Concept English Book 2
/book/nce3	{ prerender: true }	New Concept English Book 3
/book/nce4	{ prerender: true }	New Concept English Book 4

Pre-rendering delivers SEO-optimized pages that load instantly from CDN while maintaining Vue hydration for subsequent interactivity. The static files can be indexed by search engines without executing JavaScript.

// nuxt.config.ts – prerender configuration excerpt
export default defineNuxtConfig({
  // ...
  routeRules: {
    '/book/nce1': { prerender: true },
    '/book/nce2': { prerender: true },
    '/book/nce3': { prerender: true },
    '/book/nce4': { prerender: true },
  },
  // ...
})

Implementing Page-Level Rendering Overrides

TypeWords also demonstrates per-page rendering control through definePageMeta. This approach works for routes not covered by global routeRules or when you need to override the default behavior.

<!-- pages/custom-page.vue -->
<script setup lang="ts">
definePageMeta({
  ssr: false   // Forces client-side rendering for this page only
})
</script>

<template>
  <div>This page renders entirely in the browser</div>
</template>

Per-page metadata takes precedence when Nuxt processes the route tree, though global routeRules remain the recommended approach for maintaining configuration consistency across the TypeWords application.

Verifying Rendering Behavior

To confirm the Nuxt.js route rules are applied correctly in TypeWords, inspect the build output and response content:

# Generate production build

npm run build

# Verify prerendered pages exist as static files

ls .output/public/book/nce1/index.html

# Expected: .output/public/book/nce1/index.html

# Check CSR page source (contains only Nuxt shell)

curl -s https://localhost:3000/words | grep -o '<div id="__nuxt">.*</div>'

# Expected: <div id="__nuxt"></div> with no rendered content

Key behavioral differences:

• CSR pages (/words, /articles, /setting): Initial HTML contains no application content; JavaScript must execute to render the interface
• Pre-rendered pages (/book/nce1-4): Initial HTML contains complete static content visible before JavaScript loads

Related Configuration Files

File	Role in Rendering Strategy
nuxt.config.ts	Primary routeRules definition (lines 65-73)
app/router.options.ts	Custom scroll behavior and navigation guards
package.json	Nuxt 3 dependency version management

The app/router.options.ts file in TypeWords handles client-side navigation concerns separately from rendering rules, such as scroll restoration between typing exercises. This separation keeps routeRules focused exclusively on the server/build rendering pipeline.

Summary

• TypeWords uses routeRules in nuxt.config.ts to assign ssr: false to interactive typing pages and prerender: true to educational book content
• Client-side rendering suits highly dynamic interfaces where SEO is secondary to responsiveness
• Pre-rendering generates SEO-friendly static HTML for content that benefits from search indexing and fast initial loads
• Per-page overrides via definePageMeta provide escape hatches for exceptional cases
• Build output verification confirms rules execute as intended through static file presence and HTML source inspection

Frequently Asked Questions

What is the difference between ssr: false and prerender: true in Nuxt 3?

ssr: false disables server-side rendering for a route—the server sends only a JavaScript application shell, and the browser performs all rendering. prerender: true generates a complete static HTML file at build time that includes pre-rendered content, making it immediately visible to users and search engines while still allowing Vue hydration for interactivity. TypeWords uses ssr: false for interactive tools and prerender: true for educational book pages that need SEO visibility.

Can I combine ssr: false and prerender: true on the same route?

No—these directives are mutually exclusive in Nuxt 3. A route cannot simultaneously disable server-side rendering and generate pre-rendered static HTML, since pre-rendering inherently requires server-side processing to produce the static files. TypeWords assigns each route exclusively to one strategy based on whether interactivity or SEO is prioritized.

Where does Nuxt 3 store pre-rendered pages after build?

Nuxt 3 writes pre-rendered static files to .output/public/ following the route path structure. TypeWords pre-rendered book pages appear at .output/public/book/nce1/index.html through .output/public/book/nce4/index.html, ready for deployment to static hosting or CDN without requiring a running Node.js server.

How do I override global routeRules for a specific page in TypeWords?

Use the definePageMeta macro with an ssr or prerender property inside the page component's <script setup> block. This per-page metadata overrides the global routeRules configuration defined in nuxt.config.ts for that specific route only, though TypeWords maintains consistency by defining most rules globally.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}