feat: enable HDS server side rendering support

In practice this fixes the issue where a huge HKI logo flashes briefly when a user navigates to the site. The implementation is pretty much directly copy-pasted from https://github.com/City-of-Helsinki/linkedregistrations-ui/blob/ 7542320c8e2df6349799a1404fecca4a809519ae/src/pages/_document.tsx
City-of-Helsinki · Dec 23, 2022 · 932e980 · 932e980
1 parent 44d7579
commit 932e980
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 0 deletions.
diff --git a/apps/events-helsinki/src/pages/_document.tsx b/apps/events-helsinki/src/pages/_document.tsx
@@ -0,0 +1 @@
+export { Document as default } from 'events-helsinki-components';
diff --git a/apps/hobbies-helsinki/src/pages/_document.tsx b/apps/hobbies-helsinki/src/pages/_document.tsx
@@ -0,0 +1 @@
+export { Document as default } from 'events-helsinki-components';
diff --git a/apps/sports-helsinki/src/pages/_document.tsx b/apps/sports-helsinki/src/pages/_document.tsx
@@ -0,0 +1 @@
+export { Document as default } from 'events-helsinki-components';
diff --git a/packages/components/src/components/document/Document.tsx b/packages/components/src/components/document/Document.tsx
@@ -0,0 +1,39 @@
+import * as hds from 'hds-react';
+import { getCriticalHdsRules } from 'hds-react';
+import NextJsDocument, { Html, Head, Main, NextScript } from 'next/document';
+import type { DocumentContext, DocumentProps } from 'next/document';
+
+type Props = {
+  hdsCriticalRules: string;
+} & DocumentProps;
+
+class Document extends NextJsDocument<Props> {
+  static async getInitialProps(ctx: DocumentContext) {
+    const initialProps = await NextJsDocument.getInitialProps(ctx);
+    const hdsCriticalRules = await getCriticalHdsRules(
+      initialProps.html,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (hds as any).hdsStyles
+    );
+
+    return { ...initialProps, hdsCriticalRules };
+  }
+
+  render() {
+    return (
+      <Html>
+        <Head>
+          <style
+            data-used-styles
+            dangerouslySetInnerHTML={{ __html: this.props.hdsCriticalRules }}
+          />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+export default Document;
diff --git a/packages/components/src/components/index.ts b/packages/components/src/components/index.ts
@@ -35,3 +35,4 @@ export { default as EllipsedTextWithToggle } from './ellipsedTextWithToggle/Elli
 export { default as InfoBlock } from './infoBlock/InfoBlock';
 export { default as MapBox } from './mapBox/MapBox';
 // export { default as MapView } from './mapView/MapView';
+export { default as Document } from './document/Document';