Daniel Roe

Building for the Edge - Crafting a Next-Gen Framework

What if your internal API calls had zero network latency? Learn how modern frameworks optimize server communication by bypassing the network entirely.

Building for the Edge - Crafting a Next-Gen Framework
#1about 4 minutes

Rethinking frameworks with Nuxt, Nitro, and UnJS

The rebuild of Nuxt 3 led to the creation of open-source, universal JavaScript tools like the Nitro server engine.

#2about 3 minutes

Creating a new project with the Nitro server engine

Initialize a new project, install Nitro, and create basic API routes with auto-imports and built-in TypeScript support for type-safe fetching.

#3about 4 minutes

Adding server-side rendering with View and Rollup

Configure Nitro to process Vue files using a Rollup plugin and use the storage API to inject server-rendered HTML into a template.

#4about 3 minutes

Implementing server-side routing with View Router

Set up file-based routing on the server using View Router and a generic handler to render any page in the application.

#5about 5 minutes

Adding client-side hydration and HMR with Vite

Integrate Vite as a lazy event handler within Nitro to enable client-side application hydration and a seamless developer experience with Hot Module Replacement.

#6about 4 minutes

Building a custom CLI to abstract framework configuration

Use the citty and c12 libraries to create a command-line interface that encapsulates the framework's dev and build logic for users.

#7about 6 minutes

Configuring the production build for Vite and Nitro

Orchestrate the production build by running the Vite client build and then using Nitro's public assets and bundled storage to create a single optimized server output.

#8about 10 minutes

Building and deploying a full-stack application

Create a functional form using an isomorphic fetch utility and deploy the complete server-rendered application to a serverless platform like Vercel.

#9about 3 minutes

Q&A on Nitro's stability and relation to web standards

The speaker discusses Nitro's commitment to semantic versioning, its role in complementing rather than replacing web standards, and its growing adoption.

Related jobs
Jobs that call for the skills explored in this talk.

Featured Partners

Related Videos

Nuxt.js - Just Vue 3 and a bit of magic?26:32

Nuxt.js - Just Vue 3 and a bit of magic?

Alexander Lichter

Building Better with Nuxt 341:22

Building Better with Nuxt 3

Daniel Roe

Fast & Furious - Going headless with Nuxt.js!42:21

Fast & Furious - Going headless with Nuxt.js!

Samuel Snopko

Modern Web Development with Nuxt341:43

Modern Web Development with Nuxt3

Alexander Lichter

One Framework To Rule Them All: Faster Websites With Astro30:42

One Framework To Rule Them All: Faster Websites With Astro

Eddy Vinck

Web development: where are we, and where are we going?32:56

Web development: where are we, and where are we going?

Laurie Voss

Beyond Warp Speed: Crafting the Future of Web Development with Astro 4.1024:33

Beyond Warp Speed: Crafting the Future of Web Development with Astro 4.10

Francesco Napoletano

WeAreDevelopers LIVE - Whats Nuxt and Next for app development, 20 years AJAX and more1:03:53

WeAreDevelopers LIVE - Whats Nuxt and Next for app development, 20 years AJAX and more

Chris Heilmann, Daniel Cranney & Alexander Lichter

From learning to earning

Jobs that call for the skills explored in this talk.