The state of universal rendering with Vue.js

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
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