Merge pull request #2067 from atmire/disable-inline-css

Add configuration option to disable inlined CSS in SSR HTML

config/config.example.yml

@@ -17,6 +17,13 @@ ui:
   # Trust X-FORWARDED-* headers from proxies (default = true)
   useProxies: true
 
+universal:
+  # Whether to inline "critical" styles into the server-side rendered HTML.
+  # Determining which styles are critical is a relatively expensive operation;
+  # this option can be disabled to boost server performance at the expense of
+  # loading smoothness.
+  inlineCriticalCss: true
+
 # The REST API server settings
 # NOTE: these settings define which (publicly available) REST API to use. They are usually
 # 'synced' with the 'dspace.server.url' setting in your backend's local.cfg.

server.ts

@@ -131,6 +131,7 @@ export function app() {
   server.engine('html', (_, options, callback) =>
     ngExpressEngine({
       bootstrap,
+      inlineCriticalCss: environment.universal.inlineCriticalCss,
       providers: [
         {
           provide: REQUEST,

src/config/universal-config.interface.ts

@@ -4,4 +4,13 @@ export interface UniversalConfig extends Config {
   preboot: boolean;
   async: boolean;
   time: boolean;
+
+  /**
+   * Whether to inline "critical" styles into the server-side rendered HTML.
+   *
+   * Determining which styles are critical is a relatively expensive operation;
+   * this option can be disabled to boost server performance at the expense of
+   * loading smoothness.
+   */
+  inlineCriticalCss?: boolean;
 }

src/environments/environment.production.ts

@@ -8,5 +8,6 @@ export const environment: Partial<BuildConfig> = {
     preboot: true,
     async: true,
     time: false,
+    inlineCriticalCss: true,
   },
 };

src/environments/environment.ts

@@ -13,6 +13,7 @@ export const environment: Partial<BuildConfig> = {
     preboot: false,
     async: true,
     time: false,
+    inlineCriticalCss: true,
   },
 };