refactor: set Vary: User-Agent response header to SSR content

This enables more efficient caching and improves SEO by telling browsers etc. that the content varies by user agent (mobile vs desktop).

CHANGELOG.md

@@ -12,6 +12,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/), and this
 
 - Config options to enable server-side rendering of the collection side menu and prebuild static versions of the menu: `config.app.ssr.collectionSideMenu` and `config.app.prebuild.staticCollectionMenus`. Both options are booleans. `config.app.ssr.collectionSideMenu` defaults to `false`, which means that rendering of the dynamic collection side menu is not performed on the server, but deferred to the browser. This increases performance on the server for projects that have very large collections (hundreds of texts/collection). `config.app.prebuild.staticCollectionMenus` defaults to `true`, which means that static HTML versions of each collection menu, in each project language, are generated when the Docker image of the app is built. The static collection menus are included in the server-side rendering of collection pages, and then replaced with the dynamic collection menus in the browser. This improves SEO of collection pages when server-side rendering of collection menus is disabled, without degrading the user experience. Setting both new options to `false` puts the least load on the server, but makes the web app less crawlable by robots. **Notice** that the static menus are generated during *build-time* – if the collection table of contents are updated in the backend, a new build has to be created for the changes to be reflected in the static menus.
 - Config option to control the generation of a sitemap file in a prebuild step: `config.app.prebuild.sitemap`. Defaults to `true`.
+- `Vary: User-Agent` HTTP response header to server-side rendered content. This enables more efficient caching and improves SEO by telling browsers etc. that the content varies by user agent (mobile vs desktop).
 
 ### Changed
 

server.ts

@@ -50,6 +50,9 @@ export function app(lang: string): express.Express {
   server.get('*', (req, res, next) => {
     const { protocol, originalUrl, baseUrl, headers } = req;
 
+    // Set Vary: User-Agent header for dynamically rendered pages
+    res.setHeader('Vary', 'User-Agent');
+
     // * Inlining critical CSS is disabled here and in angular.json:
     // * architect.build.configurations.production.optimization.styles.inlineCritical
     commonEngine