問題描述

關(guān)于服務(wù)端渲染我也看過一些相應(yīng)的文章，貌似就是將一些框架在node端執(zhí)行初始化。但是我在想，一般前端框架肯定是要涉及dom的，但是服務(wù)端肯定是沒dom操作的。我想問的是那：1.所謂的服務(wù)端渲染是解決了什么問題？2.seo的問題是如何被解決了？3.spa應(yīng)用的首屏性能低目前有一些什么解決策略？

問題解答

對于 react 的服務(wù)端渲染，簡單說說我的理解：

最大的應(yīng)該是解決 seo 的問題，其次在于加快 client 渲染的速度。

server-side-rendering(SSR) 簡單來說就是調(diào)用了 ReactDOM.renderToString 這個方法，在服務(wù)器端的一個 js 上下文對組件進(jìn)行渲染，然后返回 html 的標(biāo)簽，這樣，當(dāng) client 端 react 跑的時候，通過 react 的虛擬 dom 通過對比 react-id 進(jìn)行增量更新，也就是如果某個 dom 上面 client 沒有啥更新的話，就直接拿 server 的結(jié)果，所以說在一定程度上加速了 client 的渲染速度。

其次就是 seo 因?yàn)?server 直接返回了 html 的標(biāo)簽，所以即使是爬蟲，也會返回真正的有 seo 的標(biāo)簽。這對一些門戶網(wǎng)站非常有用。這樣搜索引擎的爬蟲就能爬到網(wǎng)站的關(guān)鍵信息，對網(wǎng)站排名有所幫助。

SSR 性能的話，一般的解決方法貌似都是通過 cache，github 上面有一些項(xiàng)目，例如electrode-react-ssr-cachingreact-ssr-optimization 這些項(xiàng)目都是通過 cache 對 SSR 進(jìn)行優(yōu)化，本質(zhì)上都是通過對比 props，進(jìn)行 cache 加快下一次渲染。