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

> Discover Nuxt.js route rules for client-side rendering and pre-rendering in TypeWords. Learn how to configure ssr: false and prerender: true for optimal performance.

- Repository: [Zyronon/TypeWords](https://github.com/zyronon/TypeWords)
- Tags: how-to-guide
- Published: 2026-09-03

---

**TypeWords configures its Nuxt.js route rules in [`nuxt.config.ts`](https://github.com/zyronon/TypeWords/blob/main/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.

```ts
// 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.

```ts
// 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.

```vue
<!-- 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:

```bash

# 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`](https://github.com/zyronon/TypeWords/blob/main/nuxt.config.ts) | Primary `routeRules` definition (lines 65-73) |
| [`app/router.options.ts`](https://github.com/zyronon/TypeWords/blob/main/app/router.options.ts) | Custom scroll behavior and navigation guards |
| [`package.json`](https://github.com/zyronon/TypeWords/blob/main/package.json) | Nuxt 3 dependency version management |

The [`app/router.options.ts`](https://github.com/zyronon/TypeWords/blob/main/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`](https://github.com/zyronon/TypeWords/blob/main/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`](https://github.com/zyronon/TypeWords/blob/main/.output/public/book/nce1/index.html) through [`.output/public/book/nce4/index.html`](https://github.com/zyronon/TypeWords/blob/main/.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`](https://github.com/zyronon/TypeWords/blob/main/nuxt.config.ts) for that specific route only, though TypeWords maintains consistency by defining most rules globally.