Vue 2.6

SSR Revolution

Server-Side Rendering

What is

again?

Generate HTML

on the server

Server

App

Render

<div>
  Hello world!
</div>

Server Side Rendering Stories

Server-Side Only App

Story 1

Server

App

Render

<html>
<ul>
  <li>James Holden</li>
  <li>Naomi Nagata</li>
</ul>
</html>

Database

Read

Browser

Request page

Send HTML

<html>
<a>Roccinante crew</a>
</html>
<html>
<ul>
  <li>James Holden</li>
  <li>Naomi Nagata</li>
</ul>
</html>

Replace the whole page

Course

Timeline

Request page

Receiving page

Received page

Click button

Request page

Database Read

Receiving page

Received page

Examples

Single Page App

Story 2

Server

API

Database

Read

Browser

Request page

Send JSON

<html>
<div id="app">
<a>Roccinante crew</a>
</div>
</html>
<html>
<div id="app">
<ul>
  <li>James Holden</li>
  <li>Naomi Nagata</li>
</ul>
</div>
</html>

Course

CDN

HTML

JS

Request API

Request script

<html>
<div id="app"></div>
</html>




<html>
<div id="app">
<div class="loading"/>
</div>
</html>

App

Timeline

Request page

Received JS

Click button

Change route
Request API

Database Read

Received JSON

Received page

Request JS

Examples

Universal App

Story 3

Server

API

Database

Read

Browser

Request page

Send JSON

<html>
<div id="app">
<a>Roccinante crew</a>
</div>
</html>
<html>
<div id="app">
<ul>
  <li>James Holden</li>
  <li>Naomi Nagata</li>
</ul>
</div>
</html>

Course

CDN

JS

Request API

Request script

<html>
<div id="app">
<div class="loading"/>
</div>
</html>

Hydration

Server

App

JS

App

Timeline

Request page

Received JS

Click button

Change route
Request API

Database Read

Received JSON

Receiving page

Received page

Request JS

Server

API

Database

Read

Browser

Request page

Send JSON

<html>
<div id="app">
<ul>
  <li>James Holden</li>
  <li>Naomi Nagata</li>
</ul>
</div>
</html>

Course

CDN

JS

Request API

Request script

Server

App

Hydration

JS

App

Timeline

Request page

Received page

Request JS

Received JS

Database Read

Receiving page

Examples

Data Prefetching

The tricky problem of

before Vue 2.6

Data prefetching

API

App

Browser

CrewList.vue

router

state

renderer

CrewList.vue instance

<html>
<div id="app">
<ul>
  <li>James Holden</li>
  <li>Naomi Nagata</li>
</ul>
</div>
</html>
{
  crew: [
    {
      firstname: 'James',
      lastname: 'Holden'
    },
    {
      firstname: 'Naomi',
      lastname: 'Nagata'
    }
  ]
}

Request page

Push route

Match component

definition

Call

Receive data

Save data

Inject state

to context

Passed to

Create

Use

Server Side

Data Prefetching

Client side

App

state

$mount('#app')

Restore state

Mount to the DOM

API

App

Browser

CrewList.vue

router

state

renderer

CrewList.vue instance

<html>
<div id="app">
<ul>
  <li>James Holden</li>
  <li>Naomi Nagata</li>
</ul>
</div>
</html>
{
  crew: [
    {
      firstname: 'James',
      lastname: 'Holden'
    },
    {
      firstname: 'Naomi',
      lastname: 'Nagata'
    }
  ]
}

Request page

Push route

Match component

definition

Call

Receive data

Save data

Inject state

to context

Passed to

Create

Use

Limitations

Data Prefetching

Only route components

No access to `this` (no instance)

after Vue 2.6

Data prefetching

New features

  • `severPrefetch` component option
  • `rendered` hook on renderer context

API

App

Browser

router

state

renderer

CrewList.vue instance

<html>
<div id="app">
<ul>
  <li>James Holden</li>
  <li>Naomi Nagata</li>
</ul>
</div>
</html>
{
  crew: [
    {
      firstname: 'James',
      lastname: 'Holden'
    },
    {
      firstname: 'Naomi',
      lastname: 'Nagata'
    }
  ]
}

Request page

Push route

Call

Receive data

Inject state to context

Passed to

Create

Save data

Server Side

Data

Prefetching

+ Rendering

Combined

context.rendered hook

Data prefetching while rendering

create component instance
prefetch data
render component
continue with children

Benefits

  • Prefetch in any component
  • Access the real component instance with `this`

Client side

App

state

$mount('#app')

Restore state

Mount to the DOM

Try it now!

Try it... soon?

Silver sponsor

Bronze sponsor

Guillaume Chau

@Akryum

github.com/Akryum

Thank you!

Vue 2.6 SSR revolution

By Guillaume Chau

Vue 2.6 SSR revolution

Part 1: What is SSR again? -- Part 2: New 2.6 features that change everything for data prefetching

  • 3,621
Loading comments...

More from Guillaume Chau