Vue // Nuxt // Gridsome The three flavors of Vue.js 

Emre Karaca @HiEmreKaraca - Frontend Engineer @ Easybell - Studied Sociology and Political Science 

@HiEmreKaraca #Vue.js // Berlin /30 Goals of the Talk ๏ Expand/Refresh knowledge about how Vue.js works in the browser ๏ Understand the differences between ๏ Traditional Server-Side-Rendering (SSR) ๏ Client-Side-Rendering (CSR) ๏ Modern Server-Side-Rendering (SSR) / Pre-Rendering ๏ Understand the key differences between Vue.js/Nuxt/Gridsome ๏ Spoiler: It’s about how they render ๏ Enable individuals/teams to make informed decisions within the Vue.js- stack !3 

@HiEmreKaraca #Vue.js // Berlin /30 SSR => CSR => ? ๏ With Angular, React, Vue we have largely moved from traditional monolith Server-Side-Rendering to SPAs with Client-Side-Rendering ๏ For WebApps with dynamic data and higher UX-requirements ๏ Devs and teams are now comfortable using Vue and others !4 ๏ But what about static sites like marketing pages? ๏ Should we still build them with Wordpress, Drupal, Typo3? ๏ Or should we make use of our skills in Vue etc.? ๏ We should use Vue!! (But we can’t use CSR !) 

@HiEmreKaraca #Vue.js // Berlin /30 Towards a unified stack ๏ Teams already skilled in building SPAs with modern frameworks should reuse the stack for other projects ๏ Great developer-experience and efficiency ๏ Reuse of central tooling or component libraries ๏ More flexible teams, because everyone can work on everything !5 (But we still can’t use CSR !) 

@HiEmreKaraca #Vue.js // Berlin /30 Why can’t we use CSR ! ๏ Out of the box, React / Vue / etc only use CSR ๏ But CSR is a problem when it comes to SEO ๏ If you need SEO, you shouldn’t use „Vanilla“-Vue, because it sends „empty" HTML-files to the client ๏ Nuxt and Gridsome tackle exactly this problem ๏ They change what that first HTML-file that is served looks like ๏ Note: They also do a lot of other things, but that’s probably not why you would choose one of them !6 

@HiEmreKaraca #Vue.js // Berlin /30 The Virtual DOM (V-DOM) ๏ Vue and others use the V-DOM-technique to render efficiently ๏ V-DOM: A JS-Object-representation of the actual DOM ๏ Many individual changes are applied to the V-DOM first ๏ The changed V-DOM is then diffed and the required changes to the actual DOM are determined ๏ All changes are applied in one batch, reducing the amount of expensive DOM-rerenders !7 ๏ V-DOM: A JS-Object-representation of the actual DOM 

@HiEmreKaraca #Vue.js // Berlin /30 Nuxt & Gridsome !8 ๏ Higher-level frameworks on top of Vue.js ๏ Everything they do can be done manually with Vue.js ๏ But if they already do exactly what you need, use them instead ๏ Essentially very opinionated and extended versions of Vue.js ๏ They take care of a lot of boilerplate ๏ But they also create constraints 

@HiEmreKaraca #Vue.js // Berlin /30 Nuxt - About !9 

@HiEmreKaraca #Vue.js // Berlin /30 Nuxt - About ๏ Created by Alexandre Chopin (@alexchopin) & Sebastien Chopin (@atinux) & developed further by a great core team ๏ Releases: ๏ v0.x: 26 Oct. 2016 ๏ v1: 8 Jan 2018 ๏ v2: 21 Sep 2018 ๏ v3: ??? !10 

@HiEmreKaraca #Vue.js // Berlin /30 Nuxt - Key aspects ๏ 3 Rendering Modes: ๏ Server Side Rendered (SSR) ๏ Statically Generated (Generate) ๏ Single Page App (SPA) ๏ SSR & Generate render HTML for all pages in their initial state ๏ SSR renders on request // Generate renders statically at build time ๏ Once all JS is fully loaded in browser, website turns into SPA ๏ => The V-DOM takes over !11 

@HiEmreKaraca #Vue.js // Berlin /30 Gridsome - About !12 

@HiEmreKaraca #Vue.js // Berlin /30 Gridsome - About ๏ Created by Hans-Jørgen Vedvik (@hjvedvik) & Tommy Vedvik (@tommyvevdik) ๏ Releases: ๏ v0.1: 10. Oct 2018 ๏ … ๏ v0.6: 10 May 2019 !13 

@HiEmreKaraca #Vue.js // Berlin /30 Gridsome - Key Aspects ๏ Prerenders all HTML at build time ๏ Uses GraphQL-data-layer to combine different sources for initial data ๏ Caches all initial-data-requests - no api needed when served! ๏ Once all JS is fully loaded in browser, website turns into SPA ๏ => The V-DOM takes over !14 

@HiEmreKaraca #Vue.js // Berlin /30 Routes in Vue ๏ Routes need to be registered manually in router.js ๏ Dynamic route is registered like any other route !15 

@HiEmreKaraca #Vue.js // Berlin /30 Routes in Nuxt ๏ Components in /pages are automatically registered as route ๏ Page-Components for dynamic routes are named with a leading _ ๏ In SSR-Mode dynamic routes are resolved on request ๏ In Generate-Mode dynamic routes have to be defined ahead of time !16 or 

@HiEmreKaraca #Vue.js // Berlin /30 Routes in Gridsome ๏ Components in /pages are automatically registered as route ๏ Gridsome requires you to define all dynamic routes programmatically ๏ Dynamic-Page-components are stored separately in /templates !17 

@HiEmreKaraca #Vue.js // Berlin /30 Let’s compare! Vue // Nuxt // Gridsome !18 

@HiEmreKaraca #Vue.js // Berlin /30 It’s all about rendering that first HTML-file !19 

@HiEmreKaraca #Vue.js // Berlin /30 Example-App: 3 Views File Route Path Content index.vue / Static Static blog.vue /blog Static Dynamic blogpost.vue /:blogpostId Dynamic Dynamic 1 2 3 !20 

@HiEmreKaraca #Vue.js // Berlin /30 4 Rendering Modes Framework Type Command Output Vue SPA vue-cli-service build Static files Nuxt SSR SSR nuxt build nuxt start Node server Nuxt Generate Statically Generated nuxt generate Static Files Gridsome Statically Generated & Cached gridsome build Static Files 1 2 3 4 !21 

@HiEmreKaraca #Vue.js // Berlin /30 / (index) - Vue-SFC !22 

@HiEmreKaraca #Vue.js // Berlin /30 / (index) - Output !23 After JS is processed 1 2 3 

@HiEmreKaraca #Vue.js // Berlin /30 /blog - Vue-SFC !24 1st: Executed on server/at build time After: Executed on client Always: Executed on client Always: Executed at build time 

@HiEmreKaraca #Vue.js // Berlin /30 /blog - Output !25 1 2 3 

@HiEmreKaraca #Vue.js // Berlin /30 /post1 - Vue-SFC !26 

@HiEmreKaraca #Vue.js // Berlin /30 /post1 - Output !27 1 2 3 

@HiEmreKaraca #Vue.js // Berlin /30 1st route vs. 2nd route !28 1st: Request to external API 2nd: Request to external API 1st: Embedded in prerendered HTML 2nd: Request to external API 1st: Embedded in prerendered HTML 2nd: Cached Response in JSON! 

@HiEmreKaraca #Vue.js // Berlin /30 Conclusion !29 ๏ Reuse your Vue.js-Stack for SEO-critical projects! ๏ Nuxt is very mature, moving fast and close to Vue.js ๏ Gridsome is still new, try it in side projects or very simple websites ๏ If SEO is critical, probably go with Nuxt ๏ If you can live with the Generate-build-step, use it ๏ If live-updates are important, go with SSR ๏ You can also reuse the SSR-server as a api-proxy or even implement a full express-instance! 

@HiEmreKaraca #Vue.js // Berlin /30 Thanks! !30 You can find me on Twitter
 @HiEmreKaraca Come work with me at Easybell! https://bit.ly/easybell-frontend