react-ssr 學(xué)習(xí)筆記 + 代碼

技術(shù)棧：

react
react-redux
redux-saga
react-router-dom
reduxsauce
seamless-immutable
express
webpack

沒(méi)有react基礎(chǔ)的請(qǐng)先看這里
源碼請(qǐng)看這里

image.png

可以切換標(biāo)簽，查看不同進(jìn)度的代碼
git tag [tagName]

Tag 1.0

搭建react在node上的運(yùn)行環(huán)境

npm i 
npm run build
npm run start1

8 版本的babel-loader會(huì)報(bào)錯(cuò)

Tag 2.0

配置nodemon 和 node-run-all
服務(wù)端渲染react靜態(tài)頁(yè)面

npm run dev

Tag 2.1

主要通過(guò)ReactDOMServer方法將react編譯成字符串

app.get('/', function(req, res) {
    res.send(
        `<div>${ReactDOMServer.renderToString(<Home />)}</div>
        <script src='/index.js'></script>
        `
    );
});

同構(gòu)js運(yùn)行原理

Tag 2.2

服務(wù)器是沒(méi)有事件的谁尸，當(dāng)服務(wù)器將頁(yè)面渲染好以后舅踪，客戶端再次執(zhí)行，將事件綁定

import React from 'react'
import ReactDom from 'react-dom'
import Home from '../containers/Home'

ReactDom.hydrate(<Home/>,document.getElementById('root'))

簡(jiǎn)單的demo

Tag 2.3

整理webpack

npm i webpack-merge

options:{
    presets:[
        'react','env','stage-0'
    ]
}

env已經(jīng)囊括了es2015,es2016等配置良蛮，所以寫了這一個(gè)抽碌，其他的就不再需要了，
stage-0决瞳，它包含stage-1, stage-2以及stage-3的所有功能货徙，同時(shí)還另外支持如下兩個(gè)功能插件：

transform-do-expressions
transform-function-bind

對(duì)ES7一些提案的支持，要寫在env后面皮胡，否則會(huì)報(bào)錯(cuò)

Missing class properties transform

Tag 3.0

添加路由

npm i react-router-dom

客戶端

 <BrowserRouter>{Routes}</BrowserRouter>

服務(wù)端

<StaticRouter location={req.path}>
    {Router}
</StaticRouter>

Tag 3.1

多路由跳轉(zhuǎn)及代碼整理

Tag 3.2

集成react-redux

npm i redux
npm i react-redux

只需吧服務(wù)端和客戶端兩個(gè)入口都用provide包裹起來(lái)就行

Tag 3.3

集成redux-saga
因?yàn)閞edux-saga 運(yùn)用了generator
運(yùn)行后報(bào)錯(cuò)：

regeneratorRuntime is not defined

npm i --save-dev babel-plugin-transform-runtime

在根目錄新建.babelrc

{
  "plugins": [
    [
      "transform-runtime",
      {
        "helpers": false,
        "polyfill": false,
        "regenerator": true,
        "moduleName": "babel-runtime"
      }
    ]
  ]
}

Tag 3.4

引入seamless-immutable 和 reduxsauce
seamless-immutable是簡(jiǎn)化版的immutable

Tag 3.5

簡(jiǎn)單的網(wǎng)絡(luò)請(qǐng)求和css引入
css-loader 要用1.0得破婆，因?yàn)閎able-loader 8.0做了升級(jí)
componentDidMount 只會(huì)再客戶端執(zhí)行不會(huì)在服務(wù)端執(zhí)行

https://reacttraining.com/react-router/web/guides/server-rendering

fetch 在node 上報(bào)undefind 換成了axios
注意給自己的服務(wù)器接口打開(kāi)允許跨域

app.all('/api/number', function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

客戶端運(yùn)行

/api/number = http://39.105.161.0/api/number

服務(wù)端運(yùn)行

/api/number = 根目錄/api/number

所以在請(qǐng)求的時(shí)候要區(qū)分是服務(wù)端還是客戶端
Tag 3.5.1
脫水和注水

<script>
  window.context={
    state:${JSON.stringify(store.getState())}
  }
</script>


export const getClientStore = ()=>{  // 使每個(gè)用戶store互相獨(dú)立
    const defaultState = Immutable(window.context.state)
    const store =  createStore(reducer,defaultState,applyMiddleware(sagaMiddleware))
    sagaMiddleware.run(rootSaga)
    return store
}

服務(wù)器渲染css

componentWillMount(){
  // 服務(wù)器端渲染
  if(styles._getCss){
    this.props.staticContext.css.push(styles._getCss())
  }
}   

const css = context.css.length?context.css.join('/n'):{}
 
<style>${css}</style>

seo

title
meta

文字 (拿出你改論文的本事來(lái)原創(chuàng))
圖片（拿出你修圖的本事原創(chuàng)）
連接外連多內(nèi)連相關(guān)性強(qiáng)
react-helmet
客戶端

import {Helmet} from 'react-helmet'

<Helmet>
  <title>home</title>
  <meta name='description' content={'這是home'}></meta>
</Helmet>