最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

為什么要SSR

成都創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),昆明企業(yè)網(wǎng)站建設(shè),昆明品牌網(wǎng)站建設(shè),網(wǎng)站定制,昆明網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,昆明網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

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

0.前言

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

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

1. 簡介

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

2. 安裝

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

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(
    

      
Hello，World
    
  );
});

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，當(dāng)然實現(xiàn)React服務(wù)端渲染還可以用別的方式，比如Next.js。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。