Merge remote-tracking branch 'ybnd/cache-bust-dynamic-configuration-7.6_CLEAN' into cache-bust-dynamic-configuration-8.x

Author: ybnd

server.ts

@@ -252,7 +252,7 @@ function serverSideRender(req, res, next, sendToUser: boolean = true) {
   commonEngine
     .render({
       bootstrap,
-      documentFilePath: hashedFileMapping.resolve(indexHtml),
+      documentFilePath: indexHtml,
       inlineCriticalCss: environment.ssr.inlineCriticalCss,
       url: `${protocol}://${headers.host}${originalUrl}`,
       publicPath: DIST_FOLDER,
@@ -314,7 +314,11 @@ function serverSideRender(req, res, next, sendToUser: boolean = true) {
  * @param res current response
  */
 function clientSideRender(req, res) {
-  res.sendFile(hashedFileMapping.resolve(indexHtml));
+  res.sendFile(indexHtml, {
+    headers: {
+      'Cache-Control': 'no-cache, no-store',
+    },
+  });
 }
 
 
@@ -325,7 +329,11 @@ function clientSideRender(req, res) {
  */
 function addCacheControl(req, res, next) {
   // instruct browser to revalidate
-  res.header('Cache-Control', environment.cache.control || 'max-age=604800');
+  if (environment.cache.noCacheFiles.includes(req.originalUrl)) {
+    res.header('Cache-Control', 'no-cache, no-store');
+  } else {
+    res.header('Cache-Control', environment.cache.control || 'max-age=604800');
+  }
   next();
 }
 

src/config/cache-config.interface.ts

@@ -7,6 +7,8 @@ export interface CacheConfig extends Config {
   };
   // Cache-Control HTTP Header
   control: string;
+  // These static files should not be cached (paths relative to dist/browser, including the leading slash)
+  noCacheFiles: string[]
   autoSync: AutoSyncConfig;
   // In-memory caches of server-side rendered (SSR) content. These caches can be used to limit the frequency
   // of re-generating SSR pages to improve performance.

src/config/config.server.ts

@@ -256,7 +256,12 @@ export const buildAppConfig = (destConfigPath?: string, mapping?: ServerHashedFi
       mapping.add(destConfigPath, content);
       if (!appConfig.ssr.enabled) {
         // If we're serving for CSR we can retrieve the configuration before JS is loaded/executed
-        mapping.addHeadLink(destConfigPath, 'preload', 'fetch', 'anonymous');
+        mapping.addHeadLink({
+          path: destConfigPath,
+          rel: 'preload',
+          as: 'fetch',
+          crossorigin: 'anonymous',
+        });
       }
     }
 

src/config/default-app-config.ts

@@ -76,6 +76,10 @@ export class DefaultAppConfig implements AppConfig {
     },
     // Cache-Control HTTP Header
     control: 'max-age=604800', // revalidate browser
+    // These static files should not be cached (paths relative to dist/browser, including the leading slash)
+    noCacheFiles: [
+      '/index.html',  // see https://web.dev/articles/http-cache#unversioned-urls
+    ],
     autoSync: {
       defaultTime: 0,
       maxBufferSize: 100,

src/environments/environment.test.ts

@@ -57,6 +57,10 @@ export const environment: BuildConfig = {
     },
     // msToLive: 1000, // 15 minutes
     control: 'max-age=60',
+    // These static files should not be cached (paths relative to dist/browser, including the leading slash)
+    noCacheFiles: [
+      '/index.html',  // see https://web.dev/articles/http-cache#unversioned-urls
+    ],
     autoSync: {
       defaultTime: 0,
       maxBufferSize: 100,

src/modules/dynamic-hash/hashed-file-mapping.server.ts

@@ -29,6 +29,15 @@ import {
   ID,
 } from './hashed-file-mapping';
 
+const HEAD_LINK_CLASS = 'hfm';
+
+interface HeadLink {
+  path: string;
+  rel: string;
+  as: string;
+  crossorigin?: string;
+}
+
 /**
  * Server-side implementation of {@link HashedFileMapping}.
  * Registers dynamically hashed files and stores them in index.html for the browser to use.
@@ -37,7 +46,7 @@ export class ServerHashedFileMapping extends HashedFileMapping {
   public readonly indexPath: string;
   private readonly indexContent: string;
 
-  protected readonly headLinks: Set<string> = new Set();
+  protected readonly headLinks: Set<HeadLink> = new Set();
 
   constructor(
     private readonly root: string,
@@ -114,7 +123,11 @@ export class ServerHashedFileMapping extends HashedFileMapping {
 
       // We know this CSS is likely needed, so wecan avoid a FOUC by retrieving it in advance
       // Angular does the same for global styles, but doesn't "know" about out themes
-      this.addHeadLink(p, 'prefetch', 'style');
+      this.addHeadLink({
+        path: p,
+        rel: 'prefetch',
+        as: 'style',
+      });
 
       this.ensureCompressedFilesAssumingUnchangedContent(p, hp, '.br');
       this.ensureCompressedFilesAssumingUnchangedContent(p, hp, '.gz');
@@ -124,14 +137,17 @@ export class ServerHashedFileMapping extends HashedFileMapping {
   /**
    * Include a head link for a given resource to the index HTML.
    */
-  addHeadLink(path: string, rel: string, as: string, crossorigin?: string) {
-    const href = relative(this.root, this.resolve(path));
+  addHeadLink(headLink: HeadLink) {
+    this.headLinks.add(headLink);
+  }
 
-    if (hasValue(crossorigin)) {
-      this.headLinks.add(`<link rel="${rel}" as="${as}" crossorigin="${crossorigin}" href="${href}">`);
+  private renderHeadLink(link: HeadLink): string {
+    const href = relative(this.root, this.resolve(link.path));
 
+    if (hasValue(link.crossorigin)) {
+      return `<link rel="${link.rel}" as="${link.as}" href="${href}" crossorigin="${link.crossorigin}" class="${HEAD_LINK_CLASS}">`;
     } else {
-      this.headLinks.add(`<link rel="${rel}" as="${as}" href="${href}">`);
+      return `<link rel="${link.rel}" as="${link.as}" href="${href}" class="${HEAD_LINK_CLASS}">`;
     }
   }
 
@@ -156,15 +172,15 @@ export class ServerHashedFileMapping extends HashedFileMapping {
       }, {});
 
     const root = parse(this.indexContent);
-    root.querySelector(`script#${ID}`)?.remove();
+    root.querySelectorAll(`script#${ID}, link.${HEAD_LINK_CLASS}`)?.forEach(e => e.remove());
     root.querySelector('head')
       .appendChild(`<script id="${ID}" type="application/json">${JSON.stringify(out)}</script>` as any);
 
     for (const headLink of this.headLinks) {
       root.querySelector('head')
-        .appendChild(headLink as any);
+          .appendChild(this.renderHeadLink(headLink) as any);
     }
 
-    this.add(this.indexPath, root.toString());
+    writeFileSync(this.indexPath, root.toString());
   }
 }