Static sites === great performance

Why Nuxt? Debbie O’Brien Frontend Tech Lead @Patterson Agency @Nuxt Team Member Contributor @webpack Writer @Ultimate Courses Teacher @Vue School Organiser @MallorcaJS, Vue Spain Debbie O’Brien @debs_obrien

Debbie O’Brien Why Nuxt?

Get rid of the LAMP, Get rid of the MEAN, Let the JAM take over

What I will Cover The new frontend Static v’s Dynamic Case Study Performance Tips Useful Links

What has changed Everything is pre-rendered at build time No Execution at request time Functionality client-side

It’s all about the api’s Search Functionalities Payments Authentication and so much more…

What we gain Improves security Improves performance Better developer experience Easy deployment

Definition of Static Lacking in movement, action, or change, especially in an undesirable or uninteresting way

TaeKwonDo Static Dynamic

TaeKwonDo

Static is the new Dynamic Static site > cdn > user No Server needed

TaeKwonDo and Static Sites

Push and deploy Increase confidence Staging same as production Deploy anywhere, anytime Web hooks on content change

That’s a lot of Generation with Static Sites

Going Nuxt Nuxt is not just a static site generator Nuxt is a progressive Vue.js Framework

Benefits of Nuxt “file-based” routing Automatic Code splitting of routes Prefetching more than 50 modules

SSR, SPA or Static SSR: mode: ‘universal’, SPA: mode: ‘spa’, Static Site: nuxt generate

Case Study patterson.travel

Patterson Travel 5 Layouts 32 page components 38 components 8 plugins 9 modules 21 pages of docs

Booking Engine

Booking Engine === SPA SPA inside a Static Site

SPA Fallback generate: { fallback: true, exclude: [/booking/] }

How it works Site is pre rendered Hydration Kicks in content up to date - API calls on navigation

API call on navigation

I just want full static What if I don’t want to call the api every time i navigate to a page?

Full Static One api call on build Call the payload on navigation instead of the api

static module

payload.json

Calling the payload

Static Sites === Great Performance

Accessibility Semantic HTML Labels for forms Aria tags Alt tags

Chrome dev tools for Accessibility Color Contrasts

Auto optimise your images <img src=“https://res.cloudinary.com/idemo/image/ q_auto,f_auto/cloudinary”/> upload/

Lazy Load your images

PWA modules: [‘@nuxtjs/pwa’] Add the icon.png to the static folder

CSS Stats

modern mode nuxt build —modern

Code split from the start components: { () => import(‘@/ components/the-footer’) TheFooter: }

Lazy load your translations lazy: true

Tailwind + PurgeCSS modules: [‘@nuxtjs/tailwindcss’] purgeCSS: { mode: ‘postcss’, whitelistPatterns: [/datepicker/] }

webpack analyzer

webpack analyzer

JAMstack - Do we need it? Hell yeah!

Thank you Debbie O’Brien Frontend Tech Lead Consultant Open Source Contributor https://github.com/debs-obrien/nuxt-boilerplate-project debs_obrien

Useful Links Nuxt Boilerplate Awesome Nuxt TailwindCSS PurgeCSS CSS Stats Cloudinary Lighthouse Audit @debs_obrien