Learn Vue - Server-side Rendering & Nuxt

#Introduction

The SPA built in previous episodes renders pages in the browser. The consequence: the browser has to download the bundle first, so the first page doesn't contain content immediately. SSR answers this by rendering the HTML on the server.

Episode 21 covers server-side rendering with Nuxt.js: SSR basics, hybrid rendering and static generation, Nuxt's characteristic data fetching model with middleware, and guidance on when to choose SSR over an SPA.

#SSR Basics with Nuxt

#What Happens in SSR

In SSR, the server runs Vue, renders the page into HTML, and sends the finished HTML to the browser. Content shows immediately, and JavaScript hydrates for interactivity. The result: a faster first page and better SEO.

#Starting a Nuxt Project

npx nuxi@latest init my-nuxt-app
cd my-nuxt-app
npm install

npx nuxi@latest init creates a Nuxt project with the pages/, components/, and app.vue structure. Run it with:

npm run dev

npm run dev starts the server with SSR and hot reload. Nuxt uses the folder structure for automatic routing, unlike manual vue-router.

#Hybrid Rendering and Static Generation

#Route Rules

Nuxt can mix rendering per route through routeRules:

export default defineNuxtConfig({
  routeRules: {
    "/": { prerender: true },
    "/blog/**": { swr: true },
    "/api/**": { isr: true },
  },
});

prerender: true makes the home page static HTML at build time, while swr and isr serve cached versions refreshed behind the scenes. A single application can use several strategies at once.

#Static Generation

nuxt generate produces the entire site as static files:

npm run generate

npm run generate renders every page at build time and writes the results into the dist folder. The output can be hosted on any CDN, including the platforms from episode 20.

#Data Fetching in Nuxt

#useFetch in a Page

Nuxt provides useFetch, which combines fetching and state:

<script setup lang="ts">
const { data: produk, pending } = await useFetch("/api/produk");
</script>
 
<template>
  <div v-if="pending">Memuat...</div>
  <ul>
    <li v-for="item in produk" :key="item.id">{{ item.nama }}</li>
  </ul>
</template>

useFetch("/api/produk") runs on the server during SSR, sending the data together with the HTML. The browser doesn't need an extra request for the first page.

#Middleware for Protection

Nuxt middleware runs before a page is rendered:

export default defineNuxtRouteMiddleware((to) => {
  if (!isLogin()) {
    return navigateTo("/login");
  }
});

defineNuxtRouteMiddleware((to) => ...) checks authentication before rendering. A file named auth.ts in the middleware folder is applied by adding a middleware property on the page.

#SSR vs SPA: When to Choose

• Choose SSR if content must be indexed for SEO or shared on social media.
• Choose an SPA for internal applications and dashboards that need intensive interaction.
• Choose static generation for blogs and sites whose content rarely changes.
• Choose hybrid for mixed needs: static public pages, dynamic user pages.

#Summary

Episode 21 opened the world of SSR and Nuxt: the reasoning behind server-side rendering, hybrid rendering with routeRules and static generation, data fetching with useFetch and middleware, and guidance for choosing between SSR, SPA, and static sites.

Key takeaways:

• SSR sends finished HTML, speeding up the first page.
• Nuxt uses the folder structure for automatic routing.
• routeRules mixes prerender, SWR, and ISR.
• nuxt generate produces a static site.
• useFetch runs on the server for initial data.
• Middleware protects pages before rendering.

In the next episode 22, we'll cover observability and monitoring — monitoring frontend performance, tracking errors with Sentry, real user monitoring and analytics, plus production support and incident handling.