為什么要SSR
單頁應用將UI層和內容都由javascript來渲染，搜索引擎或網頁爬蟲需要完成的HTML結構，因此單頁應用如果只在客戶端渲染，不利于SEO，此外盡管我們可以通過按需加載的形式來減少首頁加載的js，但是通過js來渲染DOM的時候還是會有一定的時間延遲。
0.前言
服務端渲染在項目中不是剛需的東西，但有的時候也是需要做一個服務端渲染，項目要做服務端渲染當然是有很多好處的
1. 簡介
服務端渲染是指頁面的渲染和生成是在服務端完成的，并將渲染好的頁面返回客戶端。
2. 安裝
安裝的時候版本都是最新版，而新的版本很多方法和API有棄用和更新的，導致最后項目無法運行。
npm install --save-dev koa npm install --save-dev babel-core npm install --save-dev babel-polyfill npm install --save-dev babel-preset-latest-node npm install --save-dev babel-preset-stage-2 npm install --save-dev babel-preset-react # or yarn add -dev koa yarn add -dev babel-core yarn add -dev babel-polyfill yarn add -dev babel-preset-latest-node yarn add -dev babel-preset-stage-2 yarn add -dev babel-preset-react
3.配置
安裝完成后寫一個啟動文件 start.js：
// start.js
require('babel-core/register')({
ignore: [/node_modules/],
presets: [
'stage-2',
'react',
[
"latest-node",
{ "target": "current" }
]
]
});
require('babel-polyfill');
require('./../index');
在寫一個入口文件index.js
// index.js
import 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>
<h2>Hello，World</h2>
</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。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
