极客观点
项目管理
HarmonyOS
最近在学习怎么使用react+express进行服务端渲染，然后我尝试去渲染antd的一些组件时,会有这样的问题
/home/chenlan/Desktop/React-SSR/node_modules/antd/dist/antd.css:13
[class^=ant-]::-ms-clear,
^^
SyntaxError: Unexpected token ^=
at Module._compile (internal/modules/cjs/loader.js:723:23)
at Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Object.newLoader [as .js] (/home/chenlan/Desktop/React-SSR/node_modules/pirates/lib/index.js:104:7)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object.<anonymous> (/home/chenlan/Desktop/React-SSR/src/components/app.jsx:3:1)
at Module._compile (internal/modules/cjs/loader.js:778:30)我认为这是nodejs环境里没法使用import css文件所以我就把相关代码注释掉，这样子虽然可以，但渲染出来的结果并不是我想要的。
- 这是分页组件去除css文件之后渲染的结果
- 我的相关代码
import React from "react";
import { Pagination } from 'antd';
import 'antd/dist/antd.css';
const App = () \=> {
return (
<>
<Pagination size\="small" total\={50} />
</>
)
}
export default App;后端路由代码
import express from "express";
import App from "../components/app";
import React from "react";
import { renderToString } from "react-dom/server";
import hbs from "handlebars";
const router = express.Router();
router.get("/", async (req, res) => {
const theHtml = `
<html>
<head><title>My First SSR</title></head>
<body>
<h1>My First Server Side Render</h1>
<div id="reactele">{{{reactele}}}</div>
<script src="/app.js" charset="utf-8"></script>
<script src="/vendor.js" charset="utf-8"></script>
</body>
</html>
`;
const hbsTemplate = hbs.compile(theHtml);
const reactComp = renderToString(<App />);
const htmlToSend = hbsTemplate({ reactele: reactComp });
res.send(htmlToSend);
});
export default router;import React from "react";
import { hydrate } from "react-dom";
import App from "./app";
hydrate(<App />, document.getElementById("reactele"));我想知道怎么样可以在服务器端直接渲染成有css样式的样子，比如
我目前的解决方式是把css文件链接到html文档里，但这样第一次从服务端获取页面的时候显示的是无样式的分页组件，之后才会变为有样式的组件。
我想问问这样的问题要怎么处理？
