Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The state of universal rendering with Vue.js

The state of universal rendering with Vue.js

Martina Kraus

March 29, 2017
Tweet

More Decks by Martina Kraus

Other Decks in Technology

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