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.

#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.