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.

Matching moments

The industry's focus on frameworks over web fundamentals
11:32 MIN

The industry's focus on frameworks over web fundamentals

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

The only frontend stack that truly matters
11:10 MIN

The only frontend stack that truly matters

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Building collaborative design tools and the neo-brutalism trend
03:05 MIN

Building collaborative design tools and the neo-brutalism trend

Slopquatting, API Keys, Fun with Fonts, Recruiters vs AI and more - The Best of LIVE 2025 - Part 2

How a broken frontend culture impacts the web
04:02 MIN

How a broken frontend culture impacts the web

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Organizing a developer conference for 15,000 attendees
01:32 MIN

Organizing a developer conference for 15,000 attendees

Cat Herding with Lions and Tigers - Christian Heilmann

Using Chrome's built-in AI for on-device features
06:44 MIN

Using Chrome's built-in AI for on-device features

Devs vs. Marketers, COBOL and Copilot, Make Live Coding Easy and more - The Best of LIVE 2025 - Part 3

Scripting presentations and demos in VS Code
14:14 MIN

Scripting presentations and demos in VS Code

Devs vs. Marketers, COBOL and Copilot, Make Live Coding Easy and more - The Best of LIVE 2025 - Part 3

Increasing the value of talk recordings post-event
04:57 MIN

Increasing the value of talk recordings post-event

Cat Herding with Lions and Tigers - Christian Heilmann

Featured Partners

Related Videos

See all 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

Modern Web Development with Nuxt341:43

Modern Web Development with Nuxt3

Alexander Lichter

Building a framework-independent component library19:46

Building a framework-independent component library

Tobias Scholz

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

One Framework To Rule Them All: Faster Websites With Astro

Eddy Vinck

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

Fast & Furious - Going headless with Nuxt.js!

Samuel Snopko

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

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

Laurie Voss

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

Related Articles

View all articles
DC
Daniel Cranney
Dev Digest 159: AI Pipelines, 10x Faster TypeScript, How to Interview
Inside last week’s Dev Digest 159 . 🤖 How to use LLMs to help you write code ⚡ How much electricity does AI need? 🔒 Is your API secure? Learn all about hardening it… 🟦 TypeScript switches to go and gets 10 times faster 🖼️ An image cropper in your ap...
Dev Digest 159: AI Pipelines, 10x Faster TypeScript, How to Interview

From learning to earning

Jobs that call for the skills explored in this talk.