【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，然后尝试体验一把，顺便尝试把自己的项目改装一下吧

如果感兴趣持续关注，后续进阶

[*] 本地开发服务端重构
[*] 本地开发热更新同步到服务端渲染
[*] 项目目录架构