Don't hash or cache the index file

This didn't work well in one specific case: requests without a path (e.g. https://demo.dspace.org)
Such requests would result in a 304 redirect directly to index.html, losing the hashed file mapping and causing it to get cached.
Then it could remain in the cache across rebuilds.

Solutions:
- Don't try to hash index.html, but modify it in place
- Introduce configuration to disable caching for specific static files and apply this to index.html to prevent similar problems
- Don't let browsers cache index.html when it's served for CSR under another path

Author: ybnd

config/config.example.yml

@@ -38,6 +38,9 @@ cache:
   # NOTE: When updates are made to compiled *.js files, it will automatically bypass this browser cache, because
   # all compiled *.js files include a unique hash in their name which updates when content is modified.
   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'
   autoSync:
     defaultTime: 0
     maxBufferSize: 100

server.ts

@@ -261,7 +261,7 @@ function ngApp(req, res) {
  */
 function serverSideRender(req, res, sendToUser: boolean = true) {
   // Render the page via SSR (server side rendering)
-  res.render(hashedFileMapping.resolve(indexHtml), {
+  res.render(indexHtml, {
     req,
     res,
     preboot: environment.universal.preboot,
@@ -303,7 +303,11 @@ function serverSideRender(req, res, 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',
+    },
+  });
 }
 
 
@@ -314,7 +318,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/app/shared/theme-support/theme.service.spec.ts

@@ -1,7 +1,6 @@
 import { of as observableOf } from 'rxjs';
 import { TestBed } from '@angular/core/testing';
 import { provideMockActions } from '@ngrx/effects/testing';
-import { HashedFileMapping } from '../../../modules/dynamic-hash/hashed-file-mapping';
 import { LinkService } from '../../core/cache/builders/link.service';
 import { hot } from 'jasmine-marbles';
 import { SetThemeAction } from './theme.actions';

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

@@ -2,7 +2,6 @@ import { red, blue, green, bold } from 'colors';
 import { existsSync, readFileSync, writeFileSync } from 'fs';
 import { load } from 'js-yaml';
 import { join } from 'path';
-import { environment } from '../environments/environment';
 import { ServerHashedFileMapping } from '../modules/dynamic-hash/hashed-file-mapping.server';
 
 import { AppConfig } from './app-config.interface';
@@ -175,7 +174,7 @@ const buildBaseUrl = (config: ServerConfig): void => {
  */
 export const buildAppConfig = (destConfigPath?: string, mapping?: ServerHashedFileMapping): AppConfig => {
   // start with default app config
-  const appConfig: BuildConfig = new DefaultAppConfig() as BuildConfig;
+  const appConfig: AppConfig = new DefaultAppConfig();
 
   // determine which dist app config by environment
   const env = getEnvironment();
@@ -245,9 +244,14 @@ export const buildAppConfig = (destConfigPath?: string, mapping?: ServerHashedFi
     writeFileSync(destConfigPath, content);
     if (mapping !== undefined) {
       mapping.add(destConfigPath, content);
-      if (!appConfig.universal.preboot) {
+      if (!(appConfig as BuildConfig).universal?.preboot) {
         // 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

@@ -70,6 +70,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

@@ -51,6 +51,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

@@ -28,6 +28,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.
@@ -36,7 +45,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,
@@ -113,7 +122,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');
@@ -123,14 +136,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}">`;
     }
   }
 
@@ -155,15 +171,15 @@ export class ServerHashedFileMapping extends HashedFileMapping {
                      }, {});
 
     let 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());
   }
 }