feat: SSR to SSG

package.json

@@ -11,10 +11,13 @@
     "commit": "cross-env git-cz",
     "dev": "cross-env NODE_ENV=development webpack serve",
     "build-server": "cross-env NODE_ENV=production BUILD_SERVER=true webpack --config ./webpack/server.config.js",
-    "start-debug-server": "node --inspect-brk ./dist/server.js",
+    "start-server-debug": "node --inspect-brk ./dist/server.js",
     "start-server": "node ./dist/server.js",
     "build-client": "cross-env NODE_ENV=production webpack",
-    "build": "npm run build-client && npm run build-server",
+    "build-ssg": "cross-env NODE_ENV=production BUILD_SERVER=true webpack --config ./webpack/server-static-generation.config.js",
+    "run-ssg": "node ./dist/staticGenerator.js",
+    "build-run-ssg": "npm run build-ssg && npm run run-ssg",
+    "build": "npm run build-client && npm run build-run-ssg && npm run build-server",
     "preview": "npx serve -s dist",
     "clean": "rm dist",
     "lint:file": "cross-env eslint . --ext .js,.jsx,.ts,.tsx --fix",
@@ -35,7 +38,7 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.17.5",
+    "@babel/core": "^7.18.0",
     "@babel/plugin-transform-runtime": "^7.17.0",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
@@ -101,13 +104,15 @@
     "webpack-merge": "^5.8.0"
   },
   "dependencies": {
+    "@babel/plugin-transform-regenerator": "^7.18.0",
     "axios": "^0.26.0",
     "clsx": "^1.1.1",
     "effector": "^22.1.2",
     "effector-react": "^22.0.6",
     "effector-storage": "^5.0.0",
     "history": "4.10.1",
     "markdown-to-jsx": "^7.1.6",
+    "node-fetch": "^3.3.2",
     "patronum": "^1.8.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

server/index.tsx

@@ -1,13 +1,17 @@
 import express from 'express';
-import { DIST, PUBLIC_PATH } from '../webpack/constants';
+import { DIST_CLIENT, PUBLIC_PATH } from '../webpack/constants';
+import { markSSRStart } from './performance-mark';
 import { serverRenderer } from './renderer';
 
 const app = express();
 const PORT = 3000;
 
-app.use(PUBLIC_PATH, express.static(DIST));
+app.use(PUBLIC_PATH, express.static(DIST_CLIENT));
 
-app.get('*', serverRenderer);
+app.get('*', (req, res) => {
+  markSSRStart();
+  serverRenderer(req, res);
+});
 
 app.listen(PORT, () => {
   // eslint-disable-next-line no-console

server/performance-mark.ts

@@ -0,0 +1,42 @@
+import fetch from 'node-fetch';
+
+const SSRRenderMark = 'SSRRenderMarks';
+const SSRRenderMarks = {
+  start: `${SSRRenderMark}Start`,
+  end: `${SSRRenderMark}End`,
+};
+
+function reportGauge(name, help, labels, value) {
+  fetch('http://localhost:4001/gauge-metric', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      name,
+      help,
+      labels,
+      value,
+    }),
+  });
+}
+
+export function markSSRStart(detail?) {
+  performance.mark(SSRRenderMarks.start, { detail });
+}
+export function markSSREnd(detail?) {
+  performance.mark(SSRRenderMarks.end, { detail });
+}
+
+const SSRRenderDurationName = 'ssrRenderDuration';
+export function measureSSRRenderDuration() {
+  const ret = performance.measure(SSRRenderDurationName, {
+    start: SSRRenderMarks.start,
+    end: SSRRenderMarks.end,
+  });
+
+  // 还可以通过 getEntriesByName 获取请求URL reqUrl
+  // performance.getEntriesByName(SSRRenderMarks.start)?.[0].detail.reqUrl
+
+  reportGauge(SSRRenderDurationName, `SSR render time cost`, {}, ret.duration);
+}

server/renderer.tsx

@@ -1,29 +1,41 @@
 import React from 'react';
 import { renderToString } from 'react-dom/server';
 import { StaticRouterContext } from 'react-router';
-import { readFileSync } from 'fs';
-import { resolve } from 'path';
 import { App } from '../src/app/ui/app/app';
 import { history } from '../src/shared/router';
-import { DIST } from '../webpack/constants';
+import { markSSREnd, measureSSRRenderDuration } from './performance-mark';
+import { staticPagesURL } from './staticPagesConfig';
+import {
+  StaticPagesFolderName,
+  getDistHTMLContent,
+  getIndexHTMLTemplate,
+  urlToFileName,
+} from './utils';
 
-function getIndexHTMLTemplate() {
-  return readFileSync(resolve(DIST, 'index.html'), {
-    encoding: 'utf-8',
-  });
-}
-
-export function serverRenderer(req, res) {
+export async function serverRenderer(req, res) {
   const context: StaticRouterContext = {};
 
   const reqUrl = req.url;
+  if (staticPagesURL.includes(reqUrl)) {
+    // eslint-disable-next-line no-console
+    console.log(`SSG run for: (${reqUrl})`);
+
+    res.send(
+      getDistHTMLContent(`./${StaticPagesFolderName}/${urlToFileName(reqUrl)}`),
+    );
+
+    return;
+  }
+
   history.push(reqUrl);
 
   const markup = renderToString(<App />);
 
   // eslint-disable-next-line no-console
   console.log(`markup=${markup.substring(0, 100)}`);
 
+  markSSREnd();
+
   if (context.url) {
     // eslint-disable-next-line no-console
     console.log(`context?.url=${context?.url}`);
@@ -37,4 +49,6 @@ export function serverRenderer(req, res) {
       ),
     );
   }
+
+  measureSSRRenderDuration();
 }

server/staticGenerator.tsx

@@ -0,0 +1,44 @@
+import { renderToString } from 'react-dom/server';
+import { App } from '../src/app/ui/app/app';
+import { history } from '../src/shared/router';
+import { staticPages } from './staticPagesConfig';
+import { getIndexHTMLTemplate, saveToFile, urlToFileName } from './utils';
+
+async function staticGenerator({ url, getStaticData }) {
+  // eslint-disable-next-line no-console
+  console.log(`staticGenerator start for ${url}`);
+
+  history.push(url);
+  // 参考 Next.js 的 getStaticProps：https://nextjs.org/docs/pages/building-your-application/rendering/static-site-generation
+  await getStaticData({ url });
+  // eslint-disable-next-line no-console
+  console.log(`staticGenerator getStaticData finish for ${url}`);
+
+  const markup = renderToString(<App />);
+
+  const fileName = urlToFileName(url);
+  saveToFile(
+    fileName,
+    getIndexHTMLTemplate().replace(
+      '<div id="root"></div>',
+      `<div id="root">${markup}</div>`,
+    ),
+  );
+  // eslint-disable-next-line no-console
+  console.log(`staticGenerator finish for ${fileName}`);
+}
+
+async function start(pages) {
+  // eslint-disable-next-line no-plusplus
+  for (let index = 0; index < pages.length; index++) {
+    const page = pages[index];
+    try {
+      // eslint-disable-next-line no-await-in-loop
+      await staticGenerator(page);
+    } catch (err) {
+      console.error(`staticGenerator ERROR:`, err);
+    }
+  }
+}
+
+start(staticPages);

server/staticPagesConfig.ts

@@ -0,0 +1,21 @@
+import { getArticleFx } from '../src/pages/article/model/store';
+
+export const staticPagesURL = [
+  '/article/If-we-quantify-the-alarm-we-can-get-to-the-FTP-pixel-through-the-online-SSL-interface!-120863',
+  '/article/You-cant-transmit-the-firewall-without-copying-the-1080p-SDD-interface!-120863',
+];
+
+async function articlPageGetStaticData({ url }) {
+  await getArticleFx(url.split('article/')?.[1]);
+}
+
+export const staticPages = [
+  {
+    url: staticPagesURL[0],
+    getStaticData: articlPageGetStaticData,
+  },
+  {
+    url: staticPagesURL[1],
+    getStaticData: articlPageGetStaticData,
+  },
+];

server/utils.ts

@@ -0,0 +1,32 @@
+import { readFileSync, writeFileSync, existsSync, mkdirSync } from 'fs';
+import { resolve } from 'path';
+import { DIST } from '../webpack/constants';
+
+export const StaticPagesFolderName = 'static-pages';
+
+export function getFileContent(filePath) {
+  return readFileSync(filePath, {
+    encoding: 'utf-8',
+  });
+}
+
+export function getDistHTMLContent(filePath) {
+  return getFileContent(resolve(DIST, filePath));
+}
+
+export function getIndexHTMLTemplate() {
+  return getDistHTMLContent('./client/index.html');
+}
+
+export function saveToFile(name, content) {
+  const dir = resolve(__dirname, '../dist/static-pages');
+  if (!existsSync(dir)) {
+    mkdirSync(dir, { recursive: true });
+  }
+
+  return writeFileSync(resolve(dir, name), content);
+}
+
+export function urlToFileName(url, ext = 'html') {
+  return `${url.split('/').pop()}.${ext}`;
+}

src/pages/article/model/api.ts

@@ -2,16 +2,27 @@ import * as article from '@/entities/article';
 import * as http from '@/shared/http';
 
 export const getArticle = (slug: string) => {
+  // eslint-disable-next-line no-console
+  console.log(`getArticle slug=${slug}`);
+
   return http
     .request<{ article: article.types.Article }>({
       url: `articles/${slug}`,
       method: 'get',
     })
-    .then((response) => response.article)
+    .then((response) => {
+      // eslint-disable-next-line no-console
+      console.log(`getArticle response.article=${response.article}`);
+
+      return response.article;
+    })
     .then(({ createdAt, ...rest }) => ({
       ...rest,
       createdAt: new Date(createdAt).toDateString(),
-    }));
+    }))
+    .catch((err) => {
+      console.error(`getArticle ERROR:${err}`);
+    });
 };
 
 export const deleteArticle = (slug: string) => {

src/shared/library/utils.ts

@@ -0,0 +1,3 @@
+export function isServer() {
+  return typeof window === 'undefined';
+}

webpack/common.config.js

@@ -1,17 +1,13 @@
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
-const { SRC, FAVICON } = require('./constants');
+const { SRC } = require('./constants');
 
 const configPlugins = [
   new BundleAnalyzerPlugin({
     analyzerMode: 'static',
     defaultSizes: 'gzip',
     openAnalyzer: false,
   }),
-  new FaviconsWebpackPlugin({
-    logo: FAVICON,
-  }),
 ];
 
 if (!process.env.BUILD_SERVER) {

webpack/constants.js

@@ -2,5 +2,6 @@ const { resolve } = require('path');
 
 exports.SRC = resolve(__dirname, '../src');
 exports.FAVICON = resolve(__dirname, '../public', 'favicon.png');
-exports.DIST = resolve(__dirname, '../dist/client');
+exports.DIST_CLIENT = resolve(__dirname, '../dist/client');
+exports.DIST = resolve(__dirname, '../dist');
 exports.PUBLIC_PATH = '/static';

webpack/development.config.js

@@ -1,12 +1,12 @@
 const { resolve } = require('path');
 const { DefinePlugin, HotModuleReplacementPlugin } = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const { DIST } = require('./constants');
+const { DIST_CLIENT } = require('./constants');
 
 module.exports = {
   mode: 'development',
   output: {
-    path: resolve(DIST),
+    path: resolve(DIST_CLIENT),
     publicPath: '/',
     filename: 'bundle.js',
   },

webpack/production.config.js

@@ -5,13 +5,13 @@ const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const { merge } = require('webpack-merge');
-const { DIST, SRC, PUBLIC_PATH } = require('./constants');
+const { DIST_CLIENT, SRC, PUBLIC_PATH } = require('./constants');
 const cssModuleRules = require('./cssModuleRules');
 
 module.exports = merge(cssModuleRules, {
   mode: 'production',
   output: {
-    path: DIST,
+    path: DIST_CLIENT,
     publicPath: PUBLIC_PATH,
     filename: '[name].[contenthash].js',
   },
@@ -41,7 +41,7 @@ module.exports = merge(cssModuleRules, {
       patterns: [
         {
           from: resolve(SRC, '404.html'),
-          to: DIST,
+          to: DIST_CLIENT,
         },
       ],
       options: {

webpack/server-static-generation.config.js

@@ -0,0 +1,10 @@
+const { merge } = require('webpack-merge');
+const path = require('path');
+const serverConfig = require('./server.config');
+
+module.exports = merge(serverConfig, {
+  entry: path.resolve(__dirname, '../server/staticGenerator.tsx'),
+  output: {
+    filename: 'staticGenerator.js',
+  },
+});