# react-ssr **Repository Path**: machinist_wq/react-ssr ## Basic Information - **Project Name**: react-ssr - **Description**: react@18.x react-router-dom@6.x react-redux@7.x webpack@5.x webpack-cli@4.x - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 2 - **Forks**: 0 - **Created**: 2022-05-19 - **Last Updated**: 2023-06-02 ## Categories & Tags **Categories**: Uncategorized **Tags**: React, webpack, react-redux, SSR ## README 安装依赖 cnpm i 启动项目 npm start 文件目录 --------- bilid 服务端打包输出 --------- client 客户端打包入口 --------- public 静态资源文件夹 |**\_\_\_** index.csr.html html 打包后的输出文件 |**\_\_\_** bundle 客户端打包后的输出文件 --------- server 服务端文件 |**\_\_\_** config 服务端配置文件 |**\_\_\_** httpContext staticContext 注入 |\_ \_ \_ _ index 服务端打包入口 |_ \_ \_ \_ render 服务端路由文件 --------- src 项目文件 |**\_\_\_** component 公共组件 |**\_\_\_** page 项目页面文件 |**\_\_\_** route 路由表文件 |**\_\_\_** store redux 的 store 文件 |**\_\_\_** app.css 样式文件 |**\_\_\_** app.js 项目入口文件 |**\_\_\_** index.csr.html csr 模式下的 html 模板文件 |**\_\_\_** ssr 谷歌的 puppeteer 插件简单实现 ssr --------- .gitignore git 上传忽略目录 --------- mock 模拟接口 --------- package.json 依赖清单 --------- webpack.base.js 公共的 webpack 配置 --------- webpack.client.js 客户端打包配置 --------- webpack.server.js 服务端打包配置 ## 同构接口的原理 ===============x==============>（跨域） 浏览器=====>ssrnode -======= 数据接口(mock) ssr 额外的性能损耗，日常没问题，大流量期间如何尽可能的规避，让服务稳定 ## hydrateRoot react18 使用 hydrateRoot 替换了原来的 hydrate. ## renderToPipeableStream react18 使用 renderToPipeableStream 替换了原来的 renderToString，新的 API 可以更好的契合 Suspense. ## StaticRouter 的 content StaticRouter 上的 content，如需使用需要自己实现 react 的 content 功能. 官方说明：https://github.com/remix-run/react-router/issues/8406 具体实现： https://github.com/supermanklk/custom-ssr-server/commit/4f6c1164046603814ba54150f1dfa6c314a96c72#diff-406c87837931aeddfe54b967280989ef24b47d3567e25f6cfb05c9b411553fc4L8 ## staticContext 注入 已经不再需要使用 staticContext 配合了,也不需要使用 withStyle 实现 server 端调用 css，所以不需要担心需要修正 withStyle,isomorphic-style-loader 会自动把 css 文件加载到浏览器 html 的头部. 以前的 ssr 需要对 withStyle 进行修正，现在已经不需要了，但是这里有个很好的第三方插件叫`hoist-non-react-statics`, 自动拷贝所有非 React 静态方法，react 官方也是有推荐的，空闲时间可以 [学习一下](https://zh-hans.reactjs.org/docs/higher-order-components.html) ``` import hoistNonReactStatic from 'hoist-non-react-statics'; function enhance(WrappedComponent) { class Enhance extends React.Component {/*...*/} hoistNonReactStatic(Enhance, WrappedComponent); return Enhance; } ``` ## 其他方式实现 ssr 除了使用同构的方式实现 ssr 之外我们还可以依据一下插件来实现 ssr ### 1、使用谷歌的 puppeteer 插件简单的实现一个 ssr，利用 puppeteer 插件的爬虫能力，获取目标页面，相对会慢一下，因为要抓取在渲染 ### 2、prerender 实现遍历所有的路由，都写成 html 文件，或者都缓存上之后渲染 ### 3、prerender-spa-plugin 这是一个 webpack 层面的 plugin 插件，对 react、vue、angular 支持比较好 它会获取路由并导出 html 文件 **react18 最新的 ssr 属性还没有更新后续会继续更新不上这部分** react18 ssr 属性地址：https://zh-hans.reactjs.org/docs/react-dom-server.html