使用antd组件进行服务端渲染

发布于 2022-09-12 03:50:14 字数 2671 浏览 34 评论 0

最近在学习怎么使用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文档里，但这样第一次从服务端获取页面的时候显示的是无样式的分页组件，之后才会变为有样式的组件。
我想问问这样的问题要怎么处理？