1.什么是SSR和CSR
SSR（Server Side Rendering，服务端渲染），指的是页
面在服务器端已经生成了完成的HTML页面结构，不需要浏
览器通过执行js代码，创建页面结构；
对应的是CSR（Client Side Rendering，客户端渲染），
我们开发的SPA页面通常依赖的就是客户端渲染；
2. SPA：单页面复应用存在的问题
1. SEO优化问题。搜索引擎优化。
2. 首屏的渲染速度
1.百度会下载网站的index.html进行爬虫，请求的index.html文件。里面body只有一个div id=root。js等等是不会下载的，（百度的服务器下载下来执行，还消耗服务器性能），所以信息列表什么的是没有的，搜录到自己的数据库里面，搜录的内容很少，meta里面的数据什么的。当用户在百度搜索关键字的时候，因为它收录的信息很少，匹配度低。所以这个网站的排名就非常靠后。网站没有流量，就会倒闭。所以SPA页面非常不利于SEO优化的。
2.早期SSR在服务端都渲染好了，请求下来的index.html里面有轮播图，商品列表等等完整的网页。但是SPA，请求下来的index.html里面有script src="bundle.js", 如果没有用懒加载等等的化，所用的东西都放到bundlle这个包里面。1.下载速度是很慢的。2.浏览器执行bundle.js中的代码，createElement等。执行完后信息列表之类的显示出来，所以早期SSR的首屏渲染速度更快。
如果网站不是挂在网上，自己使用，就不用考虑SEO，如果没有慢很多，0.几秒，而且当前浏览器执行速度很快，其实没有首屏慢很多。
而且当前谷歌会执行js代码进行收录的。
3. 前端SSR
如何让前端页面也想做SSR渲染呢？借助于node。
node
1.下载index.html
2.下载js文件，并且执行js文件，生成html页面结构。（node可以完成）。通过VUE、REACT SSR API =》 nuxt/next框架。
node服务器把页面渲染好，浏览器直接下载整个页面。
3.相当于服务器和浏览器中间多了一个node转换器。
4.SSR-同构应用和hydration的整个过程（水化合）
◼ 什么是同构？
一套代码既可以在服务端运行（node借助react，vue的api执行，输出html页面结构给浏览器，这个html结构是字符串，没有绑定任何js的东西，只是展示的目的，没有操作的目的）又可以在客户端（浏览器）运行，这就是同构应用。
现在node里面生成展示的页面，这个时候不能操作页面的，然后到浏览器以后，页面植入js等东西（hydration），js代码重新执行一遍。页面变得可以操作了。
◼ 同构是一种SSR的形态，是现代SSR的一种表现形式。
当用户发出请求时，先在服务器通过SSR渲染出首页的内容。
但是对应的代码同样可以在客户端被执行。
执行的目的包括事件绑定等以及其他页面切换时也可以在客户端被渲染；
5.Hydration
◼ 在进行 SSR 时，我们的页面会呈现为 HTML。
但仅 HTML 不足以使页面具有交互性。例如，浏览器端 JavaScript 为零的页面不能是交互式的（没有 JavaScript 事件处理程序来响应用
户操作，例如单击按钮）。
为了使我们的页面具有交互性，除了在 Node.js 中将页面呈现为 HTML 之外，我们的 UI 框架（Vue/React/...）还在浏览器中加载和呈现页面。（它创建页面的内部表示，然后将内部表示映射到我们在 Node.js 中呈现的 HTML 的 DOM 元素。）
◼ 这个过程称为hydration。
hydration只是ssr同构的一个步骤。
6. useId的作用
7. useTransition
8. useDeferredValue
