Why SSR matters for Vue - See It in Action

Why SSR matters for Vue

📖 Scenario: You are building a simple Vue app that shows a welcome message and a list of products. You want to understand why Server-Side Rendering (SSR) is important for Vue apps, especially for faster loading and better search engine visibility.

🎯 Goal: Create a Vue 3 app that first sets up product data, then adds a configuration to toggle SSR mode, renders the product list using Vue's template syntax, and finally adds a message that changes based on whether SSR is enabled.

📋 What You'll Learn

Create a reactive product list with exact product names and prices

Add a boolean variable called isSSR to represent if SSR is enabled

Use a v-for loop with product as the iterator to display product names and prices

Add a conditional message that shows 'Rendered on Server' if isSSR is true, else 'Rendered on Client'

💡 Why This Matters

🌍 Real World

Many websites use Vue with SSR to load pages faster and help search engines find their content. This project shows the basics of how SSR affects what the user sees.

💼 Career

Understanding SSR is important for frontend developers working with Vue because it improves user experience and SEO, which are key for professional web apps.

1

DATA SETUP: Create the product list

Create a reactive variable called products using ref that holds an array of objects with these exact entries: { name: 'Laptop', price: 1200 }, { name: 'Phone', price: 800 }, and { name: 'Tablet', price: 450 }.

Vue

import { ref } from 'vue'

// Create products array with Laptop, Phone, Tablet
// Your code here



  

Hint

Use ref from Vue to create a reactive array named products with the exact objects.

2

CONFIGURATION: Add SSR mode toggle

Add a boolean reactive variable called isSSR using ref and set it to true to represent that SSR is enabled.

Vue

import { ref } from 'vue'

const products = ref([
  { name: 'Laptop', price: 1200 },
  { name: 'Phone', price: 800 },
  { name: 'Tablet', price: 450 }
])

// Add isSSR boolean variable set to true
// Your code here



  

Hint

Use ref(true) to create a reactive boolean called isSSR.

3

CORE LOGIC: Render product list with v-for

In the <template>, use a v-for directive with product as the iterator to loop over products. Display each product's name and price inside a <li> element.

Vue

import { ref } from 'vue'

const products = ref([
  { name: 'Laptop', price: 1200 },
  { name: 'Phone', price: 800 },
  { name: 'Tablet', price: 450 }
])

const isSSR = ref(true)



  
    
    
  

Hint

Use v-for="product in products" on the <li> and bind a unique :key using product.name.

4

COMPLETION: Add SSR conditional message

Below the product list, add a <p> element that uses v-if to show 'Rendered on Server' if isSSR is true, and v-else to show 'Rendered on Client' otherwise.

Vue

import { ref } from 'vue'

const products = ref([
  { name: 'Laptop', price: 1200 },
  { name: 'Phone', price: 800 },
  { name: 'Tablet', price: 450 }
])

const isSSR = ref(true)



  
    
      {{ product.name }} - ${{ product.price }}
    
  
  
  

Hint

Use v-if="isSSR" and v-else on two <p> elements to show the messages.