SSR vs CSR mental model in Vue - Practice Questions

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding SSR and CSR rendering timing

In Vue with SSR and CSR, when does the initial HTML content become visible to the user?

A SSR sends fully rendered HTML from the server immediately; CSR renders HTML only after JavaScript loads in the browser.

B CSR sends fully rendered HTML from the server immediately; SSR renders HTML only after JavaScript loads in the browser.

C Both SSR and CSR send empty HTML and rely on JavaScript to render content after loading.

D SSR and CSR both send fully rendered HTML from the server immediately.

💡 Hint

Think about which process happens on the server and which happens on the client.

SSR (Server-Side Rendering) generates the full HTML on the server and sends it to the browser, so users see content immediately. CSR (Client-Side Rendering) sends minimal HTML and relies on JavaScript running in the browser to build the page, causing a delay before content appears.

❓ component_behavior

intermediate

Vue component hydration in SSR

After Vue SSR sends HTML to the browser, what does hydration do?

A Hydration disables JavaScript to improve performance.

B Hydration reloads the entire page to fetch fresh data from the server.

C Hydration attaches Vue's event listeners and makes the static HTML interactive without re-rendering the entire page.

D Hydration removes the server-rendered HTML and replaces it with a blank page.

💡 Hint

Hydration connects static HTML with Vue's dynamic features.

Hydration is the process where Vue takes the server-rendered HTML and attaches event listeners and reactive behavior so the page becomes interactive without rebuilding the whole DOM.

❓ state_output

advanced

State availability in SSR vs CSR

Consider a Vue app that fetches user data asynchronously. Which statement best describes when the user data is available in SSR vs CSR?

A Both SSR and CSR include user data in the HTML before sending.

B In CSR, user data is fetched and included in the HTML before sending; in SSR, data is fetched after the page loads in the browser.

C Both SSR and CSR fetch user data only after the page loads in the browser.

D In SSR, user data is fetched and included in the HTML before sending; in CSR, data is fetched after the page loads in the browser.

💡 Hint

Think about where the data fetching happens in SSR vs CSR.

SSR fetches data on the server and includes it in the HTML sent to the client, so the page is ready with data immediately. CSR fetches data only after the JavaScript runs in the browser, causing a delay before data appears.

📝 Syntax

advanced

Detecting SSR-only code in Vue

Which Vue code snippet correctly runs only during SSR and not in the browser?

Vue

export default {
  setup() {
    if (typeof window === 'undefined') {
      console.log('Running on server')
    }
  }
}

A if (typeof window !== 'undefined') { console.log('Running on server') }

B if (typeof window === 'undefined') { console.log('Running on server') }

C if (window === null) { console.log('Running on server') }

D if (window) { console.log('Running on server') }

💡 Hint

Check how to detect server environment in JavaScript.

On the server, the window object does not exist, so typeof window === 'undefined' is true only during SSR.

❓ lifecycle

expert

Vue lifecycle differences in SSR vs CSR

Which Vue lifecycle hook runs only on the client side and never during SSR?

A onMounted

B setup

C beforeCreate

D created

💡 Hint

Think about when the DOM is available.

onMounted runs after the component is mounted to the DOM, which only happens in the browser. SSR does not mount components to a DOM, so onMounted never runs during SSR.