perf(@angular/ssr): optimize response times by introducing header flushing

Improves SSR performance by streaming the response before inlining critical CSS. This allows for earlier header flushing, reducing time to first byte (TTFB) and improving perceived load times.

Author: alan-agius4

packages/angular/ssr/node/src/response.ts

@@ -44,6 +44,10 @@ export async function writeResponseToNodeResponse(
     }
   }
 
+  if ('flushHeaders' in destination) {
+    destination.flushHeaders();
+  }
+
   if (!body) {
     destination.end();
 

packages/angular/ssr/src/app.ts

@@ -129,6 +129,11 @@ export class AngularServerApp {
    */
   private boostrap: AngularBootstrap | undefined;
 
+  /**
+   * Decorder used to convert a string to a Uint8Array.
+   */
+  private readonly textDecoder = new TextEncoder();
+
   /**
    * Cache for storing critical CSS for pages.
    * Stores a maximum of MAX_INLINE_CSS_CACHE_ENTRIES entries.
@@ -318,30 +323,46 @@ export class AngularServerApp {
       SERVER_CONTEXT_VALUE[renderMode],
     );
 
-    if (inlineCriticalCss) {
-      // Optionally inline critical CSS.
-      this.inlineCriticalCssProcessor ??= new InlineCriticalCssProcessor((path: string) => {
-        const fileName = path.split('/').pop() ?? path;
-
-        return this.assets.getServerAsset(fileName).text();
-      });
+    if (!inlineCriticalCss) {
+      return new Response(html, responseInit);
+    }
 
-      if (renderMode === RenderMode.Server) {
-        // Only cache if we are running in SSR Mode.
-        const cacheKey = await sha256(html);
-        let htmlWithCriticalCss = this.criticalCssLRUCache.get(cacheKey);
-        if (htmlWithCriticalCss === undefined) {
-          htmlWithCriticalCss = await this.inlineCriticalCssProcessor.process(html);
-          this.criticalCssLRUCache.put(cacheKey, htmlWithCriticalCss);
+    this.inlineCriticalCssProcessor ??= new InlineCriticalCssProcessor((path: string) => {
+      const fileName = path.split('/').pop() ?? path;
+
+      return this.assets.getServerAsset(fileName).text();
+    });
+
+    const { inlineCriticalCssProcessor, criticalCssLRUCache, textDecoder } = this;
+
+    // Use a stream to send the response before inlining critical CSS, improving performance via header flushing.
+    const stream = new ReadableStream({
+      async start(controller) {
+        let htmlWithCriticalCss;
+
+        try {
+          if (renderMode === RenderMode.Server) {
+            const cacheKey = await sha256(html);
+            htmlWithCriticalCss = criticalCssLRUCache.get(cacheKey);
+            if (!htmlWithCriticalCss) {
+              htmlWithCriticalCss = await inlineCriticalCssProcessor.process(html);
+              criticalCssLRUCache.put(cacheKey, htmlWithCriticalCss);
+            }
+          } else {
+            htmlWithCriticalCss = await inlineCriticalCssProcessor.process(html);
+          }
+        } catch (error) {
+          // eslint-disable-next-line no-console
+          console.error(`An error occurred while inlining critical CSS for: ${url}.`, error);
         }
 
-        html = htmlWithCriticalCss;
-      } else {
-        html = await this.inlineCriticalCssProcessor.process(html);
-      }
-    }
+        controller.enqueue(textDecoder.encode(htmlWithCriticalCss ?? html));
+
+        controller.close();
+      },
+    });
 
-    return new Response(html, responseInit);
+    return new Response(stream, responseInit);
   }
 
   /**