The state of universal rendering with Vue.js

The state of universal rendering with Vue.js

E54070c941e73381a3473df8e2aab667?s=128

Martina Kraus

March 29, 2017
Tweet

Transcript

  1. Server-Side Rendering with Vue.js Martina Kraus 29.03.2017 @wing121 github.com/codekittey

  2. Who am I? { “name”: “Martina Kraus”, “working”: [“Software-Developer at

    Onwerk GmbH”, “lecturer at HS Mannheim (Web-technologies)”], “technologies”: [“javascript/ ecmascript6/ 7”,”node”, “docker”, “nosql-databases” ], “Others”: [“founder of RheinNeckarJS and Docker Mannheim Meetup”, “Member of Hackerstolz e.V”] } 2
  3. Agenda • Server-Side Rendering ◦ Problems with Client-Side Rendering •

    Vue.js • Simple SSR with Express Web Server • Do we need SSR? • (Nuxt.js) 3
  4. 4 <?php $my_array = array('Pets', 'Cars', 'dog', 'cat', 'ford', 'bmw',

    'red', '2px solid #000', 'grey' ); echo "<table style='color: $my_array[6]; border: $my_array[7]; background-color: $my_array[8]; '>\n"; echo "<tr><td>" . $my_array[0] . "</td><td>" . $my_array[1] . "</td></tr>\n"; $z = 2; for ($i=0; $i < 2; $i++) { echo "<tr><td>" . $my_array[$z] . "</td>"; echo "<td>" . $my_array[$z + 2] . "</td></tr>\n"; $z++; } echo "</table>\n"; ?>
  5. Better: Client-Side Rendering • Single Page Applications! • Slick transitions!

    • No page refresh! • JSON everywhere! 5
  6. “That’s fine, everyone has JavaScript enabled nowadays” BUT 6

  7. Problems with Client-Side Rendering • SEO ◦ Complex solutions •

    Bad internet connection (number and size of requests) ◦ Webpack’s code splitting • Delay between rendering initial HTML File an App (ng2 / react / vue) App re-rendering (Initial Load) 7
  8. Server-Side rendering • Server renders html-source code ◦ Browser download

    a page with HTML content already in place • Browser still does graphical rendering 8
  9. Vue.js • Started 2013 by Evan You • Current Version:

    2.1.10 -- MIT-license • Framework for building SPA (MVVM) • Avoided problems of other frameworks (like Angular and React) • Similar to React: ◦ Provide reactive and composable view components ◦ Utilize a virtual DOM 9
  10. Vue.js - Declarative Rendering • Every App has at least

    one main Instance 10 var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) <div id="app"> {{ message }} </div>
  11. Vue.js - Components • Similar to webcomponents in Angular (.vue-Files)

    11 Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }) <ol> <todo-item v-for="item in groceryList" v-bind:todo="item"> </todo-item> </ol>
  12. Vue.js - Syntax • Similar to AngularJS/ Angular ◦ <a

    v-on:click="doSomething"> ◦ <p v-if/ v-show="seen">Now you see me</p> ◦ Filters: {{ message | filterA | filterB }} ◦ <div v-bind:class="{ active: isActive }"></div> ◦ <my-component v-bind:class="{ active: isActive }"></my-component> <li v-for="item in items"> {{ item.message }} </li> 12
  13. Vue.js - Syntax • Similar to AngularJS/ Angular <input v-model="message"

    placeholder="edit me"> <p>Message is: {{ message }}</p> 13
  14. Vue.js - Requests • Vue-resources // in a Vue instance

    this.$http.get('/cats, [options]).then(successCallback, errorCallback); this.$http.post('/moreCats', [body], [options]).then(successCallback, errorCallback); 14
  15. So far so good for client-rendering 15

  16. Simple SSR in Vue 16 // Step 1: Create a

    Vue instance const Vue = require('vue'); const app = new Vue({ render: function (h) { return h('p', 'hello world'); }});
  17. Simple SSR in Vue 17 // Step 2: Create a

    renderer const renderer = require('vue-server-renderer').createRenderer(); // Step 3: Render the Vue instance to HTML renderer.renderToString(app, function (error, html) { if (error) throw error; console.log(html); // => <p server-rendered="true">hello world</p> })
  18. Simple SSR with the Express Web Server 18 new Vue({

    template: '<div>You have been here for {{ counter }} seconds.</div>', data: { counter: 0 }, created: function () { var vm = this setInterval(function () { vm.counter += 1 }, 1000) } })
  19. Simple SSR with the Express Web Server • Create Server-Side

    rendering: ◦ Add instance of our app to global context to mount it ◦ In node export a factory function to create a instance of the app 19
  20. Do we need SSR? • SEO ◦ With SPA your

    site won’t show up in search engines ◦ Google renders JavaScript but others don’t • Performance ◦ SSR improve performance ◦ SSR degrades performance ◦ http://andrewhfarmer.com/server-side-render/ 20
  21. Do we need SSR? • Complexity ◦ Increase the complexity

    of an app 21
  22. Use SSR if…. • SEO on Bing, Yahoo etc… •

    Performance reasons 22
  23. Don’t use SSR if…. • If Google is enough, it’s

    enough • If your vue/ react or ng2 app isn’t working right now: make it work first 23
  24. Alternatives to SSR • Client-side as usual • Prerendering ◦

    Feature in Chrome (since 2011) ◦ Hidden Page is created ◦ Now: Prerender SPA Plugins (for Webpack) 24
  25. Discussion “Don't use SSR just because it's sexy right now

    - it comes with a cost.” - http://andrewhfarmer.com/server-side-render 25
  26. 26

  27. 27 Martina Kraus @wing121

  28. Further Readings • https://github.com/chrisvfritz/prerender-spa-plugin • https://prerender.io/ • https://webpack.js.org/guides/code-splitting-require/ • http://openmymind.net/2012/5/30/Client-Side-vs-Server-Side-Rendering/

    • https://www.npmjs.com/package/vue-server-renderer • https://vuejs.org/ • https://github.com/acoshift/vuejs-ssr-example • https://www.npmjs.com/package/axios • https://github.com/pagekit/vue-resource/ 28