探究SSR实现原理，Node服务器在SSR中的关键角色与作用
SSR的实现需要Node服务器吗
1、在SSR（服务器端渲染）架构中，Node.js服务器作为中间层，承担着服务器端渲染的重要角色，通过Node.js，我们可以有效地处理API请求，并提供所需数据，从而避免对Node服务器造成过大的性能压力，客户端在渲染过程中可能会遇到跨域问题，此时可以通过Proxy代理来转发请求，SEO优化、错误处理等细节问题也需要在实际项目中逐一解决，总体而言，SSR技术通过整合客户端与服务器端的渲染能力，为用户提供了更高效的页面加载速度和更复杂的交互体验。
2、一些用户对SPA（单页应用）在加载时的空白等待感到不满，SSR应运而生，它能在服务器端进行部分渲染，确保用户在首次加载时能看到非空白的内容，相比之下，SSG（静态站点生成）更像是一位古典舞者，它的动作静止而坚定，SSG直接生成静态HTML文件，无需依赖Node.js等服务器环境，因此更加安全且易于维护。
3、SSR的基本使用流程包括启动服务器和返回HTML文档，在实际开发中，我们通常使用Express作为服务端框架，通过在本地浏览器访问服务器地址并查看源代码，可以观察到服务端返回的HTML内容，在Vue中实现SSR，核心是利用`vue-server-renderer`库将Vue对象转换成字符串，并返回给客户端。
4、SSR，即服务端渲染，是一种历史悠久的技术，它通过服务器返回已渲染的HTML，供浏览器解析以构建页面，最初，服务器使用JSP、PHP等模板引擎来填充数据生成HTML，而没有组件的概念，随着组件的出现，服务器需要基于组件填充数据，渲染HTML，并在浏览器解析HTML后，将其关联至对应组件，添加交互逻辑和后续渲染。
5、在实际业务场景中，SSR服务的单机QPS承载能力在接口时延不大幅增长的情况下较低，当服务流量突增时，会显著增加SSR集群的压力，需要一套通用的SSR降级到客户端渲染（CSR）的方案，以提升SSR服务的稳定性，我们考虑了多种降级方案，包括在Node服务中使用中间件进行降级，以及通过Nginx的error_page配置进行兜底处理。
6、服务端渲染需要后端服务器（通常是Node.js）的支持才能进行，如果没有后端服务器，可以使用预渲染作为替代方案。
服务端渲染SSR之UmiJS预渲染
1、在页面开发过程中，我们经常需要渲染列表，通常有两种模式：切换分页和无限追加，无限追加模式通常需要借助触底钩子（回调函数）来完成，如果是小程序，会有特定的触底钩子（生命周期），但对于非移动端，我们需要自己实现判断是否触底的功能。
2、预渲染是UmiJS中的一项特性，无需新增配置，只需在SSR配置开启的情况下，启用exportStatic配置并执行umi build，页面内容就会被渲染到HTML中，动态路由生成也得到支持，执行umi build即可完成，UmiJS的生态支持建议在使用dumi编写组件或文档时开启服务端渲染和预渲染，以提高文档站点的SEO效果，并确保组件库与SSR兼容。
React中同构(SSR)原理脉络梳理
1、React SSR涉及两个主要步骤：服务端通过`renderToString`将组件树渲染为HTML字符串，以及客户端通过`hydrate`将DOM与fiber树关联，服务端渲染通过递归拼接字符串实现，组件执行时传入参数，元素通过拼接字符串生成HTML，最终将HTML返回给浏览器。
2、Next.js提供了多项功能，包括Link组件以方便路由，Image组件以优化图片加载，以及文件路径生成路由机制，动态路由使用[id].js等命名规则，Next.js还支持SSR和SSG的同构开发模式，即通过export一个对应名字的函数来实现。
3、前后端同构确保了前端和后端的DOM结构一致，避免了重复渲染，React使用checksum机制来保障这一点，所谓的React首屏渲染，简单来说就是React在浏览器内存中第一次生成的虚拟DOM树，需要注意的是，这是虚拟DOM，而非浏览器的DOM。
4、客户端通过script标签、window对象或textarea标签等方法注入数据，实现数据注水，确保双端渲染时数据的正确使用，对于TDK信息的SEO优化，如果是固定的，可以直接写入HTML模板；如果是动态生成的，则在数据预取时固定字段，使用react-helmet可以方便地实现双端同构，前端通过Helmet设置TDK信息，后端调用Helmet.renderStatic获取数据。
5、传统的客户端渲染应用可能在某些情况下更高效，因为它可以利用浏览器的缓存和局部状态更新，第三方同构/SSR解决方案包括D2（High Reliability and Performance Isomorphic App）等，这些方案旨在提供稳定、可靠且高性能的同构应用开发环境，以满足不同的业务需求和性能要求。
vue-srr实现原理(vuexvue-routersyncData)
1、在Vue的router中实现React组件的懒加载，每个通过`applyVueInReact`的Vue组件，以及通过`applyReactInVue`的React组件，都可以接收到一个`data-passed-props`属性，这个属性可以帮助组件在不进行任何包装的情况下，被后续使用`applyVueInReact`或`applyReactInVue`的组件接收到的全部属性（由于是跨框架透传）。
2、Webpack、vue-router和v-cloak CSS是常用的前端技术，`v-cloak`样式用于在Vue渲染完成前隐藏元素，以防止闪烁，Vue-router是Vue *** 的路由管理器，它提供了路由嵌套、模块化基于组件的路由配置、路由参数、查询、通配符、细粒度导航控制以及自定义滚动条行为等功能。
3、在Vue中实现SSR，核心是使用`vue-server-renderer`库将Vue对象转换成字符串并返回给客户端，为了更好地组织代码，可以采用模块化方式，首先创建`app.js`作为入口文件，`client-entry.js`用于服务端渲染后客户端的激活，而`server-entry.js`用于服务端渲染。
4、实现Vue组件的混合写法和纯Vue3写法，需要注意的是，如果父组件使用混合写法，子组件使用纯Vue3写法，子组件将无法接收到父组件中data的属性，只能接收到父组件中setup函数里传递的属性，如果父组件使用纯Vue3写法，子组件使用混合写法，子组件可以通过props接收到data和setup函数中的属性，但子组件在setup中接收时需要注意。
5、虚拟DOM（类似于ReactJS）首先将传统的DOM结构转换为JSON结构，使用操作JavaScript的方式代替操作DOM，从而提高性能；虚拟DOM同步到真实DOM，使用sync()方法进行分批渲染，双向绑定（类似于AngularJS）确保data和DOM任何一方的修改都会同步到另一方，但需要注意的是，内存中的虚拟DOM需要在内存中维护一份DOM的副本。
SSG和SSR有什么区别
1、SSR与SSG技术栈的对比：SSR最初是为了解决SPA的SEO问题和首屏渲染时间而诞生的，它通过服务端实时同构渲染页面，能提高用户体验，引入服务端渲染需要服务器资源和公网流量，其消耗与页面访问量成正比，服务端需要部署在有限地域，加载速度可能慢于CDN，并且带来了运维负担。
2、增量静态再生（ISR）是Next.js特有的混合渲染模式，它为每个页面设置了再生时间，定期更新静态内容，ISR结合了SSG的性能优势和SSR的灵活性，用户访问时页面不会立即生成，但在后台会定期更新，确保内容的新鲜性，在`getStaticProps`中使用`revalidate`选项来设定再生时间，这三种技术各有优势，适用于不同的场景。
3、SSR（服务器端渲染）在服务器端生成HTML页面，直接发送给客户端，它的优点是首屏加载速度快，有利于SEO优化，缺点是服务器负载较大，SSG（静态站点生成）在构建时生成静态HTML页面，其优点是性能高，无需服务器实时渲染，缺点是更新静态页面需要重新构建。
4、SSR将部分计算与渲染工作放在服务器端，提高了首次加载速度和SEO优化；CSR（客户端渲染）则将渲染工作完全交由浏览器执行，适应复杂的交互场景；而SSG则是预先生成静态HTML页面，适合静态内容的高效呈现。
ReactSSR全流程原理从renderToString到hydrate
1、React SSR包括服务端通过`renderToString`将组件树渲染为HTML字符串，以及客户端通过`hydrate`