Serve dynamic site only if the requested page does not exist on CF pages?

Currently I have a dynamic php site hosted on a vps and proxied by Cloudflare. I’ve been working on rebuilding this site as a statically generated site on Cloudflare pages.

Now I have a couple of path/pages done on CF pages and would like to piecemeal launch those new pages while still serving the dynamic site for paths that don’t exist on CF pages yet.

How can I use CF workers to seamlessly(without client redirects) serve either the CF static page or the original PHP page?

You can make a worker that will go between the user and your origin. It can check if the first origin you want has the file to serve and if it 404s then you can make a request to the second origin to get the file.

Ya I was digging around in the docs and found TransformStream which lead me to find this blog post: https://www.mickaelvieira.com/blog/2020/01/27/custom-404-page-with-cloudflare-workers.html


From there I threw togeather this bit of untested code:

addEventListener("fetch", event => {
	event.respondWith(handleRequest(event.request));
});

function isHTMLContentTypeAccepted(request) {
	const acceptHeader = request.headers.get("Accept");
	return (
		typeof acceptHeader === "string" && acceptHeader.indexOf("text/html") >= 0
	);
}

async function streamCFPages(CFPagesResponse) {
	const { readable, writable } = new TransformStream();
	const { status, statusText, headers } = CFPagesResponse;

	CFPagesResponse.body.pipeTo(writable);

	return new Response(readable, {
		status,
		statusText,
		headers
	});
}

async function handleRequest(originalRequest) {
	const originalResponse = fetch(originalRequest);

	if(isHTMLContentTypeAccepted(originalRequest)) {
		let CFPagesUrl = new URL(originalRequest.url);
		CFPagesUrl.hostname = "example.pages.dev";

		const CFPagesResponse = await fetch(CFPagesUrl);

		if(CFPagesResponse.status !== 404) {
			return streamCFPages(CFPagesResponse);
		}
	}

	return await originalResponse;
}

I’m still a little unsure if this works at all, covers all potential pitfalls, or in general is the most performant way to accomplish this though.

For example, is there some faster way to check for the cf pages 404 status/header as soon as it streams in rather than waiting for the entire fetch to complete?