[英]React Server Side Rendering with CSS (SASS)
我正在尝试构建一个同构的 React 应用程序,但现在我只将我的问题限制在服务器端渲染部分。 我想在我的应用程序的服务器端呈现一些 React JS 组件。 我可以使用ReactDomServer.renderToString
方法来做到这一点。 但是我无法获得 CSS(或我的 SASS/SCSS 文件)来使用这些组件。
对于客户端,我通常可以只使用 Webpack 和 css-loader/style-loader 之类的东西,当我捆绑 JS 时,组件的样式就会正确。 但是,我不知道如何在服务器端执行此操作。 这是我在服务器文件上运行ts-node
时遇到的错误
body {
^
SyntaxError: Unexpected token '{'
at Object.compileFunction (node:vm:360:18)
at wrapSafe (node:internal/modules/cjs/loader:1088:15)
at Module._compile (node:internal/modules/cjs/loader:1123:27)
...
以下是我的相关文件。
import React from "react";
import "./App.scss"
class App extends React.Component {
override render(): React.ReactNode {
return (<div>THIS IS THE APP START</div>);
}
}
export default App;
$mycolor: red;
body {
color: $mycolor;
}
import express from "express";
import ReactDomServer from "react-dom/server";
import App from "./Components/App";
const app = express()
const port = 3000
app.get('/', (req, res) => {
const html = ReactDomServer.renderToString(<App />);
res.send(html);
});
app.listen(port, () => {
console.log(`Example app listening on port ${port}`)
});
{
"include": ["src/**/*"],
"exclude": ["node_modules"],
"compilerOptions": {
"esModuleInterop": true,
"moduleResolution": "Node16",
"jsx": "react-jsx"
}
}
{
"name": "really",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start": "ts-node src/server.tsx"
},
"dependencies": {
"@types/node-sass": "^4.11.3",
"@types/react": "^18.0.25",
"@types/react-dom": "^18.0.9",
"express": "^4.18.2",
"node-sass": "^8.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"sass": "^1.56.1",
"ts-node": "^10.9.1"
},
"devDependencies": {
"typescript": "^4.9.3"
}
}
不确定是否可以在快递服务组件之前加载 CSS。 另一种可能的方法是使用 webpack 来捆绑服务器端文件并加载 CSS 但我不知道这是否可行,而且我觉得服务器端部分很奇怪。 有没有办法在没有 webpack 的情况下做到这一点?
在构建期间,您仍然需要将 scss 转换为 css 文件,css 文件应将 go 放入公共文件夹,然后在 html 反应模板中添加链接 rel
<link rel="stylesheet" href="../../public/styles.css">
当浏览器调用它时,你需要用 express 来提供它
app.get('/styles.css', (req, res) => {
res.sendFile(__dirname + "/" + "styles.css");
});
或存在该文件的服务器 static 文件夹
app.use(express.static('public'));
使用ts-node
无法执行此操作,因为它没有导入 css 或 sass 文件的插件(出现错误是因为它无法解析 SASS 语法)。 您可以使用 webpack 来完成,它具有导入 sass 文件的插件。
但是,已经有大量 SSR 框架可用,例如Next.js或 Gatsby 可以为您处理所有这些。 使用 Next.js,您还可以动态访问请求数据并为每个请求呈现不同的内容。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.