溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

簡(jiǎn)單的React SSR服務(wù)器渲染實(shí)現(xiàn)

發(fā)布時(shí)間：2020-09-14 19:30:07 來源：腳本之家 閱讀：138 作者：舊丶時(shí)候 欄目：web開發(fā)

為什么要SSR

單頁(yè)應(yīng)用將UI層和內(nèi)容都由javascript來渲染，搜索引擎或網(wǎng)頁(yè)爬蟲需要完成的HTML結(jié)構(gòu)，因此單頁(yè)應(yīng)用如果只在客戶端渲染，不利于SEO，此外盡管我們可以通過按需加載的形式來減少首頁(yè)加載的js，但是通過js來渲染DOM的時(shí)候還是會(huì)有一定的時(shí)間延遲。

0.前言

服務(wù)端渲染在項(xiàng)目中不是剛需的東西，但有的時(shí)候也是需要做一個(gè)服務(wù)端渲染，項(xiàng)目要做服務(wù)端渲染當(dāng)然是有很多好處的

  • 首屏加載快，相比SPA單頁(yè)應(yīng)用還要有優(yōu)勢(shì)。
  • SEO 優(yōu)化 利于爬蟲，爬取數(shù)據(jù)。

1. 簡(jiǎn)介

服務(wù)端渲染是指頁(yè)面的渲染和生成是在服務(wù)端完成的，并將渲染好的頁(yè)面返回客戶端。

2. 安裝

安裝的時(shí)候版本都是最新版，而新的版本很多方法和API有棄用和更新的，導(dǎo)致最后項(xiàng)目無法運(yùn)行。

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.配置

安裝完成后寫一個(gè)啟動(dòng)文件 start.js：

// start.js
require('babel-core/register')({
  ignore: [/node_modules/],
  presets: [
    'stage-2',
    'react',
    [
      "latest-node",
      { "target": "current" }
    ]
  ]
});

require('babel-polyfill');
require('./../index');

在寫一個(gè)入口文件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');
});

執(zhí)行npm start啟動(dòng)項(xiàng)目

"scripts": {
  "start": "node ./src/start.js"
 },

4.結(jié)果

打開瀏覽器查看http://localhost:3000/ 

簡(jiǎn)單的React SSR服務(wù)器渲染實(shí)現(xiàn)

5.結(jié)束語(yǔ)

到這里就完成了一個(gè)簡(jiǎn)單的 React SSR，當(dāng)然實(shí)現(xiàn)React服務(wù)端渲染還可以用別的方式，比如Next.js。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手