為什么要SSR
單頁應用將UI層和內容都由javascript來渲染，搜索引擎或網頁爬蟲需要完成的HTML結構，因此單頁應用如果只在客戶端渲染，不利于SEO，此外盡管我們可以通過按需加載的形式來減少首頁加載的js，但是通過js來渲染DOM的時候還是會有一定的時間延遲。
0.前言
服務端渲染在項目中不是剛需的東西，但有的時候也是需要做一個服務端渲染，項目要做服務端渲染當然是有很多好處的
1. 簡介
服務端渲染是指頁面的渲染和生成是在服務端完成的，并將渲染好的頁面返回客戶端。
2. 安裝
安裝的時候版本都是最新版，而新的版本很多方法和API有棄用和更新的，導致最后項目無法運行。
npm install --save-dev koanpm install --save-dev babel-corenpm install --save-dev babel-polyfillnpm install --save-dev babel-preset-latest-nodenpm install --save-dev babel-preset-stage-2npm install --save-dev babel-preset-react# oryarn add -dev koayarn add -dev babel-coreyarn add -dev babel-polyfillyarn add -dev babel-preset-latest-nodeyarn add -dev babel-preset-stage-2yarn add -dev babel-preset-react
3.配置
安裝完成后寫一個啟動文件 start.js：
// start.jsrequire('babel-core/register')({ ignore: [/node_modules/], presets: [ 'stage-2', 'react', [ "latest-node", { "target": "current" } ] ]});require('babel-polyfill');require('./../index');在寫一個入口文件index.js
// index.jsimport Koa from 'koa';import React from 'react';import ReactDOMServer from 'react-dom/server';const { renderToString } = ReactDOMServer;const app = new Koa();app.use(ctx => { ctx.body = renderToString( <div> <h1>Hello，World</h1> </div> );});app.listen(3000, () => { console.log('server run in 3000');});執行npm start啟動項目
"scripts": { "start": "node ./src/start.js" },4.結果
打開瀏覽器查看http://localhost:3000/
5.結束語
到這里就完成了一個簡單的 React SSR，當然實現React服務端渲染還可以用別的方式，比如Next.js。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
