【react ssr 服務端同構】最佳入門服務端同構指南

【react ssr 服務端同構】最佳入門服務端同構指南

這個是針對小白入門的文章，大神請繞過。
本文首發： http://shudong.wang/article/101

什麼是服務端同構 ssr

一套代碼既能夠在服務端運行又能夠在客戶端運行，這就是同構應用。簡而言之, 就是服務端直出和客戶端渲染的組合, 可以充分結合二者的優點，並有效避免二者的不足。

歸納地說，同構就是服務端（Node）替客戶端請求接口，獲取到數據後，將有數據和結構的頁面渲染好以後返回給客戶端，這樣避免了客戶端頁面首次渲染，同時服務端RPC比客戶端請求要快。

能夠看看這個文章 https://www.zhihu.com/questio...

爲何要用服務端渲染

性能: 下降首屏渲染時間
SEO: seo友好

代碼表現沒有同構以前

同構以後

若是搜索引擎蜘蛛來到你的網站，網站返回的的內容幾乎沒有，這就不太友好了，它就無功而返，相對你的網站就很難被搜索引擎收入。

來看看通常實現方案

通常配合後端框架 如： koa express 用什麼本身選擇

來來來，直接體驗一把 最簡單的react ssr 配置

若是你想體驗 ssr 渲染，最好理解請看這個分支
分支 simple-ssr

demo 地址

聊聊思路

這個demo 採用的express react webpack 最基礎的同構，後續會慢慢增長功能
每一個功能儘可能在一個分支，方便你們查看
react 有個成熟的解決方案 next ，通常這種方案，不適合遷移，靈活度不高 和 vue 的ssr nuxt 相似

首先配置webpack

這個配置主要把文件打包

const path = require('path')

module.exports = {
    target: "node",
    entry: {
        app: path.join(__dirname, '主要程序入口文件') //server-entry.js
    },
    output: {
        filename: 'server-entry.js',
        path: path.join(__dirname, '../dist'),
        publicPath: '/public',
        libraryTarget: 'commonjs2'
    },
    module: {
        rules: [
            {
                test: /.jsx$/,
                loader: 'babel-loader'
            },
            {
                test: /.js$/,
                loader: 'babel-loader',
                exclude: [
                    path.join(__dirname, '../node_modules')
                ]
            }
        ]
    }
}

這個主要把react 導出

import React from 'react'
import App from './App.js'

export default <App />

重點來了，主要是server.js

使用 react-dom/server 把導出的文件編譯成字符串,替換到咱們使用的模板

當咱們訪問url 的時候，讓express去接管

app.get('*', function (req, res) {
  const reactTpl = ReactSSR.renderToString(serverEntry)
  res.send(template.replace('<!-- stark -->', reactTpl))
})

所有文件

const express = require('express')
const ReactSSR = require('react-dom/server')
const fs = require('fs')
const path = require('path')
const app = express()

const serverEntry = require('../dist/server-entry').default
// 裏面讀取的是編譯後的文件
const template = fs.readFileSync(path.join(__dirname, '../dist/index.html'), 'utf8')
// 設置public加在的靜態目錄
app.use('/public', express.static(path.join(__dirname, '../dist')))


app.get('*', function (req, res) {
  const reactTpl = ReactSSR.renderToString(serverEntry)
  res.send(template.replace('<!-- stark -->', reactTpl))
})

app.listen(3006, function () {
  console.log('====================================')
  console.log('open url view website')
  console.log('====================================')
  console.log("http://localhost:3006")
})

使用node 啓動這個express 服務就會把項目提早渲染到頁面上

理解了後，去下載demo吧，嘿嘿，順便點個star，而後嘗試體驗一把，順便嘗試把本身的項目改裝一下吧

若是感興趣持續關注，後續進階

[*] 本地開發服務端重構
[*] 本地開發熱更新同步到服務端渲染
[*] 項目目錄架構