84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
32909 人学习
关于服务端渲染我也看过一些相应的文章,貌似就是将一些框架在node端执行初始化。但是我在想,一般前端框架肯定是要涉及dom的,但是服务端肯定是没dom操作的。我想问的是那:1.所谓的服务端渲染是解决了什么问题?2.seo的问题是如何被解决了?3.spa应用的首屏性能低目前有一些什么解决策略?
闭关修行中......
对于 react 的服务端渲染,简单说说我的理解:
最大的应该是解决 seo 的问题,其次在于加快 client 渲染的速度。
server-side-rendering(SSR) 简单来说就是调用了 ReactDOM.renderToString 这个方法,在服务器端的一个 js 上下文对组件进行渲染,然后返回 html 的标签,这样,当 client 端 react 跑的时候,通过 react 的虚拟 dom 通过对比 react-id 进行增量更新,也就是如果某个 dom 上面 client 没有啥更新的话,就直接拿 server 的结果,所以说在一定程度上加速了 client 的渲染速度。
ReactDOM.renderToString
其次就是 seo 因为 server 直接返回了 html 的标签,所以即使是爬虫,也会返回真正的有 seo 的标签。这对一些门户网站非常有用。这样搜索引擎的爬虫就能爬到网站的关键信息,对网站排名有所帮助。
SSR 性能的话,一般的解决方法貌似都是通过 cache,github 上面有一些项目,例如electrode-react-ssr-cachingreact-ssr-optimization 这些项目都是通过 cache 对 SSR 进行优化,本质上都是通过对比 props,进行 cache 加快下一次渲染。
对于 react 的服务端渲染,简单说说我的理解:
最大的应该是解决 seo 的问题,其次在于加快 client 渲染的速度。
server-side-rendering(SSR) 简单来说就是调用了
ReactDOM.renderToString
这个方法,在服务器端的一个 js 上下文对组件进行渲染,然后返回 html 的标签,这样,当 client 端 react 跑的时候,通过 react 的虚拟 dom 通过对比 react-id 进行增量更新,也就是如果某个 dom 上面 client 没有啥更新的话,就直接拿 server 的结果,所以说在一定程度上加速了 client 的渲染速度。其次就是 seo 因为 server 直接返回了 html 的标签,所以即使是爬虫,也会返回真正的有 seo 的标签。这对一些门户网站非常有用。这样搜索引擎的爬虫就能爬到网站的关键信息,对网站排名有所帮助。
SSR 性能的话,一般的解决方法貌似都是通过 cache,github 上面有一些项目,例如electrode-react-ssr-caching
react-ssr-optimization 这些项目都是通过 cache 对 SSR 进行优化,本质上都是通过对比 props,进行 cache 加快下一次渲染。