ngbrown · August 30, 2024 07:25
diff --git a/entry.server.tsx b/entry.server.tsx
 /**
 * By default, Remix will handle generating the HTTP Response for you.
 * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
 * For more information, see https://remix.run/file-conventions/entry.server
 */

 import type { AppLoadContext, EntryContext } from "@remix-run/cloudflare";
 import { RemixServer } from "@remix-run/react";
 import { isbot } from "isbot";
 import { renderToReadableStream } from "react-dom/server";

 export default async function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext,
  // This is ignored so we can keep it in the template for visibility.  Feel
  // free to delete this parameter in your app if you're not using it!
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  loadContext: AppLoadContext,
 ) {
  const body = await renderToReadableStream(
    <RemixServer context={remixContext} url={request.url} />,
    {
      signal: request.signal,
      onError(error: unknown) {
        // Log streaming rendering errors from inside the shell
        console.error(error);
        responseStatusCode = 500;
      },
    },
  );

  if (isbot(request.headers.get("user-agent") || "")) {
    await body.allReady;
  }

  preloadRouteAssets(remixContext, responseHeaders);

  responseHeaders.set("Content-Type", "text/html");
  return new Response(body, {
    headers: responseHeaders,
    status: responseStatusCode,
  });
 }

 type PreLink = {
  href: string;
  rel?: "preload" | "preconnect";
  as?: string;
  cors?: boolean | "anonymous" | "use-credentials";
 };

 function preloadRouteAssets(context: EntryContext, headers: Headers) {
  const requestRoutes = context.staticHandlerContext.matches.map(
    (x) => x.route.id,
  );

  const linkPreload = requestRoutes
    .flatMap((route) => {
      const module = context.routeModules[route];
      return module && module.links instanceof Function ? module.links() : [];
    })
    .map((link) => {
      if (!("href" in link) || link.href == null) return null;
      if (!link.href.startsWith("/") || link.rel === "preconnect") {
        const url = new URL(link.href);
        return {
          href: `${url.protocol}//${url.host}`,
          rel: "preconnect",
          cors: link.crossOrigin,
        } as PreLink;
      }
      if (link.as != null) {
        return {
          href: link.href,
          as: link.as,
          cors: link.as === "font" || link.as === "fetch",
        } as PreLink;
      }
      if (link.rel === "stylesheet")
        return { href: link.href, as: "style" } as PreLink;
      return null;
    })
    .filter((link): link is PreLink => link != null && link.href != null)
    .filter((item, index, list) => {
      // dedupe
      return index === list.findIndex((link) => link.href === item.href);
    });
  linkPreload.forEach((link) =>
    headers.append(
      "Link",
      [
        `<${encodeURI(link.href)}>`,
        `rel=${link.rel ?? "preload"}`,
        link.as && `as=${link.as}`,
        link.cors &&
          `crossorigin=${typeof link.cors === "string" ? link.cors : "anonymous"}`,
      ]
        .filter(isTruthy)
        .join("; "),
    ),
  );

  const scriptPreload = [
    context.manifest.url,
    context.manifest.entry.module,
    ...context.manifest.entry.imports,
  ].concat(
    requestRoutes
      .map((route) => context.manifest.routes[route])
      .filter(isTruthy)
      .map((er) => [er.module, ...(er.imports ?? [])])
      .flat(1),
  );
  // module scripts need CORS, while legacy scripts did not.
  dedupe(scriptPreload).forEach((script) =>
    headers.append(
      "Link",
      `<${encodeURI(script)}>; rel=preload; as=script; crossorigin=anonymous`,
    ),
  );

  // When loading assets, font and fetch preloading requires the crossorigin attribute to be set. Also module scripts require crossorigin.
  // TODO: investigate `modulepreload`. It doesn't appear to work, but there is a request for it: https://community.cloudflare.com/t/support-rel-modulepreload-for-automatic-link-header-generation/550051
  //   MDN says that only "preload" and "preconnect" are reliable for the Link header.
  // TODO: Filter to only relative paths (option to include specific origins, must be handled by same certificate?, not supported by Cloudflare)
  // TODO: Percent-encode relative paths (everything over 255, `<`, and `>`)
  // TODO: Look at https://github.com/sergiodxa/remix-utils/blob/main/src/server/preload-route-assets.ts
 }

 function dedupe<T>(array: T[]): T[] {
  return [...new Set(array)];
 }

 function isTruthy<T>(x: T | null | undefined): x is T {
  return !!x;
 }
	/**
	* By default, Remix will handle generating the HTTP Response for you.
	* You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
	* For more information, see https://remix.run/file-conventions/entry.server
	*/

	import type { AppLoadContext, EntryContext } from "@remix-run/cloudflare";
	import { RemixServer } from "@remix-run/react";
	import { isbot } from "isbot";
	import { renderToReadableStream } from "react-dom/server";

	export default async function handleRequest(
	request: Request,
	responseStatusCode: number,
	responseHeaders: Headers,
	remixContext: EntryContext,
	// This is ignored so we can keep it in the template for visibility. Feel
	// free to delete this parameter in your app if you're not using it!
	// eslint-disable-next-line @typescript-eslint/no-unused-vars
	loadContext: AppLoadContext,
	) {
	const body = await renderToReadableStream(
	<RemixServer context={remixContext} url={request.url} />,
	{
	signal: request.signal,
	onError(error: unknown) {
	// Log streaming rendering errors from inside the shell
	console.error(error);
	responseStatusCode = 500;
	},
	},
	);

	if (isbot(request.headers.get("user-agent") \|\| "")) {
	await body.allReady;
	}

	preloadRouteAssets(remixContext, responseHeaders);

	responseHeaders.set("Content-Type", "text/html");
	return new Response(body, {
	headers: responseHeaders,
	status: responseStatusCode,
	});
	}

	type PreLink = {
	href: string;
	rel?: "preload" \| "preconnect";
	as?: string;
	cors?: boolean \| "anonymous" \| "use-credentials";
	};

	function preloadRouteAssets(context: EntryContext, headers: Headers) {
	const requestRoutes = context.staticHandlerContext.matches.map(
	(x) => x.route.id,
	);

	const linkPreload = requestRoutes
	.flatMap((route) => {
	const module = context.routeModules[route];
	return module && module.links instanceof Function ? module.links() : [];
	})
	.map((link) => {
	if (!("href" in link) \|\| link.href == null) return null;
	if (!link.href.startsWith("/") \|\| link.rel === "preconnect") {
	const url = new URL(link.href);
	return {
	href: `${url.protocol}//${url.host}`,
	rel: "preconnect",
	cors: link.crossOrigin,
	} as PreLink;
	}
	if (link.as != null) {
	return {
	href: link.href,
	as: link.as,
	cors: link.as === "font" \|\| link.as === "fetch",
	} as PreLink;
	}
	if (link.rel === "stylesheet")
	return { href: link.href, as: "style" } as PreLink;
	return null;
	})
	.filter((link): link is PreLink => link != null && link.href != null)
	.filter((item, index, list) => {
	// dedupe
	return index === list.findIndex((link) => link.href === item.href);
	});
	linkPreload.forEach((link) =>
	headers.append(
	"Link",
	[
	`<${encodeURI(link.href)}>`,
	`rel=${link.rel ?? "preload"}`,
	link.as && `as=${link.as}`,
	link.cors &&
	`crossorigin=${typeof link.cors === "string" ? link.cors : "anonymous"}`,
	]
	.filter(isTruthy)
	.join("; "),
	),
	);

	const scriptPreload = [
	context.manifest.url,
	context.manifest.entry.module,
	...context.manifest.entry.imports,
	].concat(
	requestRoutes
	.map((route) => context.manifest.routes[route])
	.filter(isTruthy)
	.map((er) => [er.module, ...(er.imports ?? [])])
	.flat(1),
	);
	// module scripts need CORS, while legacy scripts did not.
	dedupe(scriptPreload).forEach((script) =>
	headers.append(
	"Link",
	`<${encodeURI(script)}>; rel=preload; as=script; crossorigin=anonymous`,
	),
	);

	// When loading assets, font and fetch preloading requires the crossorigin attribute to be set. Also module scripts require crossorigin.
	// TODO: investigate `modulepreload`. It doesn't appear to work, but there is a request for it: https://community.cloudflare.com/t/support-rel-modulepreload-for-automatic-link-header-generation/550051
	// MDN says that only "preload" and "preconnect" are reliable for the Link header.
	// TODO: Filter to only relative paths (option to include specific origins, must be handled by same certificate?, not supported by Cloudflare)
	// TODO: Percent-encode relative paths (everything over 255, `<`, and `>`)
	// TODO: Look at https://github.com/sergiodxa/remix-utils/blob/main/src/server/preload-route-assets.ts
	}

	function dedupe<T>(array: T[]): T[] {
	return [...new Set(array)];
	}

	function isTruthy<T>(x: T \| null \| undefined): x is T {
	return !!x;
	}