溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關react服務器渲染的示例分析的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
前言
本文是基于react ssr的入門教程，在實際項目中使用還需要做更多的配置和優化，比較適合第一次嘗試react ssr的小伙伴們。技術涉及到 koa2 + react，案例使用create-react-app創建
SSR 介紹
Server Slide Rendering，縮寫為 ssr 即服務器端渲染，這個要從SEO說起，目前react單頁應用HTML代碼是下面這樣的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="shortcut icon" href="favicon.ico" rel="external nofollow" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/> <meta name="theme-color" content="#000000" /> <title>React App</title> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> <script src="/js/main.js"></script> </body> </html>
如果main.js 加載比較慢，會出現白屏一閃的現象。
傳統的搜索引擎爬蟲因為不能抓取JS生成后的內容，遇到單頁web項目，抓取到的內容啥也沒有。在SEO上會吃很多虧，很難排搜索引擎到前面去。
React SSR（react服務器渲染）正好解決了這2個問題。
React SSR介紹
這里通過一個例子來帶大家入坑！先使用create-react-app創建一個react項目。因為要修改webpack，這里我們使用react-app-rewired啟動項目。根目錄創建一個server目錄存放服務端代碼，服務端代碼我們這里使用koa2。目錄結構如下：
這里先來看看react ssr是怎么工作的。
這個業務流程圖比較清晰了，服務端只生成HTML代碼，實際上前端會生成一份main.js提供給服務端的HTML使用。這就是react ssr的工作流程。有了這個圖會更好的理解，如果這個業務沒理解清楚，后面的估計很難理解。
react提供的SSR方法有兩個renderToString 和 renderToStaticMarkup，區別如下：
renderToString 方法渲染的時候帶有 data-reactid 屬性. 在瀏覽器訪問頁面的時候，main.js能識別到HTML的內容，不會執行React.createElement二次創建DOM。
renderToStaticMarkup 則沒有 data-reactid 屬性，頁面看上去干凈點。在瀏覽器訪問頁面的時候，main.js不能識別到HTML內容，會執行main.js里面的React.createElement方法重新創建DOM。
實現流程
好了，我們都知道原理了，可以開始coding了,目錄結構如下：
create-react-app 的demo我沒動過，直接用這個做案例了，前端項目基本上就沒改了,等會兒我們服務器端要使用這個模塊。代碼如下：
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org" rel="external nofollow"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
}
export default App;在項目中新建server目錄，用于存放服務端代碼。為了簡化，我這里只有2個文件，項目中我們用的ES6，所以還要配置下.babelrc
.babelrc 配置，因為要使用到ES6
{
"presets": [
"env",
"react"
],
"plugins": [
"transform-decorators-legacy",
"transform-runtime",
"react-hot-loader/babel",
"add-module-exports",
"transform-object-rest-spread",
"transform-class-properties",
[
"import",
{
"libraryName": "antd",
"style": true
}
]
]
}index.js 項目入口做一些預處理，使用asset-require-hook過濾掉一些類似 import logo from "./logo.svg"; 這樣的資源代碼。因為我們服務端只需要純的HTML代碼，不過濾掉會報錯。這里的name，我們是去掉了hash值的require("asset-require-hook")({
extensions: ["svg", "css", "less", "jpg", "png", "gif"],
name: '/static/media/[name].[ext]'
});
require("babel-core/register")();
require("babel-polyfill");
require("./app");public/index.html html模版代碼要做個調整，{{root}} 這個可以是任何可以替換的字符串，等下服務端會替換這段字符串。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" rel="external nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" rel="external nofollow" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">{{root}}</div>
</body>
</html>app.js 服務端渲染的主要代碼，加載App.js，使用renderToString 生成html代碼，去替換掉 index.html 中的 {{root}} 部分import App from '../src/App';
import Koa from 'koa';
import React from 'react';
import Router from 'koa-router';
import fs from 'fs';
import koaStatic from 'koa-static';
import path from 'path';
import { renderToString } from 'react-dom/server';
// 配置文件
const config = {
port: 3030
};
// 實例化 koa
const app = new Koa();
// 靜態資源
app.use(
koaStatic(path.join(__dirname, '../build'), {
maxage: 365 * 24 * 60 * 1000,
index: 'root'
// 這里配置不要寫成'index'就可以了，因為在訪問localhost:3030時，不能讓服務默認去加載index.html文件，這里很容易掉進坑。
})
);
// 設置路由
app.use(
new Router()
.get('*', async (ctx, next) => {
ctx.response.type = 'html'; //指定content type
let shtml = '';
await new Promise((resolve, reject) => {
fs.readFile(path.join(__dirname, '../build/index.html'), 'utfa8', function(err, data) {
if (err) {
reject();
return console.log(err);
}
shtml = data;
resolve();
});
});
// 替換掉 {{root}} 為我們生成后的HTML
ctx.response.body = shtml.replace('{{root}}', renderToString(<App />));
})
.routes()
);
app.listen(config.port, function() {
console.log('服務器啟動，監聽 port： ' + config.port + ' running~');
});config-overrides.js 因為我們用的是create-react-app，這里使用react-app-rewired去改下webpack的配置。因為執行npm run build的時候會自動給資源加了hash值，而這個hash值，我們在asset-require-hook的時候去掉了hash值，配置里面需要改下，不然會出現圖片不顯示的問題，這里也是一個坑，要注意下。
module.exports = {
webpack: function(config, env) {
// ...add your webpack config
// console.log(JSON.stringify(config));
// 去掉hash值，解決asset-require-hook資源問題
config.module.rules.forEach(d => {
d.oneOf &&
d.oneOf.forEach(e => {
if (e && e.options && e.options.name) {
e.options.name = e.options.name.replace('[hash:8].', '');
}
});
});
return config;
}
};好了，所有的代碼就這些了，是不是很簡單了？我們koa2讀取的靜態資源是 build目錄下面的。先執行npm run build打包項目，再執行node ./server 啟動服務端項目。看下http://localhost:3030頁面的HTML代碼檢查下：
沒有{{root}}了，服務器渲染成功！
感謝各位的閱讀！關于“react服務器渲染的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
