当联系next.js框架时，当项目打包和启动时，下一个命令是。入口文件，然后通过NGINX路径访问我们的项目。
Next.js的Dockerfile格式类似于Node.js服务的格式。从本质上讲，Next.js实际上是节点返回端服务。因此，运行生产环境时，访问开放端口以访问我们的应用程序。
那么SSR服务器渲染如何，为什么服务器和客户端代码可以同时运行？
网页的初始版本没有与前后分离，并且通过服务器渲染（与当前服务器的侧面渲染不同）。
当时，页面渲染可能是这样的。浏览器请求页面URL，然后在服务器收到请求后，转到数据库查询数据，将数据扔到后端 - 端 - 端部组件模板（PHP，ASP，JSP等），然后将其渲染到HTMLFragment，然后将服务器组装成这些HTML片段，形成完整的HTML，最后返回到浏览器
但是，有明显的缺点，例如这种渲染方法。页面的每个数据，您必须重新要求，检查数据库，然后重新组装HTML。
后来，出现了Ajax的外观，前端和后端分开。前端首先显示一个没有数据的页面，然后请求数据，然后动态渲染以完成页面显示。在该过程中，仅需要更新网页，只需更新数据的内容。这是一组解决方案。
因为前端的使用基本上是水疗中心，并且单页表面渲染，所以每个人都发现SEO存在问题，并且随着应用程序的复杂性的增加，JS代码的体积也越来越肿，导致了A第一个屏幕渲染速度的显着下降。
结果，前端团队使用nodejs来完成服务器端的页面渲染，从而完成服务器渲染。
浏览器请求URL，根据不同的路由请求服务器的不同数据，然后服务器缝合一个携带数据并返回浏览器的HTML字符串。在同一时间，浏览器执行JS脚本以将相应的事件绑定到该事件到页面的元素，以便页面可以交互。
服务器渲染的优点和缺点：
在这里，我们使用以下代码进行模型测试
打开浏览器的http：// localhost：8080以查看页面的渲染，因此您可以看到，当浏览器获得HTML代码时，您不需要JS，您也可以渲染此页面以渲染此页面。
1.渲染页面在这里我们用作服务框架
我们上面使用的方法将内容组件转换为字符串格式的内容。
但是，每个使用nodejs的人都应该知道节点环境不支持Esmodule和JSX的代码编写，因此我们在此处使用某个转换的帮助。
在根目录中创建文件
添加包装和运行命令
然后，首先运行，此时页面的显示效果并查看源代码
现在，该页面的基本渲染已完成。可以绑定元素事件吗？我们修改了组件
刷新页面，单击组件部分，并发现事件不会像我们预期的那样触发。我们添加的事件不绑定到相应的元素。我们的事件已经消失。这表明我们的服务器渲染是不完整的。事件绑定无效。功能不会帮助我们做这一步骤！
2.此时需要引入事件绑定。如此称为的同质性，流行是在服务器上再次运行的一组React代码，到达浏览器并再次运行。服务器渲染完成页面结构，浏览器和浏览器结束渲染完成事件绑定。
那么如何让浏览器绑定事件？
唯一的方法是允许浏览器将JS文件拉动执行并让JS代码控制。换句话说，返回到浏览器的源代码中应该有一个JS文件，其中包含所有事件您的代码。
那么如何创建此JS文件？
您需要在这里使用的方法
首先，为了清晰的思考，我们将所有仅将前一步的文件放入服务器文件夹中，然后创建一个客户文件夹以调用
接下来，修改我们的WebPack配置，创建一个，编写一般配置
为包装客户端文件夹创建内容
创建用于包装服务器文件夹的内容
在中间修改包装命令：
接下来，我们需要同时运行这三个命令。在这里，我们使用工具来帮助我们简化：
然后修改我们的服务器/index.js文件
将事件绑定到组件
接下来，使用提供的方法生成public/bundle.js文件，并给出我们的网页以生成一个包含事件绑定的JS文件
目前，运行，打开http：// localhost：8090/，您可以看到我们的页面内容，单击或内容，可以触发事件，我们添加
让我们看一下网站的源代码：
正如我们提前构想的那样，除了页面元素的内容外，还有一个JS文件，其中包含诸如事件绑定之类的代码
这是我们同质代码过程的摘要，如下图所示
3.美化代码以美化我们的代码并使用渲染的HTML部分作为使用的函数
4.服务器渲染中的路由均匀，还必须解决两个末端路由同步的问题，即服务器和浏览器端。
在这里，我们将再次整理我们的代码，在Root Directory中创建一个页面文件夹，然后在服务器文件夹下方的页面文件夹下方放置我们的先前和组件。目前，我们的根目录就是这样：
现在我们添加到组件的链接
然后，在页面目录中，我们创建一个用于存储路由的文件
请注意，组件字段的组件是以上面的形式引入的，而不是组件的形式，否则将发生此错误：
修改服务器/index.js的路由参数
该功能接受参数。根据请求，呈现不同的组件。服务器在这里渲染以帮助我们进行路由匹配。应该注意的是，使用时，需要简化为V5版本
修改用于生成JS的文件
此时，请访问http：// localhost：8090/page Display
事件绑定，没有问题
点击跳转，事件是绑定的，没有问题
然后，测试钩子是否可以正常使用
打开http：// localhost：8090/text，usestate和usestate和使用效率也可以正常使用
您可以看到，有一个控制台
根据提示，我们将方法替换为
再次刷新页面，警告要消除，该功能不是异常
此时，我们基本上完成了一个简单的React SSR服务器渲染
原始：https：//juejin.cn/post/7096396341940584461