feat: render styles on the server side

bcgov · Nov 17, 2021 · cfb955b · cfb955b
1 parent 6b1b280
commit cfb955b
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 3 deletions.
diff --git a/app/.babelrc b/app/.babelrc
@@ -2,6 +2,7 @@
   "presets": ["next/babel"],
   "plugins": [
     ["relay"],
+    ["styled-components", { "ssr": true }],
     [
       "module-resolver",
       { "root": [".", ".."], "extensions": [".js", ".jsx", ".ts", ".tsx"] }

diff --git a/app/package.json b/app/package.json
@@ -29,6 +29,7 @@
     "@typescript-eslint/parser": "^4.29.3",
     "babel-plugin-module-resolver": "^4.1.0",
     "babel-plugin-relay": "^12.0.0",
+    "babel-plugin-styled-components": "^1.13.3",
     "cypress": "^8.7.0",
     "eslint": "^7.2.0",
     "eslint-config-airbnb-typescript": "^14.0.1",
@@ -88,6 +89,7 @@
     "relay-nextjs": "^0.4.1",
     "relay-runtime": "^12.0.0",
     "relay-test-utils": "^12.0.0",
+    "styled-components": "^5.2.1",
     "webpack": "^5.58.2"
   }
 }
diff --git a/app/pages/_document.tsx b/app/pages/_document.tsx
@@ -7,6 +7,7 @@ import Document, {
 } from "next/document";
 
 import { createRelayDocument, RelayDocument } from "relay-nextjs/document";
+import { ServerStyleSheet } from "styled-components";
 
 interface DocumentProps {
   relayDocument: RelayDocument;
@@ -15,18 +16,29 @@ interface DocumentProps {
 class MyDocument extends Document<DocumentProps> {
   static async getInitialProps(ctx: DocumentContext) {
     const relayDocument = createRelayDocument();
+    const sheet = new ServerStyleSheet();
 
     const renderPage = ctx.renderPage;
     ctx.renderPage = () =>
       renderPage({
-        enhanceApp: (App) => relayDocument.enhance(App),
+        enhanceApp: (App) => (props) => {
+          const AppWithRelay = relayDocument.enhance(App);
+          return sheet.collectStyles(<AppWithRelay {...props} />);
+        },
       });
 
     const initialProps = await Document.getInitialProps(ctx);
-
+    const styles = (
+      <>
+        {initialProps.styles}
+        {sheet.getStyleElement()}
+      </>
+    );
+    sheet.seal();
     return {
       ...initialProps,
       relayDocument,
+      styles,
     };
   }
 

diff --git a/app/yarn.lock b/app/yarn.lock
@@ -2511,7 +2511,7 @@ babel-plugin-relay@^12.0.0:
   dependencies:
     babel-plugin-macros "^2.0.0"
 
-"babel-plugin-styled-components@>= 1.12.0":
+"babel-plugin-styled-components@>= 1.12.0", babel-plugin-styled-components@^1.13.3:
   version "1.13.3"
   resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.13.3.tgz#1f1cb3927d4afa1e324695c78f690900e3d075bc"
   integrity sha512-meGStRGv+VuKA/q0/jXxrPNWEm4LPfYIqxooDTdmh8kFsP/Ph7jJG5rUPwUPX3QHUvggwdbgdGpo88P/rRYsVw==