架构-react_ssr笔记

最新推荐文章于 2024-11-09 18:32:26 发布

weixin_45687657

最新推荐文章于 2024-11-09 18:32:26 发布

阅读量45

点赞数

文章标签： react.js 架构笔记

本文链接：https://blog.csdn.net/weixin_45687657/article/details/130467711

版权

本文详细介绍了服务器端渲染（SSR）和客户端渲染（CSR）的概念，并展示了在React应用中实现SSR的步骤，包括Webpack的配置，React组件的编写，以及路由的设置。同时，提到了批量打包脚本和文件变化自动重启服务器的实现方法。

摘要由CSDN通过智能技术生成

1.什么是服务器端渲染
   页面上的内容是由服务器生产的
2.什么是客户端渲染
   页面上的内容由于浏览器运行JS脚本而渲染到页面上的
3.服务器端打包React组件
   1)在webpack.base.js和webpack.client.js和webpack.server.js文件中写打包服务端和客户端代码配置
   2)批量打包脚本
       // 批量打包脚本
       npm i npm-run-all -g
       // 文件变化自动重启服务器
       cnpm i nodemon -g
       //package.json文件
       "scripts": {
           // 运行dev:开头的命令
       "dev": "npm-run-all --parallel dev:**",
       "dev:start": "nodemon build/server.js",
       "dev:build:client": "webpack --config webpack.client.js --watch",
       "dev:build:server": "webpack --config webpack.server.js --watch"
       },
   3)src/containers文件中写react组件
   4)src/server/index.js返回静态资源
   5) src/client/index.js返回打包js脚本
   6)路由的使用
       1.routes.js文件下写路由配置
           import React, {Component, Fragment} from 'react';
           import {Route} from 'react-router-dom';
           import Home from './containers/Home';
           import NotFound from './containers/NotFound';
           import App from './containers/App';
           // 集中式路由
           export default [
           {
           path: '/',
           component: App,
           loadData: App.loadData,
           // 子路由
           routes: [
           {
           path: '/',
           component: Home,
           exact: true,
           key: '/',
           // 加载数据，如果此配置项有了这个属性，那么意味着需要加载异步数据
           loadData: Home.loadData
           }
           {
           component: NotFound,// 没有指定path那么就是所有path匹配不到时显示
           key: '/notfound'
           }
           ]
           }
           ]
       2.src/client/index.js写客户端代码
           // hydrate 就是表示把服务器端渲染未完成的工作完成，比如说绑定事件
           // 因为服务端已经渲染了html了，客户端只要执行js逻辑即可
           ReactDOM.hydrate(
       <BrowserRouter>
           //renderRoutes会匹配app路由组件，app组件中renderRoutes会匹配app组件的子路由组件
       {renderRoutes(routes)}
       </BrowserRouter>
           , document.getElementById('root'));
       3.src/server/render.js写服务端代码
           import React, {Fragment} from 'react';
           import {StaticRouter, matchPath, Route} from 'react-router-dom';
           import routes from '../routes';
           import {renderToString} from 'react-dom/server';
           import {renderRoutes, matchRoutes} from 'react-router-config';
           export default function (req, res) {
           let context = {};
           // matchPath 是路由提供的工具方法，可以用来判断路径和路由对象是否匹配（不是简单的匹配：绝对相等）
           // 这样的也能匹配到
           // req.path => /user/123456
           // route.path => /user/:id
           // matchRoutes 这个方法可以处理嵌套路由
           let matchedRoutes = matchRoutes(routes, req.path);

           // 客户端用 HashRouter 或者 BrowserRouter
           // 而在服务端用 StaticRouter
           let html = renderToString(
               // 所有路由组件this.props.staticContext可以拿到context
           <StaticRouter context={context} location={req.path}>
           {renderRoutes(routes)}
           </StaticRouter>
           );
           res.send(`
           <html>
           <head>
           <title>React-SSR</title>
           <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" />
           </head>
           <body>
           <div id="root">${html}</div>
           <script src="/client.js"></script>
           </body>
           </html>