SSR vs CSR mental model in Vue

Introduction

SSR and CSR are two ways to show web pages. They decide where the page is made: on the server or in your browser.

When you want your page to load fast and be easy for search engines to find (use SSR).

When your app needs to update a lot without reloading the page (use CSR).

When you want to save server work and let the browser do more (use CSR).

When you want to show content quickly to users on slow connections (use SSR).

When you build interactive apps like games or chats (use CSR).

Syntax

Vue

SSR: Server sends full HTML page ready to show.
CSR: Server sends minimal HTML and JavaScript; browser builds page.

SSR means the server prepares the page before sending it.

CSR means the browser builds the page after receiving code.

Examples

This example shows a simple Vue component that can be rendered on the server (SSR) to send ready HTML.

Vue

<template>
  <h1>{{ message }}</h1>
</template>

<script setup>
const message = 'Hello from SSR!'
</script>

This example shows a Vue component that updates the message only after the browser runs the JavaScript (CSR).

Vue

<template>
  <h1>{{ message }}</h1>
</template>

<script setup>
import { ref, onMounted } from 'vue'
const message = ref('Loading...')

onMounted(() => {
  message.value = 'Hello from CSR!'
})
</script>

Sample Program

This Vue component starts with a message set during server rendering (SSR). When the page loads in the browser, it changes the message (CSR). You see the server message first, then it updates.

Vue

<template>
  <div>
    <h2>SSR vs CSR Demo</h2>
    <p>Message: {{ message }}</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const message = ref('Rendered on server')

onMounted(() => {
  message.value = 'Updated in browser'
})
</script>

Important Notes

SSR helps with faster first page load and better search engine visibility.

CSR allows more interactive and dynamic user experiences.

Many modern apps use a mix: server renders first, then client takes over.

Summary

SSR means the server builds the page before sending it.

CSR means the browser builds or updates the page after loading.

Choosing SSR or CSR depends on speed, SEO, and interactivity needs.