1 of 15

Edge-rendering with Nuxt

Daniel Roe

daniel@roe.dev

@danielcroe

2 of 15

Hello 👋

  • Real applications (agency & SaaS background)
  • Nuxt framework team
  • Maintainer� @nuxtjs/vercel-builder � @nuxtjs/composition-api

@danielcroe

3 of 15

multi-target

  • Node.js server
  • legacy browser
  • modern browser

Why Nuxt?

progressive framework

  • zero-effort start
  • best practices built-in
  • full configuration
  • easily extensible

​

@danielcroe

4 of 15

What’s changing in 2021?

  • serverless architecture
  • JAMstack innovations
  • new targets (‘worker’, Deno)
  • ES modules & TypeScript
  • data, not HTML

@danielcroe

5 of 15

What hasn’t changed

importance of fully rendered HTML

​

  • great user experience
  • dynamism + speed
  • search engine

@danielcroe

6 of 15

Introducing Nitro

the next-generation rendering engine that powers Nuxt 3

​

​

@danielcroe

7 of 15

  • ‘second-stage’ build� �
  • layered approach� �
  • cross-platform

​

​

Introducing Nitro

@danielcroe

8 of 15

🔥 Built for cold-start performance

  • server bundle splitting and async chunk loading
  • API federation
  • isomorphic access to server with $fetch
  • traced dependency tree using @vercel/nft
  • expensive operations are pre-run (ETag, mime-types)

@danielcroe

9 of 15

🔥 Built for cold-start performance

  • server bundle splitting and async chunk loading
  • API federation
  • isomorphic access to server with $fetch
  • traced dependency tree using @vercel/nft
  • expensive operations are pre-run (ETag, mime-types)

@danielcroe

10 of 15

Cross-environment by design

  • auto-mocking of Node.js dependencies
  • ultra-lightweight polyfills for node built-ins
  • platform auto-detection
  • allows us to push rendering to the edge
    • browser service workers - one worker for multiple tabs
    • e.g. Cloudflare Workers - 0ms cold start

@danielcroe

11 of 15

  • fully static pages
  • payload-only dynamic API
  • edge-rendered pages
  • … enabling advanced caching

Hybrid + adaptive approach

@danielcroe

12 of 15

Using Nitro now

experimental availability

​

@danielcroe

13 of 15

Using Nitro with Nuxt 2

experimental availability

​

  • rapid development (expect breakage)
  • @nuxt/kit for module authors (coming soon)

@danielcroe

14 of 15

Using Nitro with Nuxt 2

experimental availability

​

@danielcroe

15 of 15

Any questions … ?

@danielcroe