WIP: SSR

Author: velopert

config/webpack.config.js

@@ -1,4 +1,4 @@
-'use strict';
+
 
 const fs = require('fs');
 const path = require('path');
@@ -24,6 +24,7 @@ const getClientEnvironment = require('./env');
 const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
 const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin');
 const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
+const LoadablePlugin = require('@loadable/webpack-plugin');
 
 const postcssNormalize = require('postcss-normalize');
 
@@ -36,7 +37,7 @@ const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
 const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
 
 const imageInlineSizeLimit = parseInt(
-  process.env.IMAGE_INLINE_SIZE_LIMIT || '10000'
+  process.env.IMAGE_INLINE_SIZE_LIMIT || '10000',
 );
 
 // Check if TypeScript is setup
@@ -129,7 +130,7 @@ module.exports = function(webpackEnv) {
           options: {
             sourceMap: true,
           },
-        }
+        },
       );
     }
     return loaders;
@@ -280,7 +281,7 @@ module.exports = function(webpackEnv) {
       // if there are any conflicts. This matches Node resolution mechanism.
       // https://github.com/facebook/create-react-app/issues/253
       modules: ['node_modules', paths.appNodeModules].concat(
-        modules.additionalModulePaths || []
+        modules.additionalModulePaths || [],
       ),
       // These are the reasonable defaults supported by the Node ecosystem.
       // We also include JSX as a common component filename extension to support
@@ -339,7 +340,6 @@ module.exports = function(webpackEnv) {
                 formatter: require.resolve('react-dev-utils/eslintFormatter'),
                 eslintPath: require.resolve('eslint'),
                 resolvePluginsRelativeTo: __dirname,
-                
               },
               loader: require.resolve('eslint-loader'),
             },
@@ -370,9 +370,9 @@ module.exports = function(webpackEnv) {
               loader: require.resolve('babel-loader'),
               options: {
                 customize: require.resolve(
-                  'babel-preset-react-app/webpack-overrides'
+                  'babel-preset-react-app/webpack-overrides',
                 ),
-                
+
                 plugins: [
                   [
                     require.resolve('babel-plugin-named-asset-import'),
@@ -414,7 +414,7 @@ module.exports = function(webpackEnv) {
                 cacheDirectory: true,
                 // See #6846 for context on why cacheCompression is disabled
                 cacheCompression: false,
-                
+
                 // Babel sourcemaps are needed for debugging into node_modules
                 // code.  Without the options below, debuggers like VSCode
                 // show incorrect code and set breakpoints on the wrong lines.
@@ -465,7 +465,7 @@ module.exports = function(webpackEnv) {
                   importLoaders: 2,
                   sourceMap: isEnvProduction && shouldUseSourceMap,
                 },
-                'sass-loader'
+                'sass-loader',
               ),
               // Don't consider CSS imports dead code even if the
               // containing package claims to have no side effects.
@@ -485,7 +485,7 @@ module.exports = function(webpackEnv) {
                     getLocalIdent: getCSSModuleLocalIdent,
                   },
                 },
-                'sass-loader'
+                'sass-loader',
               ),
             },
             // "file" loader makes sure those assets get served by WebpackDevServer.
@@ -534,8 +534,8 @@ module.exports = function(webpackEnv) {
                   minifyURLs: true,
                 },
               }
-            : undefined
-        )
+            : undefined,
+        ),
       ),
       // Inlines the webpack runtime script. This script is too small to warrant
       // a network request.
@@ -593,7 +593,7 @@ module.exports = function(webpackEnv) {
             return manifest;
           }, seed);
           const entrypointFiles = entrypoints.main.filter(
-            fileName => !fileName.endsWith('.map')
+            fileName => !fileName.endsWith('.map'),
           );
 
           return {
@@ -626,6 +626,7 @@ module.exports = function(webpackEnv) {
             new RegExp('/[^/?]+\\.[^/]+$'),
           ],
         }),
+      isEnvProduction && new LoadablePlugin(),
       // TypeScript type checking
       useTypeScript &&
         new ForkTsCheckerWebpackPlugin({

config/webpack.config.server.js

@@ -1,3 +1,4 @@
+const nodeExternals = require('webpack-node-externals');
 const paths = require('./paths');
 const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
 const webpack = require('webpack');
@@ -128,6 +129,13 @@ module.exports = {
   },
   resolve: {
     modules: ['node_modules'],
+    extensions: paths.moduleFileExtensions
+      .map(ext => `.${ext}`)
+      .filter(ext => true || !ext.includes('ts')),
   },
   plugins: [new webpack.DefinePlugin(env.stringified)],
+  optimization: {
+    minimize: false,
+  },
+  externals: [nodeExternals()],
 };

package.json

@@ -19,6 +19,7 @@
     "@types/date-fns": "^2.6.0",
     "@types/jest": "^24.0.0",
     "@types/koa": "^2.11.0",
+    "@types/koa-static": "^4.0.1",
     "@types/loadable__component": "^5.10.0",
     "@types/loadable__server": "^5.9.1",
     "@types/node": "^12.0.0",
@@ -69,6 +70,7 @@
     "jest-resolve": "24.9.0",
     "jest-watch-typeahead": "0.4.2",
     "koa": "^2.11.0",
+    "koa-static": "^5.0.0",
     "mini-css-extract-plugin": "0.8.0",
     "optimize-css-assets-webpack-plugin": "5.0.3",
     "pnp-webpack-plugin": "1.5.0",
@@ -123,6 +125,7 @@
   "scripts": {
     "start": "node scripts/start.js",
     "build": "node scripts/build.js",
+    "build:server": "node scripts/build.server.js",
     "test": "node scripts/test.js"
   },
   "eslintConfig": {
@@ -196,7 +199,11 @@
   "babel": {
     "presets": [
       "react-app"
-    ]
+    ],
+    "plugins": ["@loadable/babel-plugin"]
   },
-  "proxy": "http://localhost:5000"
+  "proxy": "http://localhost:5000",
+  "devDependencies": {
+    "@loadable/webpack-plugin": "^5.7.1"
+  }
 }

src/index.server.tsx

@@ -1,13 +1,13 @@
 import Koa from 'koa';
-import React from 'react';
-import ReactDOMServer from 'react-dom/server';
+import path from 'path';
+import serve from 'koa-static';
+import serverRender from './server/serverRender';
 
 const app = new Koa();
 
-app.use(ctx => {
-  const html = ReactDOMServer.renderToString(<div>Hello Koa!</div>);
-  ctx.body = html;
-});
+app.use(serve(path.resolve('./build')));
+
+app.use(serverRender);
 
 app.listen(3001, () => {
   console.log('SSR server is listening to http://localhost:3001');

src/server/Html.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { ChunkExtractor } from '@loadable/server';
+
+export type HtmlProps = {
+  content: string;
+  styledElement: React.ReactNode; // styled-components
+  extractor: ChunkExtractor;
+  apolloState: any;
+  reduxState: any;
+};
+
+function Html({
+  content,
+  styledElement,
+  extractor,
+  apolloState,
+  reduxState,
+}: HtmlProps) {
+  return (
+    <html>
+      {/* <head dangerouslySetInnerHTML={{ __html: head }}></head> */}
+      <head>
+        {styledElement}
+        {extractor.getLinkElements}
+        {extractor.getStyleElements}
+      </head>
+      <body>
+        <div id="root" dangerouslySetInnerHTML={{ __html: content }}></div>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `window.__APOLLO_STATE__=${JSON.stringify(
+              apolloState,
+            ).replace(/</g, '\\u003c')};`,
+          }}
+        />
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `window.__REDUX_STATE__=${JSON.stringify(
+              reduxState,
+            ).replace(/</g, '\\u003c')};`,
+          }}
+        />
+        {extractor.getScriptElements}
+      </body>
+    </html>
+  );
+}
+
+export default Html;

src/server/serverRender.tsx

@@ -0,0 +1,77 @@
+import path from 'path';
+import React from 'react';
+import ReactDOMServer from 'react-dom/server';
+import { ApolloProvider } from '@apollo/react-common';
+import { ApolloClient } from 'apollo-client';
+import { createHttpLink } from 'apollo-link-http';
+import { InMemoryCache } from 'apollo-boost';
+import { getDataFromTree } from '@apollo/react-ssr';
+import { Middleware } from 'koa';
+import { createStore } from 'redux';
+import { Provider } from 'react-redux';
+import { StaticRouter } from 'react-router';
+import { ServerStyleSheet, StyleSheetManager } from 'styled-components';
+import rootReducer from '../modules';
+import App from '../App';
+import Html from './Html';
+import { ChunkExtractor, ChunkExtractorManager } from '@loadable/server';
+
+const statsFile = path.resolve('../build/loadable-stats.json');
+
+const serverRender: Middleware = async ctx => {
+  // const html = ReactDOMServer.renderToString(<div>Hello Koa!</div>);
+
+  // prepare redux store
+  const store = createStore(rootReducer);
+  // prepare apollo client
+  const client = new ApolloClient({
+    ssrMode: true,
+    link: createHttpLink({
+      uri: 'http://localhost:5000/graphql',
+    }),
+    cache: new InMemoryCache(),
+  });
+
+  const context = {};
+  const sheet = new ServerStyleSheet();
+  const extractor = new ChunkExtractor({ statsFile });
+
+  const Root = (
+    <ChunkExtractorManager extractor={extractor}>
+      <StyleSheetManager sheet={sheet}>
+        <Provider store={store}>
+          <ApolloProvider client={client}>
+            <StaticRouter location={ctx.url} context={context}>
+              <App />
+            </StaticRouter>
+          </ApolloProvider>
+        </Provider>
+      </StyleSheetManager>
+    </ChunkExtractorManager>
+  );
+
+  try {
+    await getDataFromTree(Root);
+  } catch (e) {
+    ctx.throw(500);
+    return;
+  }
+
+  const content = ReactDOMServer.renderToString(Root);
+  const initialState = client.extract();
+  const styledElement = sheet.getStyleElement();
+
+  const html = (
+    <Html
+      content={content}
+      apolloState={initialState}
+      reduxState={store.getState()}
+      styledElement={styledElement}
+      extractor={extractor}
+    />
+  );
+
+  ctx.body = `<!doctype html>\n${ReactDOMServer.renderToStaticMarkup(html)}`;
+};
+
+export default serverRender;