Facundo Giuliani�@facundozurdo
DevRel Manager @ Storyblok
React Buenos Aires Organizer
DevSummit AR Organizer
Browser
Web Server
But…
https://remix.run/
Content Delivery Network
Group of geographically distributed servers that speed up the delivery of web content by bringing it closer to where users are
https://remix.run/
THIS IS NOT A PAID ADVERTISEMENT
Static Content
Static Site Generation
Jamstack
But…
Static Content
https://remix.run/
The Edge
Distributed network architecture in which client data is processed as close to the originating source as possible
https://remix.run/
THIS IS NOT A PAID ADVERTISEMENT
Edge <> Serverless
Edge Functions
Serverless scripts and functions that execute server-side rendering code and can be distributed to different regions
Edge Functions run on the Edge Runtime (built on top of the V8 engine, Web Standard APIs)
import { NextResponse } from "next/server";
export const config = { runtime: "edge" };
export default (request) => {
return NextResponse.json({
name: `Hola! You are visiting from ${request.url}`,
});
};
export default async function handler(req, res) {
const { id } = req.query;
const response = await fetch(`https://api.mywebsite.com/users/${id}`);
const userData = await response.json();
res.status(200).json(userData);
}
Middleware
Intermediate tier that executes custom logic and tasks before a request is processed
import { NextResponse } from "next/server";
export function middleware(req) {
const userAuth = req.headers.get('authorization');
const url = req.nextUrl;
if (isSubscribed(userAuth)) {
return NextResponse.next();
}
url.pathname = "/api/auth";
return NextResponse.rewrite(url);
};
import { NextResponse } from "next/server";
export const config = { matcher: "/products" };
export function middleware(req) {
const isFeatureFlagged = getFlags(req);
if (isFeatureFlagged) {
req.nextUrl.pathname = "/new-page";
return NextResponse.rewrite(req.nextUrl);
}
};
export default function Todos() {
const data = useLoaderData<typeof loader>();
return (
<div>
<TodoList todos={data} />
<Form method="post">
<input type="text" name="title" />
<button type="submit">Create Todo</button>
</Form>
</div>
);
}
export async function action({ request }) {
const body = await request.formData();
const todo = await fakeCreateTodo({
title: body.get("title"),
});
return redirect(`/todos/${todo.id}`);
}
export async function loader() {
return json(await fakeGetTodos());
}
NextGen Edge
Define different levels of dynamism on a per-route basis. Supports different runtimes (Node, Edge, Deno)
import { json } from "@vercel/remix";
export const config = { runtime: "edge" };
export async function loader({ request }) {
…
return json({ ... });
}
Edge Functions
Cloudflare Workers
Platform-as-a-service for running full stack apps and databases
The Edge is here, and it’s the future
Gracias!
@facundozurdo
https://fgiuliani.com