A presentation at Vue Conf US in in Austin, TX, USA by Debbie O'Brien
Static is the new Dynamic
Why Nuxt? Debbie O’Brien Frontend Tech Lead @Patterson Agency Nuxt Team Member Contributor @webpack Writer @Ultimate Courses Teacher @Vue School Debbie O’Brien @debs_obrien
debs_obrien
Debbie O’Brien Why Nuxt?
Why Nuxt debs_obrien
debs_obrien
debs_obrien
debs_obrien
Nuxt Benefits Automatic code splitting for pages Resource Hints and Http2 support Smart prefetching - prefetch links in the view port Modern build - target evergreen browsers debs_obrien
Why Static? debs_obrien
debs_obrien
Why Static? No server: cheaper, safer Better offline support Better performance Reduces Carbon footprint debs_obrien
Climate Change and the Tech Community debs_obrien
debs_obrien
debs_obrien
What has this got to do with us? debs_obrien
debs_obrien
debs_obrien
But Static is very Static Or is it? debs_obrien
debs_obrien
debs_obrien
debs_obrien
Is static really static? debs_obrien
API’s Forms CMS Auth e-commerce debs_obrien
Headless CMS Contentful CraftCMS Storyblok Sanity Wordpress debs_obrien
Headless CMS debs_obrien
Netlify CMS photo of cms debs_obrien
Netlify CMS photo of cms debs_obrien
Netlify CMS debs_obrien
index.html <!DOCTYPE html> <html> <head> <meta charset=”utf-8” /> <meta name=”viewport” content=”width=device-width, initial-scale=1.0” /> <title>Content Manager</title> <script src=”https://identity.netlify.com/v1/netlify-identity-widget.js”></script> </head> <body> <!— Include the script that builds the page and powers Netlify CMS —> <script src=”https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js”></script> </body> </html> debs_obrien
config.yml collections: - name: ‘blog’ label: ‘Blog’ format: ‘json’ folder: ‘assets/content/blog’ create: true slug: ‘{{slug}}’ fields: - { label: ‘Title’, name: ‘title’, widget: ‘string’ } - { label: ‘Publish Date’, name: ‘date’, widget: ‘datetime’ } - { label: ‘Body’, name: ‘body’, widget: ‘markdown’ } debs_obrien
blog debs_obrien
index.vue debs_obrien
_blog.vue debs_obrien
Nuxt Dynamic Routes generate: { routes() { return fs.readdirSync(‘./assets/content/blog’) .map((file) => { return { route: /blog/${path.parse(file).name}, payload: require(./assets/content/blog/${file}),
debs_obrien
Nuxt Crawler generate: { routes() { return fs.readdirSync(‘./assets/content/blog’) .map((file) => { return { route: /blog/${path.parse(file).name}, payload: require(./assets/content/blog/${file}),
debs_obrien
Nuxt Crawler <div v-for=”post in blogPosts”> <nuxt-link :to=“/blog/${post.slug}“> {{ post.title }} </nuxt-link> </div>
debs_obrien
Nuxt Crawler debs_obrien
Not just for blogs debs_obrien
Data debs_obrien
debs_obrien
Hasura show web of hasura debs_obrien
Add a new table show hasura table debs_obrien
Browse, Modify, Delete show hasura table debs_obrien
GraphQL Endpoint show the endpoint debs_obrien
GraphQL Playground debs_obrien
Call the GraphQL API modules: [ ‘@nuxtjs/apollo’, ], debs_obrien
Apollo import { HttpLink } from … import { InMemoryCache } from … const GRAPHCMS_API = ‘https://yourEndpoint’ export default () => ({ link: new HttpLink({ uri: GRAPHCMS_API }), … }) debs_obrien
Add our Query import gql from ‘graphql-tag’ export const workshops = gql` query workshops { workshops(order_by: { date: desc }) { title topic date … debs_obrien
Apollo apollo: { $loadingKey: ‘loading’, workshops: { query: workshops, }, }, debs_obrien
Network Tab - Call API debs_obrien
Generate on Update debs_obrien
Create your trigger debs_obrien
Netlify Build Hooks Generate on Update debs_obrien
Add the URL to Hasura debs_obrien
Netlify Deploys image of deploy debs_obrien
Nuxt Hydration Static Site becomes dynamic debs_obrien
debs_obrien
debs_obrien
debs_obrien
Nuxt Static Module Call the API on page change Call the payload on page change debs_obrien
Call the payload debs_obrien
Nuxt Static Module Instead of Apollo smart queries use AsyncData until target static is released debs_obrien
Async Data async asyncData({ app, route, error }) { try { const client = app.apolloProvider.defaultClient const response = await client.query({ query: conferencesQuery, }) return { conferences: response.data.conferences, … debs_obrien
Nuxt Static Module You don’t have to expose your API to the public Decide when to publish new content from your API by re-generating your website Fully static is much faster API calls have latency - always takes longer Payload files are cached and offline support with PWA module debs_obrien
Convert to a static site mode: ‘universal’, nuxt generate debs_obrien
target Static nuxt dev // start dev server (process.static) nuxt build // bundle the vue app in .nuxt/dist/ nuxt export // create dist/ and pre-render routes debs_obrien
SPA inside a Static site generate: { fallback: true, exclude: [/booking/] } debs_obrien
Why Static Sites debs_obrien
Why Static? No server: cheaper, safer Better offline support Better performance Reduces Carbon footprint debs_obrien
Think Static debs_obrien
debs_obrien
Thank you Debbie O’Brien Frontend Tech Lead Consultant Open Source Contributor https://github.com/debs-obrien/nuxt-boilerplate-project debs_obrien
Static sites have many benefits from costs to performance and even reducing the carbon footprint. And with the new static module from Nuxt static is going to a whole new level. Static sites are the future and they can used for more than just blogs.
The following resources were mentioned during the presentation or are useful additional information.
A little playgound to get you started with Nuxt
Here’s what was said about this presentation on Twitter.
