Add gzip compression to responses

index.tsx

@@ -7,6 +7,18 @@ import { NotFound } from "./src/frontend/pages/not-found";
 import { Post } from "./src/frontend/pages/post";
 import { dbConnection } from "./src/db";
 
+function compressResponse(html: string, status?: number) {
+  const compressed = Bun.gzipSync(Buffer.from(html));
+  return new Response(compressed, {
+    status,
+    headers: {
+      "Content-Type": "text/html",
+      "Content-Encoding": "gzip",
+      "Vary": "Accept-Encoding"
+    }
+  });
+}
+
 async function blogPosts(hmr: boolean) {
   const glob = new Bun.Glob("**/*.md");
   const blogPosts: Record<string, any> = {};
@@ -24,10 +36,7 @@ async function blogPosts(hmr: boolean) {
         const path = new URL(req.url).pathname;
         const post = dbConnection.getPost(path);
         if (!post)
-          return new Response(renderToString(<NotFound />), {
-            status: 404,
-            headers: { "Content-Type": "text/html" },
-          });
+          return compressResponse(renderToString(<NotFound />), 404);
 
         // Get adjacent posts for navigation
         const { previousPost, nextPost } = dbConnection.getAdjacentPosts(post.path);
@@ -44,18 +53,13 @@ async function blogPosts(hmr: boolean) {
 
         // AppShell is already loaded, just send the <main> content
         if (req.headers.get("shell-loaded") === "true") {
-          return new Response(
-            renderToString(<Post meta={data} children={post.content} />),
-            {
-              headers: {
-                "Content-Type": "text/html",
-              },
-            },
+          return compressResponse(
+            renderToString(<Post meta={data} children={post.content} />)
           );
         }
 
         // AppShell is not loaded, send the <AppShell> with the <main> content inside
-        return new Response(
+        return compressResponse(
           renderToString(
             <AppShell>
               <Post
@@ -63,12 +67,7 @@ async function blogPosts(hmr: boolean) {
                 children={post.content}
               />
             </AppShell>,
-          ),
-          {
-            headers: {
-              "Content-Type": "text/html",
-            },
-          },
+          )
         );
       };
     }
@@ -99,24 +98,15 @@ Bun.serve({
       const searchParams = new URLSearchParams(req.url.split('?')[1]);
 
       if (req.headers.get("shell-loaded") === "true") {
-        return new Response(renderToString(<Home searchParams={searchParams} />), {
-          headers: {
-            "Content-Type": "text/html",
-          },
-        });
+        return compressResponse(renderToString(<Home searchParams={searchParams} />));
       }
 
-      return new Response(
+      return compressResponse(
         renderToString(
           <AppShell searchParams={searchParams}>
             <Home searchParams={searchParams} />
           </AppShell>,
-        ),
-        {
-          headers: {
-            "Content-Type": "text/html",
-          },
-        },
+        )
       );
     },
     "/profile-picture.webp": () => {
@@ -128,15 +118,9 @@ Bun.serve({
     },
     "/*": (req) => {
       if(req.headers.get("shell-loaded") === "true") {
-        return new Response(renderToString(<NotFound />), {
-          status: 404,
-          headers: { "Content-Type": "text/html" },
-        });
+        return compressResponse(renderToString(<NotFound />), 404);
       }
-      return new Response(renderToString(<AppShell><NotFound /></AppShell>), {
-        status: 404,
-        headers: { "Content-Type": "text/html" },
-      });
+      return compressResponse(renderToString(<AppShell><NotFound /></AppShell>), 404);
     }
   },
 });