Cloudflare Workers setup with custom worker script

[predaytor]

Body

Is it possible to set up my own worker script similar to Remix framework? I want to set up custom SWR caching, but the only option is Vite configuration with Cloudflare proxy plugin? Thx.

/worker.ts:

import { createRequestHandler } from "react-router";

const requestHandler = createRequestHandler(
  () => import("virtual:react-router/server-build"),
  import.meta.env.MODE
);

export default {
  fetch(request, env) {
    return requestHandler(request, {});
  },
} satisfies ExportedHandler<CloudflareEnvironment>;

[predaytor]

I actually got a suggestion to use middleware for this, seems to work well! Although the Cloudflare types (Response, Request, fetch) that @cloudflare/worker-types defines only work in worker.js/ts files, so I need to cast any here..

Original SWR gist

/src/middleware.ts:

import { defineMiddleware } from 'astro:middleware';
import { parse } from 'cache-control-parser';

export const onRequest = defineMiddleware(async (ctx, next) => {
	try {
		const cache = ctx.locals.runtime.caches.default;
		const cachedResponse = (await cache.match(ctx.request as any)) as
			| Response
			| undefined;

		if (cachedResponse) {
			console.log('Cache: HIT');

			if (shouldRevalidate(cachedResponse)) {
				console.log('Cache: REVALIDATE');

				ctx.locals.runtime.ctx.waitUntil(
					next().then((response) => cache.put(ctx.request as any, response.clone() as any)),
				);
			}

			return new Response(cachedResponse.body, cachedResponse);
		}

		console.log('Cache: MISS');

		const response = await next();
		ctx.locals.runtime.ctx.waitUntil(
			cache.put(ctx.request as any, response.clone() as any),
		);

		return response;
	} catch (ex) {
		console.error(ex);
		return new Response('Internal server error', { status: 500 });
	}
});

function shouldRevalidate(cachedResponse: Response) {
	const ageHeader = cachedResponse.headers.get('age');
	const cacheControlHeader = cachedResponse.headers.get('cdn-cache-control');

	if (!ageHeader || !cacheControlHeader) {
		return false;
	}

	const staleWhileRevalidate = parse(cacheControlHeader)['stale-while-revalidate'];
	if (typeof staleWhileRevalidate === 'undefined') {
		return false;
	}

	const age = Number(ageHeader);
	if (Number.isNaN(age)) {
		return false;
	}

	return age > staleWhileRevalidate;
}

[predaytor]

It is actually better to use a proxy worker on top of the main astro app using the service bindings described here. This is not ideal as we need two workers to be deployed and managed in a monorepo, but is not a big problem.