Inline some CSS upfront for performance. #2167

2023-01-10 00:33:54 -08:00
parent cfaeda94b0
commit 37cd19c567
1 changed files with 24 additions and 1 deletions
--- a/web/pages/_document.tsx
+++ b/web/pages/_document.tsx
@@ -1,9 +1,32 @@
+/* eslint-disable react/no-danger */
 import { Html, Head, Main, NextScript } from 'next/document';

+import { readFileSync } from 'fs';
+import { join } from 'path';
+
+class InlineStylesHead extends Head {
+  getCssLinks: Head['getCssLinks'] = ({ allFiles }) => {
+    const { assetPrefix } = this.context;
+    if (!allFiles || allFiles.length === 0) return null;
+    return allFiles
+      .filter((file: any) => /\.css$/.test(file))
+      .map((file: any) => (
+        <style
+          key={file}
+          nonce={this.props.nonce}
+          data-href={`${assetPrefix}/_next/${file}`}
+          dangerouslySetInnerHTML={{
+            __html: readFileSync(join(process.cwd(), '.next', file), 'utf-8'),
+          }}
+        />
+      ));
+  };
+}
+
 export default function Document() {
  return (
    <Html lang="en">
-      <Head />
+      <InlineStylesHead />
      <body>
        <Main />
        <NextScript />