【react ssr 服务端同构】最佳入门服务端同构指南

【react ssr 服务端同构】最佳入门服务端同构指南

这个是针对小白入门的文章,大神请绕过。

什么是服务端同构 ssr

一套代码既可以在服务端运行又可以在客户端运行,这就是同构应用。简而言之, 就是服务端直出和客户端渲染的组合, 能够充分结合两者的优势,并有效避免两者的不足。

概括地说,同构就是服务端(Node)替客户端请求接口,获取到数据后,将有数据和结构的页面渲染好之后返回给客户端,这样避免了客户端页面首次渲染,同时服务端RPC比客户端请求要快。

可以看看这个文章 https://www.zhihu.com/question/52235652/answer/186088553

为什么要用服务端渲染

性能: 降低首屏渲染时间 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 导出 ```server-entry.js 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)) })



### 全部文件
```server.js
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,然后尝试体验一把,顺便尝试把自己的项目改装一下吧

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

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