前言
本次講述的內容主要是 react 與 koa 搭建的一套 ssr 框架，是在別人造的輪子上再添加了一些自己的想法和完善一下自己的功能。
本次用到的技術為： react | rematch | react-router | koa
react服務端渲染優(yōu)勢
SPA（single page application)單頁應用雖然在交互體驗上比傳統(tǒng)多頁更友好，但它也有一個天生的缺陷，就是對搜索引擎不友好，不利于爬蟲爬取數(shù)據(jù)（雖然聽說chrome能夠異步抓取spa頁面數(shù)據(jù)了）；
SSR與傳統(tǒng) SPA（Single-Page Application - 單頁應用程序）相比，服務器端渲染(SSR)的優(yōu)勢主要在于：更好的 SEO 和首屏加載效果。
在 SPA 初始化的時候內容是一個空的 div，必須等待 js 下載完才開始渲染頁面，但 SSR 就可以做到直接渲染html結構，極大地優(yōu)化了首屏加載時間，但上帝是公平的，這種做法也增加了我們極大的開發(fā)成本，所以大家必須綜合首屏時間對應用程序的重要程度來進行開發(fā)，或許還好更好地代替品（骨架屏）。
react服務端渲染流程
組件渲染
首先肯定是根組件的render，而這一部分和SPA有一些小不同。
使用 ReactDOM.render() 來混合服務端渲染的容器已經被棄用，并且會在React 17 中刪除。使用hydrate() 來代替。
hydrate與 render 相同，但用于混合容器，該容器的HTML內容是由 ReactDOMServer 渲染的。 React 將嘗試將事件監(jiān)聽器附加到現(xiàn)有的標記。
hydrate 描述的是 ReactDOM 復用 ReactDOMServer 服務端渲染的內容時盡可能保留結構，并補充事件綁定等 Client 特有內容的過程。
import React from 'react';import ReactDOM from 'react-dom';ReactDOM.hydrate(<App />, document.getElementById('app'));在服務端中，我們可以通過 renderToString 來獲取渲染的內容來替換 html 模版中的東西。
const jsx = <StaticRouter location={url} context={routerContext}> <AppRoutes context={defaultContext} initialData={data} /> </StaticRouter> const html = ReactDOMServer.renderToString(jsx);let ret = ` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no"> </head> <body> <div id="app">${html}</div> </body> </html>`;return ret;服務端返回替換后的 html 就完成了本次組件服務端渲染。
路由同步渲染
在項目中避免不了使用路由，而在SSR中，我們必須做到路由同步渲染。
首先我們可以把路由拆分成一個組件，服務端入口和客戶端都可以分別引用。
function AppRoutes({ context, initialData }: any) { return ( <Switch> { routes.map((d: any) => ( <Route<InitRoute> key={d.path} exact={d.exact} path={d.path} init={d.init || ''} component={d.component} /> )) } <Route path='/' component={Home} /> </Switch> );}
新聞熱點
疑難解答
圖片精選
