我正在使用express构建SSR应用,这是我的简单渲染服务器的入口点
src / server / server.ts
import * as express from 'express';
import renderer from 'src/server/renderer';
import proxy = require('express-http-proxy');
import createStore from 'src/helpers/createStore';
import config from '@config/index';
import 'express-async-errors';
const app = express();
const port = 3000 || process.env.PORT
app.use(function (req, res, next) {
res.header('Cache-Control', 'private, no-cache, no-store, must-revalidate');
res.header('Expires', '-1');
res.header('Pragma', 'no-cache');
next()
});
app.use('/api', proxy(config.API))
app.set("etag", false)
app.use(express.static('build/client/'))
app.get('*', async (req, res) => {
console.log(`request headers`, req.headers)
console.log('req.get.cookie', req.get("cookie"))
const store = await createStore(req)
const content = renderer(req, store);
res.send(content);
})
process.on("unhandledRejection", err => {
console.log("We have unhandleRejection", err)
})
process.on("uncaughtException", err => {
console.log("We have uncaughtException", err)
})
app.listen(port, () => {
console.log(`Render server running on port: ${port}`)
})
我对每个路由都有一个用于('*')的获取路由处理程序,如果请求命中该路由器,则转到渲染器函数并生成动态html字符串并返回它。这是我的渲染器功能
src / server / renderer.ts
import * as React from 'react';
import { renderToString } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom';
import { renderRoutes } from 'react-router-config';
import Routes from '@client/Routes';
import { Request } from 'express';
import { ServerStyleSheet } from 'styled-components';
import { Store } from 'redux';
import { Provider } from 'react-redux';
import * as html from 'build/client/index.html';
export default (req: Request, store: Store) => {
const tree = (
<Provider store={store}>
<StaticRouter location={req.path} context={{}}>
<div>{renderRoutes(Routes)}</div>
</StaticRouter>
</Provider>
);
const sheet = new ServerStyleSheet();
renderToString(sheet.collectStyles(tree));
const styleTags = sheet.getStyleTags();
console.log(styleTags)
const content = renderToString(tree);
return html.replace("$styleTags$", styleTags).replace("$content$", content);
}
它的作用基本上是找到匹配的路由组件,匹配的样式并注入html并将其返回。 但是,每当我请求本地路由(localhost:3000)时,它都不会打入我的路由处理函数并返回html和bundle.js在我的静态文件夹(“ build / client /”)目录中以处理静态资产。我不 知道原因,但是只是不打我唯一的路线处理器!我可以 检查它是否不执行我的路由处理程序中的console.log的事实 前两行,我也为此设置了调试器。它没有命中 返回假设之前创建的奇怪内容。
这是我在浏览器开发人员工具中的请求和响应(我使用的是chrome)
我认为这与缓存有关,因此我在上面进行了研究并禁用了浏览器中的缓存选项(我想将缓存控制标头设置为no-cache)并在服务器上禁用了“ etag”并将响应设置为not做缓存。但还是一样。我该如何解决?