想多说多说，可是秋凉了----《丑奴儿·书博山道中壁》辛弃疾什么是SSRShadowsocksR？阴阳师？FGO？服务器端呈现(SSR)是应用程序通过在服务器上显示网页而不是在浏览器中呈现网页来呈现网页的能力。服务器向客户端发送一个完全呈现的页面（准确地说只是HTML）。同时结合客户端JavaScriptbundle，页面可以运行。与SSR不同的是，还有一个客户端渲染(CSR)。CSR和SSR最大的区别只是渲染是由客户端提供还是服务端提供，本质上还有另外一回事。因此，如果下面没有突出显示CSR和SSR之间的差异，则它们默认是一致的。为什么要使用SSR得益于React等前端框架的发展，前后端分离，webpack等编译工具的流行，以及ajax实现的页面局部刷新，我们现在的应用没有不再需要像以前的应用程序那样从服务器下载。获取页面后，可以动态修改部分页面数据，避免页面频繁跳转等问题影响用户体验。即SPA越来越成为主流的应用模型。但是使用SPA，除了上面提到的优点之外，也难免会带来缺点。例如：由于在页面加载前需要加载所有页面所需的JavaScript库，所以第一次打开页面需要很长时间；需要开发专门针对SPA的web框架（各种具有SSR能力的框架，包括Next.js等）搜索引擎爬虫浏览器历史记录（各种基于pushState的路由器）为了解决上述1.和3问题，SSR开始走上历史舞台。如何做SSR基于以上理论，我们可以设计一个具有SSR功能的React框架。首先我们通过create-react-app命令初始化一个React项目，初始化后的项目可以理解为一个功能最简单的项目。我们将基于这个项目实现一个SSR功能。#yarn$yarncreatereact-appssr-demo??同学们在练习的时候需要注意，当前版本的cra命令创建新项目的时候，会报类似Mini....isnotafunction的问题。这是mini-css-extract-plugin插件版本更新导致的。只需要通过package.json中的解析将mini-css-extract-plugin的版本限制为2.4.5即可生成项目目录如下：./├──README.md├──build├──node_modules├──package.json├──public├──src└──yarn.lock已经自动安装依赖，我们可以在“本地环境”启动项目到最简单的页面。接下来我们来实现一个SSR函数。首先，我们需要安装express（如果是CSR，则不需要这一步）yarnaddexpress安装完成后，我们需要在server/index.js文件中写入如下代码importexpressfrom"express";importserverRendererfrom"./serverRenderer.js";constPORT=3000;constpath=require("path");constapp=express();constrouter=express.Router();//当爬虫请求过来的时候在，将所有请求定向到serverRendererroutingrouter.use("*",serverRenderer);app.use(router);app.listen(PORT,()=>console.log(`listeningon:${PORT}`));其中serverRenderer文件内容如下：importReactfrom"react";importReactDOMServerfrom"react-dom/server";importAppfrom"../src/App";constpath=require("path");constfs=require("fs");exportdefault(req,res,next)=>{//获取当前项目的HTML模板文件路径constfilePath=path.resolve(__dirname,"..","build","index.html");//读取文件fs.readFile(filePath,"utf8",(err,htmlData)=>{if(err){console.err或（“错误”，错误）；返回res.status(404).end();}//将JSX渲染成HTML字符串consthtml=ReactDOMServer.renderToString(
