Rendering Modes in Vue.js

Rendering Modes is the eleventh chapter of the free Vue.js tutorial. It explains how Vue turns state into pixels, and how the same app can render in the browser, on a server or at build time, and how Nuxt puts it all together.

What each lesson covers:

  • How Vue Renders: The virtual DOM, patching, compiler hints, the update cycle and batching, what triggers a re-render, :key for a fresh component, and client-side rendering.
  • Server and Static Rendering: renderToString, hydration and mismatches, lazy hydration, a fresh app per request, onServerPrefetch and state transfer, static site generation, Vite SSR entry files, head tags, streaming SSR, and hybrid rendering with SWR, ISR and edge.
  • Nuxt: Full-Stack Vue: Nuxt 4 folders and auto-imports, file-based routing, layouts, useFetch and useAsyncData, server API routes, middleware, useState, SEO, runtime config, modules and deployment.

Every box runs real Vue 3 in your browser. Pick TypeScript or JavaScript in the top bar, and every box switches. Each lesson ends with exercises that check what your app does, not how your code is written.

Lessons in this section

  1. How Vue Renders

    What rendering means, the virtual DOM and patching, compiler hints such as static hoisting and patch flags, how an app starts and mounts, the update cycle and batching, what makes a component render again, using a key to force a fresh component, and client-side rendering with its benefits, limits and SEO.

    • Explain the virtual DOM, render functions and patching
    • Read the compiler's hints in compiled template code
    • Predict when a component renders again and when updates are batched
    • Describe client-side rendering, its strengths and its limits
  2. Server and Static Rendering

    Server-side rendering with renderToString(), the request cycle, a fresh app per request and cross-request state pollution, hydration with createSSRApp(), mismatches and data-allow-mismatch, lazy hydration, onServerPrefetch and state transfer, browser-only code, static site generation, Vite SSR entry files, head tags with useSSRContext, streaming SSR, hybrid rendering with route rules, SWR, ISR and edge, and a mode comparison.

    • Render a Vue app to HTML with renderToString() and hydrate it with createSSRApp()
    • Avoid cross-request pollution and hydration mismatches
    • Load server data with onServerPrefetch() and transfer state to the browser
    • Wire a Vite SSR project, add head tags and stream HTML
  3. Nuxt: Full-Stack Vue

    What Nuxt adds to Vue, creating a Nuxt 4 project and its folders, auto-imports, file-based routing, layouts, useFetch and useAsyncData with keys and payload, server API routes with Nitro, route middleware, useState, SEO with useSeoMeta, runtime config, modules, rendering modes and deployment.

    • Explain what Nuxt adds to Vue and create a Nuxt 4 project
    • Use file-based routing, layouts and route middleware
    • Load data with useFetch and useAsyncData, and write server API routes
    • Add SEO tags, runtime config and modules, then build and deploy