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

Navigating the growing complexity of modern CSS
09:00 MIN

Navigating the growing complexity of modern CSS

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

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

Why you might not need JavaScript for everything
02:33 MIN

Why you might not need JavaScript for everything

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS 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

Exploring modern JavaScript performance and new CSS features
08:07 MIN

Exploring modern JavaScript performance and new CSS features

WeAreDevelopers LIVE – AI, Freelancing, Keeping Up with Tech and More

The value of progressive enhancement and semantic HTML
03:31 MIN

The value of progressive enhancement and semantic HTML

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

Using AI to overcome challenges in systems programming
02:49 MIN

Using AI to overcome challenges in systems programming

AI in the Open and in Browsers - Tarek Ziadé

Improving the developer feedback loop with specialized tools
03:16 MIN

Improving the developer feedback loop with specialized tools

Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof

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

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

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

Laurie Voss

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

Fast & Furious - Going headless with Nuxt.js!

Samuel Snopko

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.