A presentation at ijs London by Debbie O'Brien
How to simplify web development and reduce JS FATIGUE?
Static sites === great performance
Debbie O’Brien Head of Learning and Developer Advocate at NuxtJS Writer @Ultimate Courses @Vue School WhyTeacher Nuxt? Organiser @MallorcaJS, Vue Spain Debbie O’Brien @debs_obrien
What I will cover How Static sites work Benefits of Static Sites Why you should use static sites Nuxt modules and tips to improve performance debs_obrien
Static sites of the 90’s debs_obrien
debs_obrien
Even today, with its basic HTML, pre-broadband file sizes, and Flash-free architecture, the site is easy to navigate, even on a mobile phone. The movie clips, encoded in QuickTime, are somewhat grainy but still viewable. Nothing was designed to still work after 19 years; it was simply designed to work. debs_obrien
debs_obrien
debs_obrien
debs_obrien
debs_obrien
debs_obrien
debs_obrien
debs_obrien
90’s static is very static Time for SSR debs_obrien
Server Side Rendering Sharing code between pages Getting data from a database Populate the page on the server Serve rendered HTML to the client Search Engine Optimisation debs_obrien
debs_obrien
But…. Call the server on every page Minor page flickers Need a server 💵 Not as performant Front and back code mixed together debs_obrien
SPA Share components across pages Frontend code separate Faster Navigation No page flickers (only 1 page) Client Side Rendering debs_obrien
debs_obrien
But…. Initial page load is quite slow Simple HTML page renders the page on client side after JavaScript loads Not great for SEO Not great for performance debs_obrien
Static Sites are back Free hosting (cheaper) Pre rendered page (faster) No server needed (safer) Excellent SEO Excellent Performance Greener (reduces carbon footprint) debs_obrien
Static Sites are back debs_obrien
Greener debs_obrien
SSR page debs_obrien
SSR site debs_obrien
debs_obrien
debs_obrien
Static site debs_obrien
Performance Matters debs_obrien
debs_obrien
debs_obrien
What about content? debs_obrien
Headless CMS Nuxt Content Strapi Prismic StoryBlok Sanity debs_obrien
Generate your site Nuxt Generate Build is cached Only generates the content Super fast debs_obrien
Nuxt Static sites debs_obrien
debs_obrien
debs_obrien
debs_obrien
debs_obrien
debs_obrien
Nuxt Modules debs_obrien
Service worker manifest.json SEO friendly meta data App icons debs_obrien
url generation size optimization progressive images Auto-detect optimized format debs_obrien
Sitemap Module Adds the static routes to each sitemap Support i18n routes debs_obrien
debs_obrien
Robots Module A Nuxt.js module thats inject a middleware to generate a robots.txt file debs_obrien
TailwindCSS Zero configuration to start PurgeCSS included for minimal CSS Use latest CSS features Reference your Tailwind config in your app debs_obrien
PurgeCSS Remove unneeded CSS with ease debs_obrien
Google Analytics Google Analytics integration for Nuxt.js debs_obrien
debs_obrien
Performance Tips debs_obrien
Analyse your Bundle yarn build —analyze debs_obrien
Analyse your Bundle debs_obrien
BundlePhobia debs_obrien
CSS Overview debs_obrien
Modern Mode yarn generate —modern debs_obrien
debs_obrien
It’s a wrap Static sites are here to stay Build your sites so they are here to stay too debs_obrien
debs_obrien
It’s a wrap Put Performance first Static sites === great performance debs_obrien
debs_obrien
debs_obrien
Thank you Debbie O’Brien Head of Learning Developer Advocate Teacher Open Source Contributor debs_obrien
Statically generated sites are the future. Seriously. With frameworks like Nuxt we can build really cool sites that look and feel like a single page application but are actually static generated. That means no need for a server but most importantly performance is amazing. Everything is generated at build time.
