💖
@aleksejdix
<div id="app"></div>
nuxt.js
Sébastien & Alexandre
Chopin
Why SSR
@aleksejdix
- BETTER FOR SEO
- FASTER WEBSITES
- BETTER UX
- CAN BE COMPLICATED
- DIFFICULT TO ADD AFTERWARDS
- MORE CODE FOR THE CLIENT
CONS:
PROS:
REQUEST
RESPONSE
SERVER
CLIENT
SSR?
1. HTTP
REQUEST
HTTP
RESPONSE
SERVER
API
AJAX
REQ
AJAX
RES
REQ
RES
initial
rendered
@aleksejdix
- public
- SEO is needed
- internal
- behind auth
no
yes
WHEN TO SSR?
@aleksejdix
- NO `window` OBJECT
- NO Browser API's
- NO Reactive Data
- Some libraries won't work
- Vue directives need SSR fallback
LIMITS:
-
EVERY Request creates fresh Vue.js instance
- Axios, node-fetch or Apollo client are required for data fetching
!!! WARNING !!!
npx create-nuxt-app <project-name>create an app
yarn create nuxt-app <project-name><template>
<h1>
Hello, Zurich!
</h1>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>pages/index.vue
import Vue from 'vue'
import Router from 'vue-router'
const _94b0fd58 = () => import('../pages/index.vue')
Vue.use(Router)
export function createRouter() {
return new Router({
mode: 'history',
routes: [{
path: "/",
component: _94b0fd58,
name: "index"
}]
})
}automatic router
Hello, Zurich!<body data-n-head="">
<div data-server-rendered="true" id="__nuxt">
<h1>Hello, Zurich!</h1>
</div>
</body>client/browser
<script>
export default {
data() {
return {
speakers: []
}
},
async mounted() {
const speakers = await axios.$get('/speakers')
this.speakers = speakers
}
}
</script>
async?
view page source
<div id="app"></div>🤔
export default {
asyncData(context) {}
fetch(context) {}
nuxtServerInit(store, context) {}
}
no `this`, but `context`
NEW HOOKS
🤩
context
- query
- params
- res
- req
- redirect
- route
export default {
async asyncData() {
const speakers = await axios
.$get('/speakers')
return {
speakers
}
}
}
asyncData
<script>
window.__NUXT__=(function(a){
return {
layout: "default",
data: [{
speakers: [{
id:"cjnirn6wim84h0932hrvvrc82",
name: "Martin"
}]
}],
error: null,
serverRendered:true
}
}(400));
</script>__NUXT__
view page source
<div id="app">
<h1>Martin</h1>
</div>🤩
SSR works!
<template>
<form @submit.prevent="askServer">
<input type="search" v-model="search"/>
<button>search<button>
</form>
</template>goodbye GET
?search=GETPARAMS
💀⚰️
URL is your friend
REQUEST
RESPONSE
SERVER
domain.com/speakers?sort=DESC
will resolve your REST API request and send sorted data back to the client
make your
URL PARAMETER reactive
export default {
data() {
return {
page: ''
}
},
watch: {
'$route.query.page'(page) {
this.page = page
this.submit()
}
}
}watch
vuex
redux
apollo
URL
VS
Dynamic Pages
domain.com/speaker/{id}
async asyncData(context) {
const { speaker } = await context
.$axios
.$get(context.route.params.id)
return { speaker }
}VUE META
export default {
head () {
return {
title: 'Aleksej Dix - webzueri.ch',
meta: [
{
hid: 'description',
name: 'description',
content: 'Front-end Developer and webzurich organizer'
}
]
}
}
}THANKS!