lianhuashan / ssrproject Goto Github PK

ssr(server-side-render) 简称服务端渲染，要理解服务端渲染，首先要了解一下同构

简单来讲，当用户在浏览器输入网址请求页面的时候，服务端会返回html结构，然后前端复用html结构，并且添加各种js事件，这种前后端共用同一个页面结构的**就可以称为同构。

以前的服务端渲染，都是通过前端写好模板，然后后端把数据及展示逻辑填充进去，现在项目大都是SPA，当请求页面的时候，服务端都是直接返回一个静态html文件，由js动态生成页面，需要一定的等待时间，而服务端渲染可以帮我们解决这样一个问题，第一次请求页面的时候由服务端返回页面的结构+数据+样式，而js负责生成各种事件响应，后续的页面跳转、渲染则可以直接通过js来完成。

第一次请求的时候，后端需要返回页面结构+数据，前端要复用后端的结构的话，也需要拿到对应的数据，为了避免二次请求，我们可以在后端查询之后直接塞到全局变量里，以便前端可以直接使用。这里我们使用了react-router v6的loader方法，当请求同一个路径时，让前后端共用数据。

hmr是通过自定义服务来实现，当更新组件时，前后端同时编译，然后刷新页面完成hmr。

组件编写的时候需要兼容浏览器和服务端，因为服务端是没有window，navigator等全局变量的，所以要区分下是否在浏览器