SSR介绍

SSR服务端渲染的缩写，服务端读取到组件，返回html，需要在客户端注入事件的一个过程

SSR的优点

1.更好的SEO

2.更快的渲染，无需等待所有js加载完成，有更好的用户体验

缺点

1.部署和SPA不同，需要处于node 服务环境

2.在 Node.js 中渲染完整的应用程序，显然会比仅仅提供静态文件的 server 更加大量占用 CPU 资源

react技术栈ssr解决方案介绍

react ssr：使用react-dom/server中的renderToString/renderToPipeableStream方法来实现渲染。

nextjs：基于react框架的库

vue技术栈ssr解决方案介绍（v2.cn.vuejs.org/v2/guide/ss…

vue ssr：vue-server-renderer中的renderToString

Nuxt.js 是一个基于 Vue 生态的更高层的框架，为开发服务端渲染的 Vue 应用提供了极其便利的开发体验

1. redux-tookit简单介绍

<!-- 创建store -->
configureStore()
<!-- 创建有初始化的reducer -->
createSlice()
<!-- 创建异步请求 -->
createAsyncThunk()

2. react renderToString() renderToPipeableStream()的区别

renderToString： 将一个 React 元素渲染成其初始的 HTML。React 将返回一个 HTML 字符串。你可以使用这种方法在服务器上生产 HTML，并在初始请求中发送标记。以加快页面加载速度，并允许搜索引擎以 SEO 为目的抓取你的页面。

如果你在一个已被服务端渲染标记的节点上调用 ReactDOM.hydrateRoot()，React 会保留它，只附加事件处理程序，让你有一个非常良好的首次加载体验。

renderToPipeableStream： 将一个 React 元素渲染为初始 HTML。返回一个带有 pipe(res) 方法的流，用于管道输出。abort() 用于中止请求。完美支持了 suspense 和 HTML 流，“延迟” 的内容块会通过内联的 <script> 标签嵌入

3.服务端和客户端路由：StaticRouter/BrowserRouter

服务端渲染的时候路由是无状态的，所以要用StaticRouter。 BrowserRouter使用 HTML5 提供的 history API (pushState, replaceState 和 popstate 事件) 来保持 UI 和 URL 的同步

在服务端可以使用Helmet：设置头部