来一个原创react-ssr教程
来一个企业级React SSR前端架构搭建的保姆级教程，react16.8以上版本，路由是express，整个技术是react全家桶+mobx+webpack+axios+antd等等，非诚勿扰，
react-ssr 学习笔记 + 代码
文档地址：https://www.jianshu.com/p/29ed44dc1713
demo地址：https://github.com/z-zp/react-ssr-learning
看看对你有帮助麽
安装教程加代码：
https://github.com/whalealice/react-ssr
https://gitee.com/hold_wl/react-ssr/
希望能帮到你。希望能采纳
https://blog.csdn.net/LuckyWinty/article/details/121026803
https://zhuanlan.zhihu.com/p/407670922
https://blog.csdn.net/qq_42308316/article/details/115967587
https://www.jianshu.com/p/29ed44dc1713
http://www.javashuo.com/article/p-wfodviei-du.html
https://www.zhihu.com/zvideo/1332250417276243968
b站 技术胖老师 讲解的next框架还是很详细的，可以快速帮助你对 ssr 服务端渲染这种方式进行一个入门
再有查询了一些文档，你如果不想采用前后端分离式的写法，想采用静态不分离，可以参考下下面这篇博客，感觉总结的还是比较全的 希望能对你有所帮助
http://www.javashuo.com/article/p-wfodviei-du.html
方案一 使用社区精选框架Next.js
Next.js 是一个轻量级的 React 服务端渲染应用框架。有兴趣的可以去Next.js官网学习下。
方案二 同构
关于同构有两种方案：
通过babel转义node端代码和React代码后执行
let app = express();
app.get('/todo', (req, res) => {
let html = renderToString(
<Route path="/" component={ IComponent } >
<Route path="/todo" component={ AComponent }>
</Route>
</Route>)
res.send( indexPage(html) )
}
})
在这里有两个问题需要处理：
Node不支持前端的import语法，需要引入babel支持。
Node不能解析标签语法。
所以执行Node时，需要使用babel来进行转义，如果出现错误了，也无从查起，个人并不推荐这样做。
所以这里采用第二种方案
webpack进行编译处理
使用webpack打包两份代码，一份用于Node进行服务器渲染，一份用于浏览器进行渲染。
下面具体详细说明下。
搭建Node服务器
由于使用习惯，经常使用Egg框架，而Koa是Egg的底层框架，因此，这里我们采用Koa框架进行服务搭建。
搭建最基本的一个Node服务。
const Koa = require('koa');
const app = new Koa();
app.listen(3000, () => {
console.log("服务器已启动，请访问http://127.0.0.1:3000")
});
配置webpack
众所周知，React代码需要经过打包编译才能执行的，而服务端和客户端运行的代码只有一部分相同，甚至有些代码根本不需要将代码打包，这时就需要将客户端代码和服务端运行的代码分开，也就有了两份webpack配置
webpack 将同一份代码，通过不同的webpack配置，分别为serverConfig和clientConfig，打包为两份代码。
serverConfig和clientConfig配置
通过webpack文档我们可以知道，webpack不仅可以编译web端代码还可以编译其他内容。
这里我们将target设为node。
配置入口文件和出口位置：
const serverConfig = {
target: 'node',
entry: {
page1: './web/render/serverRouter.js',
},
resolve,
output: {
filename: '[name].js',
path: path.resolve(__dirname, './app/build'),
libraryTarget: 'commonjs'
}
}
注意⚠
服务端配置需要配置libraryTarget，设置commonjs或者umd,用于服务端进行require引用，不然require值为{}。
在这里客户端和服务端配置没有什么区别，无需配置target（默认web环境），其他入门文件和输出文件不一致。
const clientConfig = {
entry: {
page1: './web/render/clientRouter.js'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, './public')
}
}
复制代码
配置babel
由于打包的是React代码，因此还需要配置babel。
新建.babelrc文件。
{
"presets": ["@babel/preset-react",
["@babel/preset-env",{
"targets": {
"browsers": [
"ie >= 9",
"ff >= 30",
"chrome >= 34",
"safari >= 7",
"opera >= 23",
"bb >= 10"
]
}
}]
],
"plugins": [
[
"import",
{ "libraryName": "antd", "style": true }
]
]
}
这份配置由服务端和客户端共用，用来处理React和转义为ES5和浏览器兼容问题。
处理服务端引用问题
服务端使用CommonJS规范，而且服务端代码也并不需要构建，因此，对于node_modules中的依赖并不需要打包，所以借助webpack第三方模块webpack-node-externals来进行处理，经过这样的处理，两份构建过的文件大小已经相差甚远了。
处理css
服务端和客户端的区别，可能就在于一个默认处理，一个需要将CSS单独提取出为一个文件，和处理CSS前缀。
服务端配置
{
test: /\.(css|less)$/,
use: [
{
loader: 'css-loader',
options: {
importLoaders: 1
}
},
{
loader: 'less-loader',
}
]
}
客户端配置
{
test: /\.(css|less)$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader'
},
{
loader: 'postcss-loader',
options: {
plugins: [
require('precss'),
require('autoprefixer')
],
}
},
{
loader: 'less-loader',
options: {
javascriptEnabled: true,
// modifyVars: theme //antd默认主题样式
}
}
],
}
SSR 中客户端渲染与服务器端渲染路由代码的差异
实现 React 的 SSR 架构，我们需要让相同的代码在客户端和服务端各自执行一遍，但是这里各自执行一遍，并不包括路由端的代码，造成这种原因主要是因为客户端是通过地址栏来渲染不同的组件的，而服务端是通过请求路径来进行组件渲染的。
因此，在客户端我们采用BrowserRouter来配置路由，在服务端采用StaticRouter来配置路由。
客户端配置
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from "react-router-dom";
import Router from '../router';
function ClientRender() {
return (
<BrowserRouter >
<Router />
</BrowserRouter>
)
}
服务端配置
import React from 'react';
import { StaticRouter } from 'react-router'
import Router from '../router.js';
function ServerRender(req, initStore) {
return (props, context) => {
return (
<StaticRouter location={req.url} context={context} >
<Router />
</StaticRouter>
)
}
}
export default ServerRender;
再次配置Node进行服务器渲染
上面配置的服务器，只是简单启动个服务，没有深入进行配置。
引入ReactDOMServer
const Koa = require('koa');
const app = new Koa();
const path = require('path');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const koaStatic = require('koa-static');
const router = new KoaRouter();
const routerManagement = require('./app/router');
const manifest = require('./public/manifest.json');
/**
* 处理链接
* @param {*要进行服务器渲染的文件名默认是build文件夹下的文件} fileName
*/
function handleLink(fileName, req, defineParams) {
let obj = {};
fileName = fileName.indexOf('.') !== -1 ? fileName.split('.')[0] : fileName;
try {
obj.script = `<script src="${manifest[`${fileName}.js`]}"></script>`;
} catch (error) {
console.error(new Error(error));
}
try {
obj.link = `<link rel="stylesheet" href="${manifest[`${fileName}.css`]}"/>`;
} catch (error) {
console.error(new Error(error));
}
//服务器渲染
const dom = require(path.join(process.cwd(),`app/build/${fileName}.js`)).default;
let element = React.createElement(dom(req, defineParams));
obj.html = ReactDOMServer.renderToString(element);
return obj;
}
/**
* 设置静态资源
*/
app.use(koaStatic(path.resolve(__dirname, './public'), {
maxage: 0, //浏览器缓存max-age（以毫秒为单位）
hidden: false, //允许传输隐藏文件
index: 'index.html', // 默认文件名，默认为'index.html'
defer: false, //如果为true，则使用后return next()，允许任何下游中间件首先响应。
gzip: true, //当客户端支持gzip时，如果存在扩展名为.gz的请求文件，请尝试自动提供文件的gzip压缩版本。默认为true。
}));
/**
* 处理响应
*
* **/
app.use((ctx) => {
let obj = handleLink('page1', ctx.req, {});
ctx.body = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>koa-React服务器渲染</title>
${obj.link}
</head>
<body>
<div id='app'>
${obj.html}
</div>
</body>
${obj.script}
</html>
`
})
app.listen(3000, () => {
console.log("服务器已启动，请访问http://127.0.0.1:3000")
});
这里涉及一个manifest文件，这个文件是webpack插件webpack-manifest-plugin生成的，里面包含编译后的地址和文件。大概结构是这样：
{
"page1.css": "page1.css",
"page1.js": "page1.js"
}
我们把他引入到clientConfig中，添加如下配置：
plugins: [
// 提取样式，生成单独文件
new MiniCssExtractPlugin({
filename: `[name].css`,
chunkFilename: `[name].chunk.css`
}),
new ManifestPlugin()
]
在上述服务端代码中，我们对于ServerRender.js进行了柯里化处理，这样做的目的在于，我们在ServerRender中，使用了服务端可以识别的StaticRouter，并配置了location参数，而location需要参数URL。
因此，我们需要在renderToString中传递req，以让服务端能够正确解析React组件。
let element = React.createElement(dom(req, defineParams));
obj.html = ReactDOMServer.renderToString(element);
通过handleLink的解析，我们可以得到一个obj，包含三个参数，link（css链接），script（JS链接）和html（生成Dom元素）。
通过ctx.body渲染html。
renderToString()
将 React 元素渲染到其初始 HTML 中。 该函数应该只在服务器上使用。 React 将返回一个 HTML 字符串。 您可以使用此方法在服务器上生成 HTML ，并在初始请求时发送标记，以加快网页加载速度，并允许搜索引擎抓取你的网页以实现 SEO 目的。
如果在已经具有此服务器渲染标记的节点上调用 ReactDOM.hydrate() ，React 将保留它，并且只附加事件处理程序，从而使您拥有非常高性能的第一次加载体验。
renderToStaticMarkup()
类似于 renderToString ，除了这不会创建 React 在内部使用的额外DOM属性，如 data-reactroot。 如果你想使用React 作为一个简单的静态页面生成器，这很有用，因为剥离额外的属性可以节省一些字节。
但是如果这种方法是在浏览访问之后，会全部替换掉服务端渲染的内容，因此会造成页面闪烁，所以并不推荐使用该方法。
renderToNodeStream()
将 React 元素渲染到其最初的 HTML 中。返回一个 可读的 流(stream) ，即输出 HTML 字符串。这个 流(stream) 输出的 HTML 完全等同于 ReactDOMServer.renderToString 将返回的内容。
我们也可以使用上述renderToNodeSteam将其改造下：
let element = React.createElement(dom(req, defineParams));
ctx.res.write('
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>koa-React服务器渲染</title>
</head><body><div id="app">');
// 把组件渲染成流，并且给Response
const stream = ReactDOMServer.renderToNodeStream(element);
stream.pipe(ctx.res, { end: 'false' });
// 当React渲染结束后，发送剩余的HTML部分给浏览器
stream.on('end', () => {
ctx.res.end('</div></body></html>');
});
renderToStaticNodeStream()
类似于 renderToNodeStream ，除了这不会创建 React 在内部使用的额外DOM属性，如 data-reactroot 。 如果你想使用 React 作为一个简单的静态页面生成器，这很有用，因为剥离额外的属性可以节省一些字节。
这个 流(stream) 输出的 HTML 完全等同于 ReactDOMServer.renderToStaticMarkup 将返回的内容。
添加状态管理redux
以上开发一个静态网站，或者一个相对于比较简单的项目已经OK了，但是对于复杂的项目，这些还远远不够，这里，我们再给它加上全局状态管理Redux。
服务器渲染中其顺序是同步的，因此，要想在渲染时出现首屏数据渲染，必须得提前准备好数据。
提前获取数据
初始化store
根据路由显示组件
结合数据和组件生成 HTML，一次性返回
对于客户端来说添加redux和常规的redux并无太大差别，只是对于store添加了一个初始的window.__INIT_STORE__。
let initStore = window.__INIT_STORE__;
let store = configStore(initStore);
function ClientRender() {
return (
<Provider store={store}>
<BrowserRouter >
<Router />
</BrowserRouter>
</Provider>
)
}
而对于服务端来说在初始数据获取完成之后，可以采用Promise.all()来进行并发请求，当请求结束时，将数据填充到script标签内，命名为window.__INIT_STORE__。
<script>window.__INIT_STORE__ = ${JSON.stringify(initStore)}</script>
复制代码
然后将服务端的store重新配置下。
function ServerRender(req, initStore) {
let store = CreateStore(JSON.parse(initStore.store));
return (props, context) => {
return (
<Provider store={store}>
<StaticRouter location={req.url} context={context} >
<Router />
</StaticRouter>
</Provider>
)
}
}
复制代码
整理Koa
考虑后面开发的便利性，添加如下功能：
Router功能
HTML模板
添加Koa-Router
/**
* 注册路由
*/
const router = new KoaRouter();
const routerManagement = require('./app/router');
...
routerManagement(router);
app.use(router.routes()).use(router.allowedMethods());
为了保证开发时，接口规整，这里将所有的路由都提到一个新的文件中进行书写。并保证如以下格式：
/**
*
* @param {router 实例化对象} router
*/
const home = require('./controller/home');
module.exports = (router) => {
router.get('/',home.renderHtml);
router.get('/page2',home.renderHtml);
router.get('/favicon.ico',home.favicon);
router.get('/test',home.test);
}
处理模板
将html放入代码中，给人感觉并不是很友好，因此，这里同样引入了服务模板koa-nunjucks-2。
同时在其上在套一层中间件，以便传递参数和处理各种静态资源链接。
...
const koaNunjucks = require('koa-nunjucks-2');
...
/**
* 服务器渲染，渲染HTML，渲染模板
* @param {*} ctx
*/
function renderServer(ctx) {
return (fileName, defineParams) => {
let obj = handleLink(fileName, ctx.req, defineParams);
// 处理自定义参数
defineParams = String(defineParams) === "[object Object]" ? defineParams : {};
obj = Object.assign(obj, defineParams);
ctx.render('index', obj);
}
}
...
/**
* 模板渲染
*/
app.use(koaNunjucks({
ext: 'html',
path: path.join(process.cwd(), 'app/view'),
nunjucksConfig: {
trimBlocks: true
}
}));
/**
* 渲染Html
*/
app.use(async (ctx, next) => {
ctx.renderServer = renderServer(ctx);
await next();
});
在用户访问该服务器时，通过调用renderServer函数，处理链接，执行到最后，调用ctx.render完成渲染。
/**
* 渲染react页面
*/
exports.renderHtml = async (ctx) => {
let initState = ctx.query.state ? JSON.parse(ctx.query.state) : null;
ctx.renderServer("page1", {store: JSON.stringify(initState ? initState : { counter: 1 }) });
}
exports.favicon = (ctx) => {
ctx.body = null;
}
exports.test = (ctx) => {
ctx.body = {
data: `测试数据`
}
}
关于koa-nunjucks-2中，在渲染HTML时，会将有< >进行安全处理，因此，我们还需对我们传入的数据进行过滤处理。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>koa-React服务器渲染</title>
{{ link | safe }}
</head>
<body>
<div id='app'>
{{ html | safe }}
</div>
</body>
<script>
window.__INIT_STORE__ = {{ store | safe }}
</script>
{{ script | safe }}
</html>
文档结构
├── README.md
├── app //node端业务代码
│ ├── build
│ │ ├── page1.js
│ │ └── page2.js
│ ├── controller
│ │ └── home.js
│ ├── router.js
│ └── view
│ └── index.html
├── index.js
├── package.json
├── public //前端静态资源
│ ├── manifest.json
│ ├── page1.css
│ ├── page1.js
│ ├── page2.css
│ └── page2.js
├── web //前端源码
│ ├── action //redux -action
│ │ └── count.js
│ ├── components //组件
│ │ └── layout
│ │ └── index.jsx
│ ├── pages //主页面
│ │ ├── page
│ │ │ ├── index.jsx
│ │ │ └── index.less
│ │ └── page2
│ │ ├── index.jsx
│ │ └── index.less
│ ├── reducer //redux -reducer
│ │ ├── counter.js
│ │ └── index.js
│ ├── render //webpack入口文件
│ │ ├── clientRouter.js
│ │ └── serverRouter.js
│ ├── router.js //前端路由
│ └── store //store
│ └── index.js
└── webpack.config.js
转自https://blog.csdn.net/weixin_34037515/article/details/87951540
上github查找，一般都有写怎么安装，启动啥的
你都用react了确定是SSR不是CSR吗？前我可以教你搭，不过每个人技术架构不同，mobx的数据流我没用过，react+mobx可以统一用umi+dva代替，webpack也有现成的配置了，axios不如直接fetch更方便，至于什么antd组件，umi已经自动带着了，这种组件不算在架构里的，不止是antd，你想上啥组件都ok。