Implement Helmet for SSR

velopert · velopert · commit 242d7e20f15d · 2020-01-24T00:00:20.000+09:00
diff --git a/package.json b/package.json
@@ -37,6 +37,7 @@
     "@types/react": "^16.9.0",
     "@types/react-beautiful-dnd": "^11.0.3",
     "@types/react-dom": "^16.9.0",
+    "@types/react-helmet": "^5.0.15",
     "@types/react-helmet-async": "^1.0.3",
     "@types/react-outside-click-handler": "^1.3.0",
     "@types/react-redux": "^7.1.5",
diff --git a/src/server/Html.tsx b/src/server/Html.tsx
@@ -1,12 +1,14 @@
 import React from 'react';
 import { ChunkExtractor } from '@loadable/server';
+import { HelmetData } from 'react-helmet';
 
 export type HtmlProps = {
   content: string;
   styledElement: React.ReactNode; // styled-components
   extractor: ChunkExtractor;
   apolloState: any;
   reduxState: any;
+  helmet: HelmetData;
 };
 
 /*
@@ -63,11 +65,15 @@ function Html({
   extractor,
   apolloState,
   reduxState,
+  helmet,
 }: HtmlProps) {
   return (
     <html>
       {/* <head dangerouslySetInnerHTML={{ __html: head }}></head> */}
       <head>
+        {helmet.title.toComponent()}
+        {helmet.link.toComponent()}
+        {helmet.meta.toComponent()}
         {styledElement}
         {extractor.getLinkElements()}
         {extractor.getStyleElements()}
diff --git a/src/server/serverRender.tsx b/src/server/serverRender.tsx
@@ -17,6 +17,7 @@ import App from '../App';
 import Html from './Html';
 import { ChunkExtractor, ChunkExtractorManager } from '@loadable/server';
 import CacheManager from './CacheManager';
+import { HelmetProvider, FilledContext } from 'react-helmet-async';
 
 const statsFile = path.resolve(__dirname, '../build/loadable-stats.json');
 const cacheManager = new CacheManager();
@@ -66,17 +67,21 @@ const serverRender = async ({ url, loggedIn, cookie }: SSROption) => {
     publicPath: 'https://static.velog.io/',
   });
 
+  const helmetContext = {} as FilledContext;
+
   const Root = (
     <ChunkExtractorManager extractor={extractor}>
-      <StyleSheetManager sheet={sheet.instance}>
-        <Provider store={store}>
-          <ApolloProvider client={client}>
-            <StaticRouter location={url} context={context}>
-              <App />
-            </StaticRouter>
-          </ApolloProvider>
-        </Provider>
-      </StyleSheetManager>
+      <HelmetProvider context={helmetContext}>
+        <StyleSheetManager sheet={sheet.instance}>
+          <Provider store={store}>
+            <ApolloProvider client={client}>
+              <StaticRouter location={url} context={context}>
+                <App />
+              </StaticRouter>
+            </ApolloProvider>
+          </Provider>
+        </StyleSheetManager>
+      </HelmetProvider>
     </ChunkExtractorManager>
   );
 
@@ -97,6 +102,7 @@ const serverRender = async ({ url, loggedIn, cookie }: SSROption) => {
       reduxState={store.getState()}
       styledElement={styledElement}
       extractor={extractor}
+      helmet={helmetContext.helmet}
     />
   );
 
diff --git a/yarn.lock b/yarn.lock
@@ -1751,6 +1751,13 @@
   dependencies:
     react-helmet-async "*"
 
+"@types/react-helmet@^5.0.15":
+  version "5.0.15"
+  resolved "https://registry.yarnpkg.com/@types/react-helmet/-/react-helmet-5.0.15.tgz#af0370617307e9f062c6aee0f1f5588224ce646e"
+  integrity sha512-CCjqvecDJTXRrHG8aTc2YECcQCl26za/q+NaBRvy/wtm0Uh38koM2dpv2bG1xJV4ckz3t1lm2/5KU6nt2s9BWg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-native@*":
   version "0.60.25"
   resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.60.25.tgz#65cb0bf5dd0631079215b63525458e4123c1c90e"
