Merge pull request #1712 from Dymerz/feat/isr_add_inline-critical-css_support

hoebbelsB · web-flow · commit 1cb193f680f4 · 2024-04-15T21:11:05.000+02:00
feat(isr): add `inlineCriticalCss` support
diff --git a/libs/isr/models/src/isr-handler-config.ts b/libs/isr/models/src/isr-handler-config.ts
@@ -50,6 +50,12 @@ export interface ISRHandlerConfig {
    */
   browserDistFolder?: string;
 
+  /**
+   * Reduce render blocking requests by inlining critical CSS.
+   * If not provided, defaults to true.
+   */
+  inlineCriticalCss?: boolean;
+
   /**
    * The build ID of the application. This value is used to generate unique cache keys.
    * If not provided, defaults to null.
diff --git a/libs/isr/server/src/isr-handler.ts b/libs/isr/server/src/isr-handler.ts
@@ -45,14 +45,14 @@ export class ISRHandler {
       config.indexHtml,
       config.commonEngine,
       config.bootstrap,
-      config.browserDistFolder
+      config.browserDistFolder,
     );
   }
 
   async invalidate(
     req: Request,
     res: Response,
-    config?: InvalidateConfig
+    config?: InvalidateConfig,
   ): Promise<any> {
     const { token, urlsToInvalidate } = extractDataFromBody(req);
     const { indexHtml } = this.config;
@@ -125,20 +125,21 @@ export class ISRHandler {
     const invalidatedUrls = variantUrlsToInvalidate
       .map((val) => val.cacheKey)
       .filter(
-        (cacheKey) => !notInCache.includes(cacheKey) && !urlWithErrors[cacheKey]
+        (cacheKey) =>
+          !notInCache.includes(cacheKey) && !urlWithErrors[cacheKey],
       );
 
     if (notInCache.length) {
       this.logger.log(
-        `Urls: ${notInCache.join(', ')} does not exist in cache.`
+        `Urls: ${notInCache.join(', ')} does not exist in cache.`,
       );
     }
 
     if (Object.keys(urlWithErrors).length) {
       this.logger.log(
         `Urls: ${Object.keys(urlWithErrors).join(
-          ', '
-        )} had errors while regenerating!`
+          ', ',
+        )} had errors while regenerating!`,
       );
     }
 
@@ -181,7 +182,7 @@ export class ISRHandler {
     req: Request,
     res: Response,
     next: NextFunction,
-    config?: ServeFromCacheConfig
+    config?: ServeFromCacheConfig,
   ): Promise<any> {
     try {
       const variant = this.getVariant(req);
@@ -208,7 +209,7 @@ export class ISRHandler {
             res,
             cacheData,
             this.logger,
-            config?.providers
+            config?.providers,
           );
         }
       }
@@ -226,7 +227,7 @@ export class ISRHandler {
       // Cache exists. Send it.
       this.logger.log(
         `Page was retrieved from cache: `,
-        getCacheKey(req.url, variant)
+        getCacheKey(req.url, variant),
       );
       return res.send(finalHtml);
     } catch (error) {
@@ -239,7 +240,7 @@ export class ISRHandler {
     req: Request,
     res: Response,
     next: NextFunction,
-    config?: RenderConfig
+    config?: RenderConfig,
   ): Promise<any> {
     const renderUrlConfig: RenderUrlConfig = {
       req,
@@ -250,6 +251,7 @@ export class ISRHandler {
       bootstrap: this.config.bootstrap,
       commonEngine: this.config.commonEngine,
       browserDistFolder: this.config.browserDistFolder,
+      inlineCriticalCss: this.config.inlineCriticalCss,
     };
 
     renderUrl(renderUrlConfig).then(async (html) => {
@@ -298,7 +300,7 @@ export class ISRHandler {
 }
 
 const extractDataFromBody = (
-  req: Request
+  req: Request,
 ): { token: string | null; urlsToInvalidate: string[] } => {
   const { urlsToInvalidate, token } = req.body;
   return { urlsToInvalidate, token };
diff --git a/libs/isr/server/src/utils/render-url.ts b/libs/isr/server/src/utils/render-url.ts
@@ -14,6 +14,7 @@ export interface RenderUrlConfig {
   commonEngine?: CommonEngine;
   bootstrap?: CommonEngineRenderOptions['bootstrap'];
   browserDistFolder?: string;
+  inlineCriticalCss?: boolean;
 }
 
 const EXTRA_PROVIDERS: Provider[] = [
@@ -31,6 +32,7 @@ export const renderUrl = async (options: RenderUrlConfig): Promise<string> => {
     commonEngine,
     bootstrap,
     browserDistFolder,
+    inlineCriticalCss,
   } = options;
 
   const { protocol, originalUrl, baseUrl, headers } = req;
@@ -56,6 +58,7 @@ export const renderUrl = async (options: RenderUrlConfig): Promise<string> => {
           documentFilePath: indexHtml,
           url: `${protocol}://${headers.host}${originalUrl}`,
           publicPath: browserDistFolder,
+          inlineCriticalCss: inlineCriticalCss ?? true,
           providers: [...allProviders] as StaticProvider[], // we need to cast to StaticProvider[] because of a bug in the types
         })
         .then((html) => {
@@ -73,7 +76,7 @@ export const renderUrl = async (options: RenderUrlConfig): Promise<string> => {
             reject(err);
           }
           resolve(html);
-        }
+        },
       );
     }
   });
