react服務(wù)器渲染的示例分析-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)react服務(wù)器渲染的示例分析的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來(lái)看看吧。

成都創(chuàng)新互聯(lián)成立與2013年，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站建設(shè)、做網(wǎng)站網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元山亭做網(wǎng)站,已為上家服務(wù),為山亭各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18980820575

前言

本文是基于react ssr的入門教程，在實(shí)際項(xiàng)目中使用還需要做更多的配置和優(yōu)化，比較適合第一次嘗試react ssr的小伙伴們。技術(shù)涉及到 koa2 + react，案例使用create-react-app創(chuàng)建

SSR 介紹

Server Slide Rendering，縮寫為 ssr 即服務(wù)器端渲染，這個(gè)要從SEO說起，目前react單頁(yè)應(yīng)用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 加載比較慢，會(huì)出現(xiàn)白屏一閃的現(xiàn)象。
傳統(tǒng)的搜索引擎爬蟲因?yàn)椴荒茏トS生成后的內(nèi)容，遇到單頁(yè)web項(xiàng)目，抓取到的內(nèi)容啥也沒有。在SEO上會(huì)吃很多虧，很難排搜索引擎到前面去。

React SSR（react服務(wù)器渲染）正好解決了這2個(gè)問題。

React SSR介紹

這里通過一個(gè)例子來(lái)帶大家入坑！先使用create-react-app創(chuàng)建一個(gè)react項(xiàng)目。因?yàn)橐薷膚ebpack，這里我們使用react-app-rewired啟動(dòng)項(xiàng)目。根目錄創(chuàng)建一個(gè)server目錄存放服務(wù)端代碼，服務(wù)端代碼我們這里使用koa2。目錄結(jié)構(gòu)如下：

react服務(wù)器渲染的示例分析

這里先來(lái)看看react ssr是怎么工作的。

react服務(wù)器渲染的示例分析

這個(gè)業(yè)務(wù)流程圖比較清晰了，服務(wù)端只生成HTML代碼，實(shí)際上前端會(huì)生成一份main.js提供給服務(wù)端的HTML使用。這就是react ssr的工作流程。有了這個(gè)圖會(huì)更好的理解，如果這個(gè)業(yè)務(wù)沒理解清楚，后面的估計(jì)很難理解。

react提供的SSR方法有兩個(gè)renderToString 和 renderToStaticMarkup，區(qū)別如下：

renderToString 方法渲染的時(shí)候帶有 data-reactid 屬性. 在瀏覽器訪問頁(yè)面的時(shí)候，main.js能識(shí)別到HTML的內(nèi)容，不會(huì)執(zhí)行React.createElement二次創(chuàng)建DOM。
renderToStaticMarkup 則沒有 data-reactid 屬性，頁(yè)面看上去干凈點(diǎn)。在瀏覽器訪問頁(yè)面的時(shí)候，main.js不能識(shí)別到HTML內(nèi)容，會(huì)執(zhí)行main.js里面的React.createElement方法重新創(chuàng)建DOM。

實(shí)現(xiàn)流程

好了，我們都知道原理了，可以開始coding了,目錄結(jié)構(gòu)如下：

react服務(wù)器渲染的示例分析

create-react-app 的demo我沒動(dòng)過，直接用這個(gè)做案例了，前端項(xiàng)目基本上就沒改了,等會(huì)兒我們服務(wù)器端要使用這個(gè)模塊。代碼如下：

 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;

在項(xiàng)目中新建server目錄，用于存放服務(wù)端代碼。為了簡(jiǎn)化，我這里只有2個(gè)文件，項(xiàng)目中我們用的ES6，所以還要配置下.babelrc

react服務(wù)器渲染的示例分析

.babelrc 配置，因?yàn)橐褂玫紼S6

{
  "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 項(xiàng)目入口做一些預(yù)處理，使用asset-require-hook過濾掉一些類似 import logo from "./logo.svg"; 這樣的資源代碼。因?yàn)槲覀兎?wù)端只需要純的HTML代碼，不過濾掉會(huì)報(bào)錯(cuò)。這里的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模版代碼要做個(gè)調(diào)整，{{root}} 這個(gè)可以是任何可以替換的字符串，等下服務(wù)端會(huì)替換這段字符串。

<!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 服務(wù)端渲染的主要代碼，加載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
};

// 實(shí)例化 koa
const app = new Koa();

// 靜態(tài)資源
app.use(
 koaStatic(path.join(__dirname, '../build'), {
  maxage: 365 * 24 * 60 * 1000,
  index: 'root' 
  // 這里配置不要寫成'index'就可以了，因?yàn)樵谠L問localhost:3030時(shí)，不能讓服務(wù)默認(rèn)去加載index.html文件，這里很容易掉進(jìn)坑。
 })
);

// 設(shè)置路由
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('服務(wù)器啟動(dòng)，監(jiān)聽 port： ' + config.port + ' running~');
});

config-overrides.js 因?yàn)槲覀冇玫氖莄reate-react-app，這里使用react-app-rewired去改下webpack的配置。因?yàn)閳?zhí)行npm run build的時(shí)候會(huì)自動(dòng)給資源加了hash值，而這個(gè)hash值，我們?cè)赼sset-require-hook的時(shí)候去掉了hash值，配置里面需要改下，不然會(huì)出現(xiàn)圖片不顯示的問題，這里也是一個(gè)坑，要注意下。

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;
 }
};

好了，所有的代碼就這些了，是不是很簡(jiǎn)單了？我們koa2讀取的靜態(tài)資源是 build目錄下面的。先執(zhí)行npm run build打包項(xiàng)目，再執(zhí)行node ./server 啟動(dòng)服務(wù)端項(xiàng)目?？聪耯ttp://localhost:3030頁(yè)面的HTML代碼檢查下：

react服務(wù)器渲染的示例分析

react服務(wù)器渲染的示例分析
沒有{{root}}了，服務(wù)器渲染成功！

感謝各位的閱讀！關(guān)于“react服務(wù)器渲染的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

當(dāng)前文章：react服務(wù)器渲染的示例分析-創(chuàng)新互聯(lián)
當(dāng)前URL：http://muchs.cn/article38/cdsgsp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、面包屑導(dǎo)航、靜態(tài)網(wǎng)站、外貿(mào)建站、微信公眾號(hào)、網(wǎng)站策劃

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容