SSR vs CSR mental model in Vue - Hands-On Comparison

Understanding SSR vs CSR Mental Model in Vue

📖 Scenario: You are building a simple Vue app that shows a greeting message. You want to understand how the message is rendered differently when using Server-Side Rendering (SSR) versus Client-Side Rendering (CSR).

🎯 Goal: Build a Vue component that displays a greeting message. Then add a configuration variable to switch between SSR and CSR modes. Finally, implement the logic that changes the message based on the rendering mode and complete the component setup.

📋 What You'll Learn

Create a Vue component with a greeting message data

Add a configuration variable called isSSR to indicate rendering mode

Use a computed property to change the message based on isSSR

Complete the template to display the computed greeting message

💡 Why This Matters

🌍 Real World

Understanding SSR vs CSR helps developers decide how to render web pages for better performance and SEO.

💼 Career

Many modern web jobs require knowledge of SSR and CSR concepts to build fast and user-friendly applications.

1

Create the initial data setup

Create a Vue component with a data function that returns an object containing a greeting string set to "Hello from Vue!".

Vue

export default {
  data() {
    // Your code here
  }
}

Hint

Remember, the data function returns an object with your reactive data.

2

Add a configuration variable for rendering mode

Inside the same Vue component, add a data property called isSSR and set it to false to represent Client-Side Rendering mode.

Vue

export default {
  data() {
    return {
      greeting: "Hello from Vue!",
      // Your code here
    };
  }
}

Hint

Add isSSR inside the returned object in data.

3

Add computed property for SSR vs CSR message

Add a computed property called displayMessage that returns "Rendered on Server" if isSSR is true, otherwise returns the greeting string.

Vue

export default {
  data() {
    return {
      greeting: "Hello from Vue!",
      isSSR: false
    };
  },
  // Your code here
}

Hint

Use a computed property to check isSSR and return the correct message.

4

Complete the template to show the message

Add a template section that displays the displayMessage computed property inside a <div> element.

Vue

  



export default {
  data() {
    return {
      greeting: "Hello from Vue!",
      isSSR: false
    };
  },
  computed: {
    displayMessage() {
      return this.isSSR ? "Rendered on Server" : this.greeting;
    }
  }
}

Hint

Use mustache syntax {{ }} inside a <div> to show the computed message.