fixup! feat(isr): added background revalidation and non-blocking render

eneajaho · eneajaho · commit c5db6e48420c · 2024-09-01T11:29:50.000+02:00
diff --git a/apps/ssr-isr/server.ts b/apps/ssr-isr/server.ts
@@ -33,7 +33,7 @@ export function app(): express.Express {
     commonEngine,
     backgroundRevalidation: true, // will revalidate in background and serve the cache page first
     nonBlockingRender: true, // will serve page first and store in cache in background
-    modifyGeneratedHtml: defaultModifyGeneratedHtml,
+    modifyGeneratedHtml: customModifyGeneratedHtml,
     // cache: fsCacheHandler,
   });
 
@@ -67,12 +67,11 @@ export function app(): express.Express {
   return server;
 }
 
-const defaultModifyGeneratedHtml: ModifyHtmlCallbackFn = (
+const customModifyGeneratedHtml: ModifyHtmlCallbackFn = (
   req: Request,
   html: string,
 ): string => {
   const time = new Date().toISOString().replace(/T/, ' ').replace(/\..+/, '');
-
   let msg = '<!-- ';
   msg += `\n🚀 ISR: Served from cache! \n⌛ Last updated: ${time}. `;
   msg += ' \n-->';
diff --git a/libs/isr/server/src/cache-generation.ts b/libs/isr/server/src/cache-generation.ts
@@ -103,26 +103,37 @@ export class CacheGeneration {
         // don't do !revalidate because it will also catch "0"
         return { html: finalHtml };
       }
+
       // add the regenerated page to cache
-      if (this.isrConfig.nonBlockingRender) {
-        this.cache.add(cacheKey, finalHtml, {
-          revalidate,
-          buildId: this.isrConfig.buildId,
-        });
-      } else {
-        await this.cache.add(cacheKey, finalHtml, {
+      const addToCache = () => {
+        return this.cache.add(cacheKey, finalHtml, {
           revalidate,
           buildId: this.isrConfig.buildId,
         });
+      };
+
+      try {
+        if (this.isrConfig.nonBlockingRender) {
+          // If enabled, add to cache without waiting (fire-and-forget)
+          addToCache();
+        } else {
+          // If not enabled, wait for cache addition to complete before proceeding
+          await addToCache();
+        }
+      } catch (error) {
+        console.error('Error adding to cache:', error);
       }
+
       if (mode === 'regenerate') {
         // remove from urlsOnHold because we are done
         this.urlsOnHold = this.urlsOnHold.filter((x) => x !== cacheKey);
         this.logger.log(`Url: ${cacheKey} was regenerated!`);
       }
+
       return { html: finalHtml };
     } catch (error) {
       this.logger.log(`Error regenerating url: ${cacheKey}`, error);
+
       if (mode === 'regenerate') {
         // Ensure removal from urlsOnHold in case of error
         this.urlsOnHold = this.urlsOnHold.filter((x) => x !== cacheKey);
diff --git a/libs/isr/server/src/isr-handler.ts b/libs/isr/server/src/isr-handler.ts
@@ -197,26 +197,29 @@ export class ISRHandler {
         const lastCacheDateDiff = (Date.now() - createdAt) / 1000; // in seconds
 
         if (lastCacheDateDiff > cacheConfig.revalidate) {
-          // regenerate the page without awaiting, so the user gets the cached page immediately
-          if (this.isrConfig.backgroundRevalidation) {
-            this.cacheGeneration.generateWithCacheKey(
+          const generate = () => {
+            return this.cacheGeneration.generateWithCacheKey(
               req,
               res,
               cacheKey,
               config?.providers,
               'regenerate',
             );
-          } else {
-            const result = await this.cacheGeneration.generateWithCacheKey(
-              req,
-              res,
-              cacheKey,
-              config?.providers,
-              'regenerate',
-            );
-            if (result?.html) {
-              finalHtml = result.html;
+          };
+
+          try {
+            // regenerate the page without awaiting, so the user gets the cached page immediately
+            if (this.isrConfig.backgroundRevalidation) {
+              generate();
+            } else {
+              const result = await generate();
+              if (result?.html) {
+                finalHtml = result.html;
+              }
             }
+          } catch (error) {
+            console.error('Error generating html', error);
+            next();
           }
         }
       }
