feat(templates): add Link header for Early Hints, HTTP2 Server Push etc.

contributors.yml

@@ -386,6 +386,7 @@
 - phishy
 - plastic041
 - plondon
+- plopix
 - pmbanugo
 - princerajroy
 - prvnbist

packages/remix-dev/config/defaults/entry.server.node.tsx

@@ -15,17 +15,17 @@ export default function handleRequest(
 ) {
   return isbot(request.headers.get("user-agent"))
     ? handleBotRequest(
-        request,
-        responseStatusCode,
-        responseHeaders,
-        remixContext
-      )
+      request,
+      responseStatusCode,
+      responseHeaders,
+      remixContext
+    )
     : handleBrowserRequest(
-        request,
-        responseStatusCode,
-        responseHeaders,
-        remixContext
-      );
+      request,
+      responseStatusCode,
+      responseHeaders,
+      remixContext
+    );
 }
 
 function handleBotRequest(
@@ -46,6 +46,13 @@ function handleBotRequest(
           const body = new PassThrough();
 
           responseHeaders.set("Content-Type", "text/html");
+          responseHeaders.set(
+            "Link",
+            httpPushLinks(remixContext).map((link: string) => `<${link}>; rel=preload; as=script; crossorigin=anonymous`)
+              .concat(responseHeaders.get("Link") as string)
+              .filter(Boolean)
+              .join(",")
+          );
 
           resolve(
             new Response(body, {
@@ -88,6 +95,13 @@ function handleBrowserRequest(
           const body = new PassThrough();
 
           responseHeaders.set("Content-Type", "text/html");
+          responseHeaders.set(
+            "Link",
+            httpPushLinks(remixContext).map((link: string) => `<${link}>; rel=preload; as=script; crossorigin=anonymous`)
+              .concat(responseHeaders.get("Link") as string)
+              .filter(Boolean)
+              .join(",")
+          );
 
           resolve(
             new Response(body, {
@@ -111,3 +125,11 @@ function handleBrowserRequest(
     setTimeout(abort, ABORT_DELAY);
   });
 }
+
+function httpPushLinks(remixContext: EntryContext) {
+  return [
+    remixContext.manifest.url,
+    remixContext.manifest.entry.module,
+    ...remixContext.manifest.entry.imports,
+  ];
+}

templates/remix/app/entry.server.tsx

@@ -15,17 +15,17 @@ export default function handleRequest(
 ) {
   return isbot(request.headers.get("user-agent"))
     ? handleBotRequest(
-        request,
-        responseStatusCode,
-        responseHeaders,
-        remixContext
-      )
+      request,
+      responseStatusCode,
+      responseHeaders,
+      remixContext
+    )
     : handleBrowserRequest(
-        request,
-        responseStatusCode,
-        responseHeaders,
-        remixContext
-      );
+      request,
+      responseStatusCode,
+      responseHeaders,
+      remixContext
+    );
 }
 
 function handleBotRequest(
@@ -46,6 +46,14 @@ function handleBotRequest(
           const body = new PassThrough();
 
           responseHeaders.set("Content-Type", "text/html");
+          responseHeaders.set(
+            "Link",
+            httpPushLinks(remixContext)
+              .map((link: string) => `<${link}>; rel=preload; as=script; crossorigin=anonymous`)
+              .concat(responseHeaders.get("Link") as string)
+              .filter(Boolean)
+              .join(",")
+          );
 
           resolve(
             new Response(body, {
@@ -88,6 +96,13 @@ function handleBrowserRequest(
           const body = new PassThrough();
 
           responseHeaders.set("Content-Type", "text/html");
+          responseHeaders.set(
+            "Link",
+            httpPushLinks(remixContext).map((link: string) => `<${link}>; rel=preload; as=script; crossorigin=anonymous`)
+              .concat(responseHeaders.get("Link") as string)
+              .filter(Boolean)
+              .join(",")
+          );
 
           resolve(
             new Response(body, {
@@ -111,3 +126,12 @@ function handleBrowserRequest(
     setTimeout(abort, ABORT_DELAY);
   });
 }
+
+
+function httpPushLinks(remixContext: EntryContext) {
+  return [
+    remixContext.manifest.url,
+    remixContext.manifest.entry.module,
+    ...remixContext.manifest.entry.imports,
+  ];
+}