SSR With Nuxt

Nuxt is the recommended way to ship server-rendered or static Vue apps — routing, data fetching, and deployment plumbing all built in.

4 min read Level 3/5 #vue#nuxt#ssr

What you'll learn

Scaffold a new Nuxt app
Recognize file-based routing in pages/
Use useFetch with auto-imports

Vue can render on the server out of the box, but wiring routing, data fetching, hydration, and a build pipeline by hand is a lot. Nuxt is the official meta-framework that gives you all of it with conventions.

Scaffold

npx nuxi init my-app
cd my-app
npm install
npm run dev

File-Based Routing

Files under pages/ become routes. Nested folders become nested routes; [id].vue becomes a dynamic param.

pages/
  index.vue            # /
  about.vue            # /about
  users/
    index.vue          # /users
    [id].vue           # /users/:id

Auto-Imports

Common composables (ref, computed, useFetch, useRoute) are auto-imported. No more import { ref } from 'vue' at the top of every file.

useFetch

useFetch runs on the server during SSR, then is reused on the client. Same call, no duplicated requests.

<!-- pages/users/[id].vue -->
<script setup lang="ts">
const route = useRoute()
const { data: user, error } = await useFetch(`/api/users/${route.params.id}`)
</script>

<template>
  <p v-if="error">Failed.</p>
  <p v-else>Hello {{ user.name }}</p>
</template>

SSR vs SSG vs SPA

Nuxt covers all three modes from one config:

SSR (default): render on the server per request.
SSG: nuxi generate outputs static HTML for every route.
SPA: set ssr: false to skip server rendering entirely.

Modules

The Nuxt module ecosystem covers most production needs: @nuxt/image, @nuxtjs/tailwindcss, @pinia/nuxt, @nuxtjs/i18n. One line in nuxt.config.ts wires them up.

Performance Optimization →