Delivering faster user experiences with Vercel Edge Functions and Fauna

Static only

• Any content that doesn't change per request is baked into the static HTML at build-time
• Any dynamic data is hydrated on the client side, but that's used very sparingly
• Because the HTML is baked ahead of time, it can be pushed out to the edge — the network of global servers who can serve a page from the closest location to the user in milliseconds

Server rendered

• Only basic scaffolding that is consistent between pages is actually stored in HTML
• As much data as possible is stored in traditional databases
• Pages are hydrated on request — as soon as you visit a site, that HTML is built on-demand for you by a server that isn't optimized for the user's physical location

What if there is a compromise between static and server?

1. Use a serverless function to ping third-party services for extra features like authentication. Here's an example of Zach Leatherman doing that with an Eleventy site.
2. You could build a PWA with little pieces of dynamically generated content, while the rest is prebuilt.
3. Perhaps configure your site to pull in all data from a headless CMS from the client side and hydrate the page with dynamic content.

There is a better solution.

• Everything is optimized to the user's location
• No server setup
• Microservice architectural style
• Crazy speedy serving time since most of it is static

Let's build some stuff.

// pages/_middleware.ts

import { NextResponse } from 'next/server';
import type { NextRequest, NextFetchEvent } from 'next/server';

export default function middleware (request: NextRequest, event: NextFetchEvent) {
  return new NextResponse({
    ip: request.ip,
    geo: request.geo,
    ua: request.ua
  });
};

1. // pages/_middleware.js: This function is a part of a Next.JS app. Inside Next.JS, we're taking advantage of something called "middleware" — code that runs before a request is completed. What we're writing here is an edge function, which is just a special type of middleware that just runs at the edge.
2. export default function: We're writing a function here that is going to run every time we get a request to this endpoint. The function doesn't have to be named middleware, it can be named whatever you'd like.
3. request: Middleware edge functions take two arguments, request and event. request is the typical [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) class with a couple fancy new additions, like user location data and a cookie interface.
4. event: This is the other argument that goes into our edge function, and its just an extended version of the usual FetchEvent.
5. NextResponse: This is just the usual Response object, but like the last two notable variables, it has a few tricks up its sleeve like redirecting and some middleware-specific routing stuff. Definitely check out these docs if you're curious about the details.

OK, that's cool. Where is it useful?

// pages/_middleware.ts

import { NextResponse } from 'next/server';
import type { NextRequest, NextFetchEvent } from 'next/server';

export default async function middleware (request: NextRequest, event: NextFetchEvent) {
	const CLIENT_SECRET : string = process.env.FAUNA_KEY;

	// Here we get the right Region Group (RG) for the user.
	// If the user is in the United States, use the US RG.
	// Otherwise, use the Europe RG.
	// Fauna plans to add add more Region Groups in the future.
	const REGION : string = request.geo.country == "US" ? "us" : "eu";
	const FAUNA_GRAPHQL_BASE_URL : string = `https://graphql.${REGION}.fauna.com/graphql`;

	// here's a sample query
	// the exact query doesn't matter, this function will just return whatever the query does
	const query : string = `
		query Entries($size: Int) {
			entries(_size: $size) {
				data {
					_id
					_ts
					name
					message
					createdAt
				}
			}
		}
	`;

	// this section actually runs the request
	const response = await fetch(
		FAUNA_GRAPHQL_BASE_URL, 
		{
			method: "POST",
			headers: {
				authorization: `Bearer ${CLIENT_SECRET}`
			},
			body: JSON.stringify({ query })
		}
	};
	const results = await response.json();

	// just return whatever the query did, for simplicity
	// in a real-world application, you'd likely be running some business logic here
	return new NextResponse({ results });
};

• Fantastic performance, since this is all happening at the edge
• Fine-grained control over locale-based privacy regulation compliance
• The microservices architecture that keeps all of our concerns separate from each other
• No rigamarole to get it working in Next.JS, an easy-to-pickup framework that many of us are already familiar with
• Simple, familiar, GraphQL-based querying
• TypeScript support! (I think I hear @shaundai giggling in the distance)

• The Vercel page on edge functions
• A getting started tutorial with Upstash
• A deep dive on Next.JS middleware
• One dev's migration from Express to Next.JS