Production Ready Vue Apps With Nuxt.js
- 1. Production-Ready Vue Websites Using Nuxt.js
- 2. 25 years old Frontend Team Leader @Monolith Hi, I’m SNIR SHECHTER Nice to meet you Digital Strategy | Specification | Design | Backend | Frontend High-end 360° web solutions development company • Develops mainly with Vue.js / Nuxt.js • Crafting web solutions for international enterprises, start-ups and big brands • Located in Poleg, Netanya We’re Hiring , Join Us > Monolith.co.il/Careers
- 4. The problem with SPAs The problem • Empty source files, no meta tags – Googlebot can’t scan • Google doesn’t promise to execute our JS • Google will most likely not fetch our async content • Poor Performance = Bad SEO Ranking • Limited sitemap / robots.txt SPAs Are Not SEO Friendly Poor performance (Relatively) Download files (without proper code-splitting, it downloads the full App) Send AJAX requests to the server Re-render Steps to render a normal SPA: Build DOM & Render
- 5. Universal (isomorphic) Web Applications The Solution Isomorphic?! An app able to run on two or more platforms/environments.
- 6. SPAs Universal Apps Architecture The Solution SEO Friendly Fast Time-To-Content Preserving SPA Capabilities The Benefits Universal JavaScript Application Architecture Front end Server API Server Browser 1 First Request Goes To Node Server 2 Server Loads Necessary Data From API Server Returns Full HTML Page3 Browser Renders Page, Then JavaScript Hydrates Single Page Application 4 Subsequent Pages Load Data Directly From API, Render On Client 5
- 7. Let’s Build A Universal App In Vue
- 8. A Universal Vue App The solution Minimal Setup Steps/Modules + Lines Of Code + Lines Of Code Per Page + Extra From the official Vue SSR docs - https://ssr.vuejs.org Basic Server Rendering + different entries 36 - A server, 3 files Routing + Middleware (route guards) 21 9 2 files, duplication per mw Component prefetch, Vuex data injection 29 8 Duplication per call (each) Meta tags 30 3 - Everything is a factory – preventing data leaks 15 - - 2 Webpack configs, hot-reload, error handling 52+12+72 - - Total 267 12 A server, 5 files, 3 repeating duplications (!)
- 9. Ready To Go Vue SSR
- 10. Nuxt.js Production ready Vue Apps “Nuxt.js’ main scope is UI rendering while abstracting away the client/server distribution” nuxtjs.org A higher-level framework for building Universal Vue.js apps easily Simplifies development of real-world Vue websites, focusing on SSR Built by Vue core team members Inspired by Next.js – a similar framework for React
- 11. Meet Sébastien Chopin Production ready Vue Apps
- 12. Nuxt.js Features Ready To Go Vue SSR! Easy SSR • Modes: Universal | Generate (pre-render) | SPA • Auto-generated universal routing. • Unified route guards (middleware). • Easy data fetch and hydration. • Easy integration with other NodeJS backends. Easier Development • Batteries included: Vuex, Vue Router, Vue Meta, Axios, Polyfills, Vue Server Renderer. • Highly modular and extendable using modules/plugins. • Many official plug n’ play modules. • Auto-generated Vuex & Vue Router config based on file structure. • Auto code splitting (pre-configured for next-page pre-fetch). • Code optimization – built-in browser detection, code-slimming techniques, dedicated config. SEO Friendly • Crawlable. • Built-in meta tag management (with dynamic data). • Sitemap easily auto-generated (using an official module). • robots.txt already handled (using an official module). • First page loads super fast. More Cool Stuff • Page load indicator. • No more bloated App.js files. • AJAX progress bar. • Page Transitions. • Easy error handling. • Explicit folder structure. • Layouts configured out-of-the-box. • Easy configuration in a single file. And that’s just for starters!
- 13. Let’s Code! So
- 14. Summary In conclusion If you need SSR capabilities – USE NUXT! SPAs are not SEO-friendly The only solution is building a universal app Universal development is cumbersome in Vue (and SPAs in general) Nuxt.js is a production-ready Vue app: • Makes our lives easier deploying SSR Websites • Simplifies development cuts off time and complexity
- 15. We’re Hiring , Join Us > THANK YOU We’re Hiring , Join Us > Monolith.co.il/Careers