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
