簡單的React SSR服務器渲染實現(xiàn)

更新時間：2018年12月11日 11:28:24 作者：舊丶時候

這篇文章主要介紹了簡單的React SSR服務器渲染實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

為什么要SSR

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

0.前言

服務端渲染在項目中不是剛需的東西，但有的時候也是需要做一個服務端渲染，項目要做服務端渲染當然是有很多好處的

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

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>
      <h1>Hello，World</h1>
    </div>
  );
});

app.listen(3000, () => {
  console.log('server run in 3000');
});

執(zhí)行npm start啟動項目

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

4.結(jié)果

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

5.結(jié)束語

到這里就完成了一個簡單的 React SSR，當然實現(xiàn)React服務端渲染還可以用別的方式，比如Next.js。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

React實現(xiàn)一個拖拽排序組件的示例代碼
這篇文章主要給大家介紹了React實現(xiàn)一個拖拽排序組件?-?支持多行多列、支持TypeScript、支持Flip動畫、可自定義拖拽區(qū)域,文章通過代碼示例介紹的非常詳細,需要的朋友可以參考下
2023-11-11
使用react和redux構(gòu)建一個簡單的計數(shù)器
這篇文章主要為大家詳細介紹了如何使用react和redux構(gòu)建一個簡單的計數(shù)器,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下
2025-01-01
React.js綁定this的5種方法(小結(jié))
this在javascript中已經(jīng)相當靈活，這篇文章主要介紹了React.js綁定this的5種方法(小結(jié))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-06-06
react中(含hooks)同步獲取state值的方式
這篇文章主要介紹了react(含hooks)中同步獲取state值的方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
使用react-activation實現(xiàn)keepAlive支持返回傳參
本文主要介紹了使用react-activation實現(xiàn)keepAlive支持返回傳參，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-05-05
基于React封裝組件的實現(xiàn)步驟
很多小伙伴在第一次嘗試封裝組件時會和我一樣碰到許多問題，本文主要介紹了基于React封裝組件的實現(xiàn)步驟，感興趣的可以了解一下
2021-11-11
淺談React 服務器端渲染的使用
本篇文章主要介紹了淺談React 服務器端渲染的使用，React是最受歡迎的客戶端 JavaScript 框架，在本教程中，我們將逐步向您介紹服務器端的渲染示例
2018-05-05
React列表欄及購物車組件使用詳解
這篇文章主要為大家詳細介紹了React列表欄及購物車組件使用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-06-06
React配置多個代理實現(xiàn)數(shù)據(jù)請求返回問題
這篇文章主要介紹了React之配置多個代理實現(xiàn)數(shù)據(jù)請求返回問題，本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2022-08-08
關于antd tree和父子組件之間的傳值問題(react 總結(jié))
這篇文章主要介紹了關于antd tree 和父子組件之間的傳值問題，是小編給大家總結(jié)的一些react知識點，本文通過一個項目需求實例代碼詳解給大家介紹的非常詳細，需要的朋友可以參考下
2021-06-06