Why SSR matters for Vue - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a basic Vue app instance.

Vue

const app = Vue.[1]({
  data() {
    return { message: 'Hello SSR!' };
  }
});

Drag options to blanks, or click blank then click option'

AcreateApp

BmountApp

CnewApp

DinitApp

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'mountApp' instead of 'createApp'

Trying to use 'newApp' which is not a Vue function

Vue apps are created using createApp. This sets up the app instance.

2fill in blank

medium

Complete the code to mount the Vue app to the DOM.

Vue

app.[1]('#app');

Drag options to blanks, or click blank then click option'

Aattach

Brender

Cstart

Dmount

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'render' which is for rendering components, not mounting

Using 'attach' which is not a Vue method

The mount method attaches the Vue app to a DOM element.

3fill in blank

hard

Fix the error in the server entry file to enable SSR rendering.

Vue

import App from './App.vue';

export function createApp() {
  const app = [1](App);
  return { app };
}

Drag options to blanks, or click blank then click option'

AcreateSSRApp

BstartSSR

CmountApp

DrenderToString

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'createApp' which is for client-side only

Using 'renderToString' as a function name here

For SSR, Vue provides createSSRApp to create the app instance suitable for server rendering.

4fill in blank

hard

Fill both blanks to complete the Vue SSR server setup.

Vue

import { [1] } from 'vue/server-renderer';
import { createSSRApp } from 'vue';

export async function render(url) {
  const app = createSSRApp({ /* root component */ });
  const html = await [2](app);
  return html;
}

Drag options to blanks, or click blank then click option'

ArenderToString

BrenderToStaticMarkup

CrenderToDom

DrenderApp

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'renderToDom' which is client-side only

Using different functions for import and call

renderToString from vue/server-renderer converts the app to HTML string for SSR.

5fill in blank

hard

Fill all three blanks to complete a Vue SSR hydration example.

Vue

import { [1] } from 'vue';
import App from './App.vue';

const app = [2](App);
app.[3]('#app');

Drag options to blanks, or click blank then click option'

AcreateSSRApp

BcreateApp

Cmount

Dhydrate

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'createApp' which is not optimized for hydration

Using 'mount' instead of 'hydrate' for SSR content

For hydration on client side, use createSSRApp and hydrate to attach Vue to server-rendered HTML.