React SSR中Babel无法处理组件CSS的问题及相关疑问

问题描述 #

我正在学习不使用Next.js的React SSR，目前已实现页面HTML渲染，但在组件中添加CSS导入后，执行npx babel-node server.js启动服务时，Babel抛出语法错误：Unexpected token '{'。移除CSS导入后服务可正常运行，但组件无样式。

疑问点 #

• 为什么Express的static中间件必须放在app.get('/')下方？
• 如何实现修改代码后自动重建并运行server.js？
• 希望得到当前配置的优化建议。

相关配置文件 #

.babelrc #

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
}

webpack.config.js #

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, './build'),
    filename: "bundle.js",
    publicPath: "/"
  },
  devServer: {
    port: 3010,
    static: true,
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ['@babel/preset-env', "@babel/preset-react"]
          }
        },
      },
      {
        test: /\.(css|scss)$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
  plugins: [
  new HtmlWebpackPlugin({
    template: './public/index.html',
    publicPath: "/"
  })
]

};

server.js #

import express from 'express';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import App from './src/App.js';
import path from 'path';
import fs from 'fs';

const app = express();

app.get('/', (req, res) => {
  console.log('in /');
  fs.readFile(
    path.resolve('./build/index.html'),
    'utf8',
    (err, data) => {
      if (err) {
        console.log(err);
        return res.status(500).send('Internal Server Error');
      }
      const html = data.replace(
        '<div id="root"></div>',
        `<div id="root">${ReactDOMServer.renderToString(<App />)}</div>`
      )
      console.log(html)
      return res.send(html);
    }
  );
});
app.use(express.static(path.resolve(__dirname,'build')));

app.listen(3000, () => {
  console.log('server listening on port 3000')
})

index.js #

import React from "react";
import ReactDOM from 'react-dom'
import App from "./App";

const appElement = document.getElementById('root');

ReactDOM.hydrate(<App/>, appElement)

执行命令 #

• 打包：npx webpack
• 启动服务：npx babel-node server.js

问题解答与优化建议 #

1. CSS导入导致Babel语法错误的解决 #

babel-node默认仅能解析JS/JSX文件，无法处理CSS导入，因此抛出语法错误。提供两种解决方案：

• 方案一：服务端忽略CSS导入
  安装babel-plugin-transform-require-ignore，修改.babelrc：

  {
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": [
      ["transform-require-ignore", { "extensions": [".css", ".scss"] }]
    ]
  }
  

  服务端渲染时会跳过CSS文件解析，样式由客户端webpack打包后的bundle.js通过style-loader注入。

• 方案二：服务端提取独立CSS文件
  改用mini-css-extract-plugin替代style-loader，在webpack中配置提取CSS文件，再在服务端HTML模板中手动引入。修改webpack配置：

  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  
  module.exports = {
    // ...其他配置
    module: {
      rules: [
        // ...JS规则
        {
          test: /\.(css|scss)$/,
          use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
        },
      ],
    },
    plugins: [
      new HtmlWebpackPlugin({/*...*/}),
      new MiniCssExtractPlugin({ filename: 'styles.[contenthash].css' })
    ]
  };
  

  之后在server.js读取HTML时，需将生成的CSS文件路径插入到<head>标签中。

2. Express static中间件位置的原因 #

Express中间件按注册顺序执行。若app.use(express.static(...))放在app.get('/')上方，访问根路径/时，Express会优先检查build目录下是否存在index.html，若存在则直接返回静态文件，跳过后续的SSR路由逻辑。因此必须将static中间件放在路由之后，确保根路径请求优先进入SSR处理。

3. 实现代码修改后自动重建与重启服务 #

借助nodemon和webpack --watch实现：

• 安装依赖：npm install nodemon npm-run-all --save-dev
• 在package.json添加脚本：

  "scripts": {
    "build:watch": "webpack --watch",
    "server:watch": "nodemon --exec babel-node server.js",
    "dev": "npm-run-all --parallel build:watch server:watch"
  }
  

  执行npm run dev后，修改前端代码时webpack自动重新打包，修改服务端代码时nodemon自动重启server.js。

4. 当前配置的优化建议 #

• 拆分环境配置：将webpack拆分为webpack.common.js、webpack.dev.js、webpack.prod.js，开发环境用style-loader（热更新更快），生产环境用mini-css-extract-plugin（提取独立CSS，利于缓存）。
• 添加Source Map：webpack中配置devtool: 'eval-cheap-module-source-map'（开发环境）或devtool: 'source-map'（生产环境），方便调试。
• 优化SSR性能：React 18+可使用ReactDOMServer.renderToPipeableStream替代renderToString，支持流式渲染提升首屏速度；避免在renderToString中执行异步操作，提前获取数据后再渲染。
• 清理build目录：安装clean-webpack-plugin，打包前自动清空build目录，避免旧文件残留。
• 添加ESLint：规范代码风格，提前发现语法错误。

内容的提问来源于stack exchange，提问作者Frozendawn