What is Server-Side Rendering in Vue? | Vue.js Interview Questions

What You'll Learn

What is SSR
SSR benefits
Nuxt.js overview

What is SSR?

Server-Side Rendering renders Vue components on the server and sends HTML to the client.

Benefits

Benefit	Description
SEO	Search engines can crawl content
Performance	Faster first contentful paint
Social sharing	Meta tags available immediately

Basic SSR Flow

code.jsJavaScript

1. Request → Server renders Vue app → HTML
2. Browser receives HTML → Shows content
3. Vue hydrates → App becomes interactive

Nuxt.js (Vue SSR Framework)

$ terminalBash

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

Nuxt Page Example

code.txtVUE

<!-- pages/index.vue -->
<script setup>
const { data } = await useFetch('/api/posts')
</script>

<template>
  <div v-for="post in data" :key="post.id">
    {{ post.title }}
  </div>
</template>

Data Fetching

code.jsJavaScript

// Server-side
const { data } = await useFetch('/api/data')

// Client-side only
const { data } = await useFetch('/api/data', {
  server: false
})