在我的React App CSR(客户端渲染)中,我使用Babel和Webpack捆绑用于生产构建的文件,效果很好。
我想在我的应用程序中实现SSR(服务器端渲染),以获得更好的SEO。为此,我要创建两个Webpack构建,一个用于SSR,一个用于CSR,同时还要安装Express Server。
Server.js文件
require('ignore-styles');
require('@babel/register')({
ignore: [ /(node_modules)/ ],
presets: [ '@babel/preset-env', '@babel/preset-react' ]
});
import path from 'path';
import fs from 'fs';
import express from 'express';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { StaticRouter } from 'react-router';
import App from '../src/App';
const PORT = 8080;
const app = express();
const router = express.Router();
app.use(express.json());
const serverRenderer = (req, res, next) => {
const content = ReactDOMServer.renderToString(
<StaticRouter location={req.url} context={{}}>
<App />
</StaticRouter>
);
fs.readFile(path.resolve('../dist/index.html'), 'utf8', (err, data) => {
if (err) {
console.error(err);
return res.status(500).send('An error occurred');
}
return res.send(data.replace('<div id="root"></div>', `<div id="root">${content}</div>`));
});
};
router.use('*', serverRenderer);
router.use(express.static(path.resolve(__dirname, '..', 'dist'))); //, { maxAge: '30d' }
// tell the app to use the above rules
app.use(router);
// app.use(express.static('./build'))
app.listen(PORT, () => {
console.log(`SSR running on port ${PORT}`);
});
当我运行用于运行Express Server的命令以服务该应用程序时,出现错误。