💖

@aleksejdix

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

 Aleksej Dix

 Front End Developer

@aleksejdix

aleksej.dix@oddeven.ch

https://oddeven.ch

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' 
        }
      ]
    }
  }
}

DEMO!

THANKS!

 Aleksej Dix

 Front End Developer

@aleksejdix

aleksej.dix@oddeven.ch

https://oddeven.ch

Searchable JavaScript Apps which work without JavaScript

By oddEVEN

Searchable JavaScript Apps which work without JavaScript

  • 1,143

More from oddEVEN