From 932e98087b56d55b6ad2a7d7de64d1ea2cd67826 Mon Sep 17 00:00:00 2001 From: Tuomas Haapala Date: Wed, 21 Dec 2022 23:49:30 +0200 Subject: [PATCH] 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 --- apps/events-helsinki/src/pages/_document.tsx | 1 + apps/hobbies-helsinki/src/pages/_document.tsx | 1 + apps/sports-helsinki/src/pages/_document.tsx | 1 + .../src/components/document/Document.tsx | 39 +++++++++++++++++++ packages/components/src/components/index.ts | 1 + 5 files changed, 43 insertions(+) create mode 100644 apps/events-helsinki/src/pages/_document.tsx create mode 100644 apps/hobbies-helsinki/src/pages/_document.tsx create mode 100644 apps/sports-helsinki/src/pages/_document.tsx create mode 100644 packages/components/src/components/document/Document.tsx diff --git a/apps/events-helsinki/src/pages/_document.tsx b/apps/events-helsinki/src/pages/_document.tsx new file mode 100644 index 000000000..1499341ea --- /dev/null +++ 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 new file mode 100644 index 000000000..1499341ea --- /dev/null +++ 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 new file mode 100644 index 000000000..1499341ea --- /dev/null +++ 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 new file mode 100644 index 000000000..94ff9e166 --- /dev/null +++ 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 { + 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 ( + + +