{"id":222,"date":"2026-02-01T19:25:24","date_gmt":"2026-02-01T11:25:24","guid":{"rendered":"http:\/\/localhost:8080\/%e6%88%91%e5%a6%82%e4%bd%95%e4%bb%8e%e9%9b%b6%e6%9e%84%e5%bb%ba%e4%b8%80%e4%b8%aa%e7%94%9f%e4%ba%a7%e7%ba%a7-react-ssr-%e6%a1%86%e6%9e%b6\/"},"modified":"2026-02-01T19:25:24","modified_gmt":"2026-02-01T11:25:24","slug":"%e6%88%91%e5%a6%82%e4%bd%95%e4%bb%8e%e9%9b%b6%e6%9e%84%e5%bb%ba%e4%b8%80%e4%b8%aa%e7%94%9f%e4%ba%a7%e7%ba%a7-react-ssr-%e6%a1%86%e6%9e%b6","status":"publish","type":"post","link":"https:\/\/erishen.cn\/?p=222","title":{"rendered":"\u6211\u5982\u4f55\u4ece\u96f6\u6784\u5efa\u4e00\u4e2a\u751f\u4ea7\u7ea7 React SSR \u6846\u67b6"},"content":{"rendered":"

\u524d\u8a00<\/h2>\n

\u5728 React \u751f\u6001\u7cfb\u7edf\u4e2d\uff0cNext.js \u4f5c\u4e3a SSR \u6846\u67b6\u7684\u4ee3\u8868\uff0c\u4ee5\u5176\u5f00\u7bb1\u5373\u7528\u7684\u4f53\u9a8c\u548c\u5f3a\u5927\u7684\u529f\u80fd\u6df1\u53d7\u5f00\u53d1\u8005\u559c\u7231\u3002\u4f46\u5bf9\u4e8e\u60f3\u8981\u5b8c\u5168\u638c\u63a7\u6784\u5efa\u6d41\u7a0b<\/strong>\u3001\u6df1\u5ea6\u5b9a\u5236\u90e8\u7f72\u65b9\u6848<\/strong>\u3001\u6216\u8005\u53ea\u662f\u60f3\u5b66\u4e60 SSR \u5e95\u5c42\u539f\u7406<\/strong>\u7684\u5f00\u53d1\u8005\u6765\u8bf4\uff0cNext.js \u7684"\u9ed1\u76d2"\u7279\u6027\u53cd\u800c\u6210\u4e3a\u4e86\u4e00\u79cd\u9650\u5236\u3002<\/p>\n

\u6700\u8fd1\uff0c\u6211\u82b1\u4e86\u51e0\u4e2a\u6708\u65f6\u95f4\uff0c\u4ece\u96f6\u5f00\u59cb\u6784\u5efa\u4e86\u4e00\u4e2a\u8f7b\u91cf\u7ea7\u4f46\u529f\u80fd\u5b8c\u6574\u7684 React SSR \u6846\u67b6\u2014\u2014NSBP (Node React SSR by Webpack)<\/strong>\u3002\u4eca\u5929\uff0c\u6211\u60f3\u5206\u4eab\u4e00\u4e0b\u8fd9\u4e2a\u9879\u76ee\u7684\u5f00\u53d1\u5386\u7a0b\u3001\u6280\u672f\u9009\u578b\u3001\u6838\u5fc3\u7279\u6027\u4ee5\u53ca\u4ece\u4e2d\u83b7\u5f97\u7684\u5b9e\u6218\u7ecf\u9a8c\u3002<\/p>\n

\n

\u5728\u7ebf\u6f14\u793a<\/strong>: https:\/\/nsbp.erishen.cn\/<\/a>
\nGitHub<\/strong>: https:\/\/github.com\/erishen\/nsbp<\/a><\/p>\n<\/blockquote><\/div>\n

\n

\u4e00\u3001\u4e3a\u4ec0\u4e48\u9009\u62e9\u81ea\u5efa\u800c\u4e0d\u662f Next.js\uff1f<\/h2>\n

1.1 \u5b8c\u5168\u638c\u63a7\u6784\u5efa\u6d41\u7a0b<\/h3>\n

Next.js \u7684\u5f3a\u5927\u6765\u81ea\u4e8e\u5b83\u7684\u81ea\u52a8\u5316\uff0c\u4f46\u8fd9\u4e5f\u610f\u5473\u7740\u4f60\u5931\u53bb\u4e86\u4e00\u4e9b\u63a7\u5236\u6743\uff1a<\/p>\n

# Next.js \u7684\u6784\u5efa\u8fc7\u7a0b\uff08\u9ed1\u76d2\uff09\nnext build\n# \u2192 \u81ea\u52a8\u8def\u7531\n# \u2192 \u81ea\u52a8\u4ee3\u7801\u5206\u5272\n# \u2192 \u81ea\u52a8\u56fe\u7247\u4f18\u5316\n# \u2192 ... \u4f60\u770b\u4e0d\u5230\u7684\u51e0\u767e\u4e2a\u6b65\u9aa4\n<\/code><\/pre><\/div>\n
\u800c\u5728 NSBP \u4e2d\uff0c\u4f60\u53ef\u4ee5\u7cbe\u786e\u63a7\u5236\u6bcf\u4e00\u4e2a\u6784\u5efa\u6b65\u9aa4\uff1a<\/p>\n
\/\/ config\/webpack.base.js\nmodule.exports = {\n  entry: {\n    client: '.\/src\/client\/index.tsx',\n    server: '.\/src\/server\/index.ts'\n  },\n  plugins: [\n    new MiniCssExtractPlugin(),\n    new TerserPlugin(),\n    \/\/ ... \u4f60\u53ef\u4ee5\u6dfb\u52a0\u4efb\u4f55 Webpack \u63d2\u4ef6\n  ]\n}\n<\/code><\/pre><\/div>\n
1.2 \u6df1\u5ea6\u5b9a\u5236\u90e8\u7f72\u65b9\u6848<\/h3>\n
Next.js \u81ea\u5e26\u7684 Vercel \u90e8\u7f72\u786e\u5b9e\u65b9\u4fbf\uff0c\u4f46\u5982\u679c\u4f60\u60f3\uff1a<\/p>\n
    \n
  • \u5728\u81ea\u5df1\u7684 Linux \u670d\u52a1\u5668\u4e0a\u90e8\u7f72<\/li>\n
  • \u4f7f\u7528 Docker Compose \u7f16\u6392\u591a\u4e2a\u670d\u52a1<\/li>\n
  • \u914d\u7f6e\u53cd\u5411\u4ee3\u7406\u548c\u8d1f\u8f7d\u5747\u8861<\/li>\n
  • \u5b9e\u73b0\u7279\u5b9a\u7684\u5b89\u5168\u7b56\u7565<\/li>\n<\/ul>\n
    \u90a3\u4e48\u81ea\u5df1\u638c\u63a7 Express \u670d\u52a1\u5668\u4f1a\u66f4\u6709\u4f18\u52bf\u3002<\/p>\n
    1.3 \u5b66\u4e60 SSR \u7684\u5e95\u5c42\u539f\u7406<\/h3>\n
    \u901a\u8fc7\u624b\u5199 SSR \u6e32\u67d3\u903b\u8f91\uff0c\u4f60\u5c06\u6df1\u5165\u7406\u89e3\uff1a<\/p>\n
    \/\/ SSR \u6e32\u67d3\u6d41\u7a0b\nconst sheet = new ServerStyleSheet()\nconst jsx = sheet.collectStyles(\n  <Provider store={store}>\n    <StaticRouter location={reqPath}>\n      <Routes>{\/* ... *\/}<\/Routes>\n    <\/StaticRouter>\n  <\/Provider>\n)\nconst content = renderToString(jsx)\nconst styleTags = sheet.getStyleTags()\n<\/code><\/pre><\/div>\n
    \u8fd9\u4e9b\u77e5\u8bc6\u5bf9\u4f60\u5728\u4efb\u4f55 React SSR \u9879\u76ee\u4e2d\u90fd\u975e\u5e38\u6709\u4ef7\u503c\u3002<\/p>\n
    \n
    \u4e8c\u3001\u6280\u672f\u9009\u578b\u4e0e\u67b6\u6784\u8bbe\u8ba1<\/h2>\n
    2.1 \u6838\u5fc3\u6280\u672f\u6808<\/h3>\n\n\n\n\n\n\n\n\n\n\n\n\n
    \u7c7b\u522b<\/th>\n\u6280\u672f\u9009\u578b<\/th>\n\u7248\u672c<\/th>\n\u7406\u7531<\/th>\n<\/tr>\n<\/thead>\n
    React<\/strong><\/td>\nReact 19.2.3<\/td>\n\u6700\u65b0\u7248\u672c\uff0c\u5e76\u53d1\u7279\u6027\uff0c\u66f4\u597d\u7684\u7c7b\u578b\u652f\u6301<\/td>\n<\/td>\n<\/tr>\n
    \u72b6\u6001\u7ba1\u7406<\/strong><\/td>\nRedux Toolkit<\/td>\n\u7b80\u5316 Redux \u5f00\u53d1\uff0c\u5185\u7f6e Thunk \u652f\u6301<\/td>\n<\/td>\n<\/tr>\n
    \u8def\u7531<\/strong><\/td>\nReact Router DOM 7.12.0<\/td>\n\u7a33\u5b9a\u7684\u5ba2\u6237\u7aef\u8def\u7531<\/td>\n<\/td>\n<\/tr>\n
    \u4ee3\u7801\u5206\u5272<\/strong><\/td>\n@loadable\/component<\/td>\n5.15.0\uff0c\u6210\u719f\u7684\u4ee3\u7801\u5206\u5272\u65b9\u6848<\/td>\n<\/td>\n<\/tr>\n
    \u6784\u5efa\u5de5\u5177<\/strong><\/td>\nWebpack 5.96.0<\/td>\n\u6a21\u5757\u5316\u3001\u53ef\u6269\u5c55\u3001\u751f\u6001\u4e30\u5bcc<\/td>\n<\/td>\n<\/tr>\n
    \u670d\u52a1\u7aef<\/strong><\/td>\nExpress 5.2.1<\/td>\n\u8f7b\u91cf\u7ea7\u3001\u4e2d\u95f4\u4ef6\u751f\u6001\u5b8c\u5584<\/td>\n<\/td>\n<\/tr>\n
    \u6837\u5f0f\u65b9\u6848<\/strong><\/td>\nStyled-components + Sass\/Less<\/td>\n\u591a\u79cd\u9009\u62e9\uff0c\u7075\u6d3b\u5207\u6362<\/td>\n<\/td>\n<\/tr>\n
    TypeScript<\/strong><\/td>\n5.x<\/td>\n\u7c7b\u578b\u5b89\u5168\uff0c\u5f00\u53d1\u4f53\u9a8c\u4f18\u79c0<\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    2.2 SSR \u6e32\u67d3\u67b6\u6784<\/h3>\n
    \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502         HTTP \u8bf7\u6c42                         \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n              \u2193\n\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502       Express \u4e2d\u95f4\u4ef6\u5c42                \u2502\n\u2502  \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510       \u2502\n\u2502  \u2502 Helmet (\u5b89\u5168) \u2502 Rate Limit  \u2502       \u2502\n\u2502  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518       \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n              \u2193\n\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502       SSR \u6e32\u67d3\u5c42                     \u2502\n\u2502  1. \u521b\u5efa Redux Store                 \u2502\n\u2502  2. \u9884\u53d6\u8def\u7531\u6570\u636e (loadData)         \u2502\n\u2502  3. renderToString \u6e32\u67d3 HTML        \u2502\n\u2502  4. \u63d0\u53d6 Styled-components \u6837\u5f0f    \u2502\n\u2502  5. \u5e8f\u5217\u5316\u72b6\u6001\u5230 window.context      \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n              \u2193\n\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502       \u8fd4\u56de HTML + \u521d\u59cb\u72b6\u6001            \u2502\n\u2502  <html>                            \u2502\n\u2502    <head>                          \u2502\n\u2502      ${styleTags}                    \u2502\n\u2502    <\/head>                          \u2502\n\u2502    <body>                          \u2502\n\u2502      <div id="root">${content}<\/div>   \u2502\n\u2502      <script>                        \u2502\n\u2502        window.context = { state: ... } \u2502\n\u2502      <\/script>                        \u2502\n\u2502    <\/body>                          \u2502\n\u2502  <\/html>                            \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n<\/code><\/pre><\/div>\n
    2.3 \u5ba2\u6237\u7aef Hydration \u6d41\u7a0b<\/h3>\n
    \/\/ src\/client\/index.tsx\nconst App = () => {\n  const store = useMemo(() => {\n    \/\/ \u8bfb\u53d6\u670d\u52a1\u7aef\u4f20\u9012\u7684\u72b6\u6001\n    if (isSEO() && window?.context?.state) {\n      return getStore(window.context.state)\n    }\n    return getStore()\n  }, [])\n\n  return (\n    <Provider store={store}>\n      <BrowserRouter>\n        <Routes>{\/* ... *\/}<\/Routes>\n      <\/BrowserRouter>\n    <\/Provider>\n  )\n}\n\n\/\/ \u7b49\u5f85\u4ee3\u7801\u5206\u5272\u7ec4\u4ef6\u52a0\u8f7d\u5b8c\u6210\nloadableReady(() => {\n  hydrateRoot(document.getElementById('root')!, <App \/>)\n})\n<\/code><\/pre><\/div>\n
    \n
    \u4e09\u3001\u6838\u5fc3\u7279\u6027\u8be6\u89e3<\/h2>\n
    3.1 \u4e09\u79cd\u6e32\u67d3\u6a21\u5f0f\uff08\u7075\u6d3b\u5207\u6362\uff09<\/h3>\n
    NSBP \u652f\u6301\u901a\u8fc7 URL \u53c2\u6570\u63a7\u5236\u6e32\u67d3\u6a21\u5f0f\uff1a<\/p>\n\n\n\n\n\n\n\n
    \u6a21\u5f0f<\/th>\nURL<\/th>\n\u573a\u666f<\/th>\n<\/tr>\n<\/thead>\n
    SSR\uff08\u9ed8\u8ba4\uff09<\/strong><\/td>\n\/<\/code> \u6216 \/?nsbp=1<\/code><\/td>\nSEO \u4f18\u5316\u3001\u9996\u5c4f\u52a0\u8f7d\u5feb<\/td>\n<\/tr>\n
    CSR\uff08\u7eaf\u5ba2\u6237\u7aef\uff09<\/strong><\/td>\n\/?nsbp=0<\/code><\/td>\n\u8c03\u8bd5\u3001\u5f00\u53d1\u4f53\u9a8c<\/td>\n<\/tr>\n
    SSR \u56de\u9000<\/strong><\/td>\n\/?nsbp=1&from=link<\/code><\/td>\n\u5185\u90e8\u94fe\u63a5\uff0c\u5141\u8bb8\u5ba2\u6237\u7aef\u66f4\u65b0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    \u5b9e\u73b0\u903b\u8f91<\/strong>\uff1a<\/p>\n
    \/\/ src\/utils\/index.ts\nexport const isSEO = () => {\n  if (typeof window !== 'undefined') {\n    const nsbp = getLocationParams('nsbp')\n    if (nsbp !== '') {\n      return parseInt(nsbp, 10)\n    }\n    return 1  \/\/ \u9ed8\u8ba4 SSR\n  }\n  return 1\n}\n<\/code><\/pre><\/div>\n
    3.2 \u667a\u80fd SSR \u6570\u636e\u9884\u53d6<\/h3>\n
    \u670d\u52a1\u7aef\u9884\u53d6\u6570\u636e\uff0c\u907f\u514d\u5ba2\u6237\u7aef\u4e8c\u6b21\u8bf7\u6c42\uff1a<\/p>\n
    \/\/ src\/Routers.tsx\nexport default [\n  {\n    path: '\/',\n    element: <Home \/>,\n    loadData: homeLoadData,  \/\/ \u2190 SSR \u65f6\u9884\u53d6\u6570\u636e\n    key: 'home'\n  }\n]\n\n\/\/ src\/services\/home.ts\nexport const loadData = (resolve: any, query: any) => {\n  return async (dispatch: any) => {\n    try {\n      const response = await fetch('\/getPhotoMenu')\n      const data = await response.json()\n\n      \/\/ Redux Thunk action\n      dispatch({\n        type: FETCH_PHOTO_MENU_SUCCESS,\n        payload: data.data\n      })\n\n      resolve()\n    } catch (error) {\n      console.error('Data loading error:', error)\n      resolve()\n    }\n  }\n}\n<\/code><\/pre><\/div>\n
    \u6548\u679c\u5bf9\u6bd4<\/strong>\uff1a<\/p>\n
    \u4f20\u7edf CSR \u65b9\u5f0f\uff1a\n  1. \u5ba2\u6237\u7aef\u8bf7\u6c42\u9875\u9762 \u2192 \u8fd4\u56de\u7a7a HTML\n  2. \u52a0\u8f7d JS bundle\n  3. \u6267\u884c JS\n  4. \u53d1\u8d77 API \u8bf7\u6c42\n  5. \u6e32\u67d3\u5185\u5bb9\n  \u23f1\ufe0f \u603b\u8017\u65f6: ~2-3 \u79d2\n\nNSBP SSR \u65b9\u5f0f\uff1a\n  1. \u670d\u52a1\u7aef\u9884\u53d6\u6570\u636e\n  2. \u6e32\u67d3\u5b8c\u6574 HTML\n  3. \u8fd4\u56de\u7ed9\u5ba2\u6237\u7aef\n  4. \u5ba2\u6237\u7aef\u76f4\u63a5 hydrate\n  \u23f1\ufe0f \u603b\u8017\u65f6: ~0.5-1 \u79d2\n<\/code><\/pre><\/div>\n
    3.3 \u4ee3\u7801\u5206\u5272\u4e0e\u61d2\u52a0\u8f7d<\/h3>\n
    \u4f7f\u7528 @loadable\/component<\/code> \u5b9e\u73b0\u8def\u7531\u7ea7\u522b\u7684\u4ee3\u7801\u5206\u5272\uff1a<\/p>\n
    import loadable from '@loadable\/component'\n\nconst Home = loadable(() => import('@containers\/Home'), {\n  fallback: <Loading \/>\n})\n\nconst Photo = loadable(() => import('@containers\/Photo'), {\n  fallback: <Loading \/>\n})\n<\/code><\/pre><\/div>\n
    Webpack \u914d\u7f6e<\/strong>\uff1a<\/p>\n
    \/\/ config\/webpack.client.js\nconst { ChunkExtractor } = require('@loadable\/webpack-plugin')\n\nmodule.exports = merge(baseConfig, {\n  mode: 'production',\n  plugins: [\n    new ChunkExtractor({\n      statsFile: path.resolve(__dirname, '..\/public\/loadable-stats.json')\n    })\n  ]\n})\n<\/code><\/pre><\/div>\n
    \u6548\u679c<\/strong>\uff1a<\/p>\n
    \u9996\u6b21\u52a0\u8f7d\uff1a\n  - \u4e3b bundle: ~200KB\n  - \u53ea\u52a0\u8f7d\u9996\u9875\u4ee3\u7801\n\n\u8bbf\u95ee \/photo \u9875\u9762\uff1a\n  - \u6309\u9700\u52a0\u8f7d Photo \u7ec4\u4ef6\n  - \u4e0d\u52a0\u8f7d Login \u7ec4\u4ef6\n<\/code><\/pre><\/div>\n
    3.4 \u591a\u5c42\u5b89\u5168\u9632\u62a4\u4f53\u7cfb<\/h3>\n
    Helmet \u5b89\u5168\u5934\u90e8<\/h4>\n
    \/\/ src\/server\/index.ts\napp.use(helmet({\n  contentSecurityPolicy: {\n    directives: {\n      defaultSrc: ["'self'"],\n      scriptSrc: ["'self'", "'unsafe-inline'", "'unsafe-eval'"],\n      styleSrc: ["'self'", "'unsafe-inline'"],\n      imgSrc: ["'self'", 'data:', 'https:'],\n      connectSrc: ["'self'", 'https:'],\n      fontSrc: ["'self'", 'data:'],\n      objectSrc: ["'none'"],\n      mediaSrc: ["'self'"],\n      frameSrc: ["'none'"]\n    }\n  },\n  crossOriginEmbedderPolicy: false,\n  crossOriginOpenerPolicy: false\n}))\n<\/code><\/pre><\/div>\n
    \u5b89\u5168\u6548\u679c<\/strong>\uff1a<\/p>\n\n\n\n\n\n\n\n\n
    \u653b\u51fb\u7c7b\u578b<\/th>\n\u9632\u62a4\u63aa\u65bd<\/th>\n<\/tr>\n<\/thead>\n
    XSS \u653b\u51fb<\/td>\nCSP script-src \u7b56\u7565<\/td>\n<\/tr>\n
    \u70b9\u51fb\u52ab\u6301<\/td>\nX-Frame-Options: SAMEORIGIN<\/td>\n<\/tr>\n
    MIME \u55c5\u63a2<\/td>\nX-Content-Type-Options: nosniff<\/td>\n<\/tr>\n
    \u4e0d\u5b89\u5168\u7684 HTTPS<\/td>\nStrict-Transport-Security<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    \u901f\u7387\u9650\u5236<\/h4>\n
    if (process.env.ENABLE_RATE_LIMIT === '1') {\n  const limiter = rateLimit({\n    windowMs: 15 * 60 * 1000,  \/\/ 15 \u5206\u949f\n    max: 100,                     \/\/ \u6700\u591a 100 \u6b21\u8bf7\u6c42\n    message: 'Too many requests from this IP'\n  })\n  app.use('\/api', limiter)\n}\n<\/code><\/pre><\/div>\n
    3.5 Docker \u4e00\u952e\u90e8\u7f72<\/h3>\n
    \u751f\u4ea7\u73af\u5883<\/strong> (docker-compose.yml<\/code>)\uff1a<\/p>\n
    services:\n  app:\n    build:\n      context: .\n      dockerfile: docker\/Dockerfile\n    container_name: nsbp-app\n    ports:\n      - "8081:3001"\n    environment:\n      - NODE_ENV=production\n      - ENABLE_RATE_LIMIT=1\n    restart: unless-stopped\n    healthcheck:\n      test: ["CMD", "node", "-e", "require('http').get('http:\/\/localhost:3001', (r) => {process.exit(r.statusCode === 200 ? 0 : 1)})"]\n      interval: 30s\n      timeout: 3s\n      retries: 3\n<\/code><\/pre><\/div>\n
    \u5f00\u53d1\u73af\u5883<\/strong> (docker-compose.dev.yml<\/code>)\uff1a<\/p>\n
    services:\n  app:\n    build:\n      context: .\n      dockerfile: docker\/Dockerfile.dev\n    container_name: nsbp-app-dev\n    ports:\n      - "3001:3001"\n      - "9229:9229"  # Node.js debug port\n    volumes:\n      # \u4ee3\u7801\u6302\u8f7d\uff08\u70ed\u91cd\u8f7d\uff09\n      - .\/src:\/app\/src\n      - .\/public:\/app\/public\n      - .\/config:\/app\/config\n    command: ["dumb-init", "--", "pnpm", "run", "dev"]\n<\/code><\/pre><\/div>\n
    \u4e00\u952e\u542f\u52a8<\/strong>\uff1a<\/p>\n
    # \u751f\u4ea7\u73af\u5883\nmake prod\n# \u6216\ndocker-compose up -d\n\n# \u5f00\u53d1\u73af\u5883\nmake dev\n# \u6216\ndocker-compose -f docker-compose.dev.yml up --build\n<\/code><\/pre><\/div>\n
    \n
    \u56db\u3001\u5f00\u53d1\u4f53\u9a8c\u4f18\u5316<\/h2>\n
    4.1 \u5b8c\u6574\u7684\u4ee3\u7801\u8d28\u91cf\u5de5\u5177\u94fe<\/h3>\n
    \/\/ package.json scripts\n{\n  "scripts": {\n    "lint": "eslint src --ext .ts,.tsx,.js,.jsx",\n    "lint:fix": "eslint src --ext .ts,.tsx,.js,.jsx --fix",\n    "format": "prettier --write **\/*.{js,css,less,scss,ts,tsx}"\n  }\n}\n<\/code><\/pre><\/div>\n
    Git Hooks<\/strong> (Husky + lint-staged)\uff1a<\/p>\n
    \/\/ .husky\/pre-commit\n#!\/usr\/bin\/env sh\n. "$(dirname -- "$0")\/_\/husky.sh"\n\nlint-staged --partial-staged\n<\/code><\/pre><\/div>\n
    \u6548\u679c<\/strong>\uff1a<\/p>\n
    $ git add .\n$ git commit -m "feat: add new component"\n\u2714 Pre-commit checks\n  \u2192 ESLint auto-fixed 3 files\n  \u2192 Prettier formatted 5 files\n[master 8a3f9d] feat: add new component\n<\/code><\/pre><\/div>\n
    4.2 CLI \u5de5\u5177\u5feb\u901f\u521b\u5efa\u9879\u76ee<\/h3>\n
    # \u5b89\u88c5 CLI\nnpm install -g nsbp-cli\n\n# \u521b\u5efa\u65b0\u9879\u76ee\nnpx nsbp-cli create my-app\n\n# \u9879\u76ee\u7ed3\u6784\nmy-app\/\n\u251c\u2500\u2500 src\/\n\u2502   \u251c\u2500\u2500 client\/\n\u2502   \u251c\u2500\u2500 server\/\n\u2502   \u251c\u2500\u2500 containers\/\n\u2502   \u251c\u2500\u2500 component\/\n\u2502   \u251c\u2500\u2500 store\/\n\u2502   \u2514\u2500\u2500 utils\/\n\u251c\u2500\u2500 docker\/\n\u2502   \u251c\u2500\u2500 Dockerfile\n\u2502   \u251c\u2500\u2500 Dockerfile.dev\n\u2502   \u251c\u2500\u2500 docker-compose.yml\n\u2502   \u2514\u2500\u2500 docker-compose.dev.yml\n\u251c\u2500\u2500 config\/\n\u2502   \u251c\u2500\u2500 webpack.base.js\n\u2502   \u251c\u2500\u2500 webpack.client.js\n\u2502   \u2514\u2500\u2500 webpack.server.js\n\u251c\u2500\u2500 .env.example\n\u251c\u2500\u2500 Makefile\n\u2514\u2500\u2500 README.md\n<\/code><\/pre><\/div>\n
    4.3 Make \u547d\u4ee4\u7b80\u5316\u64cd\u4f5c<\/h3>\n
    # \u67e5\u770b\u6240\u6709\u547d\u4ee4\nmake help\n\nAvailable targets:\n  help            Show this help message\n  build           Build Docker images for production\n  dev             Start development environment\n  prod            Start production environment\n  down            Stop and remove containers\n  logs            View logs\n  restart         Restart production containers\n  rebuild         Rebuild and restart containers\n  shell           Open shell in container\n<\/code><\/pre><\/div>\n
    \n
    \u4e94\u3001\u6027\u80fd\u4f18\u5316\u5b9e\u8df5<\/h2>\n
    5.1 Tree Shaking<\/h3>\n
    \/\/ config\/webpack.base.js\nmodule.exports = {\n  optimization: {\n    usedExports: true,  \/\/ \u53ea\u5bfc\u51fa\u4f7f\u7528\u7684\u5bfc\u51fa\n    sideEffects: false,  \/\/ \u6ca1\u6709\u526f\u4f5c\u7528\n  }\n}\n<\/code><\/pre><\/div>\n
    5.2 \u4ee3\u7801\u538b\u7f29\u4e0e\u6df7\u6dc6<\/h3>\n
    \/\/ config\/webpack.client.js (production)\nconst TerserPlugin = require('terser-webpack-plugin')\n\nmodule.exports = {\n  optimization: {\n    minimize: true,\n    minimizer: [\n      new TerserPlugin({\n        parallel: true,  \/\/ \u591a\u8fdb\u7a0b\u538b\u7f29\n        terserOptions: {\n          compress: {\n            drop_console: true,  \/\/ \u79fb\u9664 console.log\n            pure_funcs: ['console.log', 'console.info']\n          }\n        }\n      })\n    ]\n  }\n}\n<\/code><\/pre><\/div>\n
    5.3 \u9759\u6001\u8d44\u6e90\u7f13\u5b58\u4f18\u5316<\/h3>\n
    \/\/ src\/server\/index.ts\napp.use(express.static('public', {\n  dotfiles: 'ignore',\n  setHeaders: (res, filePath) => {\n    \/\/ \u7f13\u5b58 1 \u5e74\n    if (filePath.match(\/\\.(js|css|png|jpg|jpeg|gif|svg|ico)$\/)) {\n      res.setHeader('Cache-Control', 'public, max-age=31536000, immutable')\n    }\n  }\n}))\n<\/code><\/pre><\/div>\n
    5.4 \u56fe\u7247\u5c3a\u5bf8\u63a2\u6d4b<\/h3>\n
    \/\/ \u4f7f\u7528 probe-image-size \u5728 SSR \u9636\u6bb5\u83b7\u53d6\u56fe\u7247\u5c3a\u5bf8\nimport { getPhotoWH } from '@server\/photo'\n\n\/\/ \u5ba2\u6237\u7aef\u76f4\u63a5\u4f7f\u7528\uff0c\u907f\u514d\u4e8c\u6b21\u8bf7\u6c42\nconst [width, height, filename] = photos[0]\n<\/code><\/pre><\/div>\n
    \n
    \u516d\u3001\u9002\u7528\u573a\u666f\u5206\u6790<\/h2>\n
    \u2705 \u9002\u5408\u4f7f\u7528 NSBP \u7684\u573a\u666f<\/h3>\n
      \n
    1. \n
      \u4e2a\u4eba\u9879\u76ee\u548c\u5feb\u901f\u539f\u578b<\/strong><\/p>\n
        \n
      • \u9700\u8981\u5feb\u901f\u642d\u5efa SSR \u5e94\u7528<\/li>\n
      • \u60f3\u8981\u5b66\u4e60 SSR \u539f\u7406<\/li>\n
      • \u5bf9\u6784\u5efa\u6d41\u7a0b\u6709\u7279\u6b8a\u9700\u6c42<\/li>\n<\/ul>\n<\/li>\n
      • \n
        \u6559\u80b2\u548c\u5b66\u4e60\u76ee\u7684<\/strong><\/p>\n
          \n
        • \u6df1\u5165\u7406\u89e3 React SSR<\/li>\n
        • \u5b66\u4e60 Webpack \u914d\u7f6e<\/li>\n
        • \u638c\u63e1 Redux \u72b6\u6001\u7ba1\u7406<\/li>\n<\/ul>\n<\/li>\n
        • \n
          \u9700\u8981\u9ad8\u5ea6\u5b9a\u5236\u7684\u9879\u76ee<\/strong><\/p>\n
            \n
          • \u81ea\u5b9a\u4e49\u6784\u5efa\u6d41\u7a0b<\/li>\n
          • \u7279\u6b8a\u7684\u5b89\u5168\u7b56\u7565<\/li>\n
          • \u81ea\u5b9a\u4e49\u90e8\u7f72\u65b9\u6848<\/li>\n<\/ul>\n<\/li>\n
          • \n
            \u4f4e\u8d44\u6e90\u73af\u5883\u90e8\u7f72<\/strong><\/p>\n