【react ssr 服务端同构】最佳入门服务端同构指南
这个是针对小白入门的文章，大神请绕过。
本文首发： http://shudong.wang/article/101
什么是服务端同构 ssr
一套代码既可以在服务端运行又可以在客户端运行，这就是同构应用。简而言之,就是服务端直出和客户端渲染的组合,能够充分结合两者的优势，并有效避免两者的不足。
概括地说，同构就是服务端（Node）替客户端请求接口，获取到数据后，将有数据和结构的页面渲染好之后返回给客户端，这样避免了客户端页面首次渲染，同时服务端RPC比客户端请求要快。
可以看看这个文章 https://www.zhihu.com/questio...
为什么要用服务端渲染
代码表现没有同构之前
同构之后
如果搜索引擎蜘蛛来到你的网站，网站返回的的内容几乎没有，这就不太友好了，它就无功而返，相对你的网站就很难被搜索引擎收入。
来看看一般实现方案
一般配合后端框架 如： koa express 用什么自己选择
来来来，直接体验一把 最简单的react ssr 配置
如果你想体验 ssr 渲染，最好理解请看这个分支
分支 simple-ssr
聊聊思路
这个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('*',reactTpl))
})
app.listen(3006,function () {
console.log('====================================')
console.log('open url view website')
console.log('====================================')
console.log("http://localhost:3006")
})
使用node 启动这个express 服务就会把项目提前渲染到页面上
理解了后，去下载demo吧，嘿嘿，顺便点个star，然后尝试体验一把，顺便尝试把自己的项目改装一下吧
如果感兴趣持续关注，后续进阶
[*] 本地开发服务端重构[*] 本地开发热更新同步到服务端渲染[*] 项目目录架构
