Question

我正在尝试为我的应用程序实现服务器端渲染。它曾经是使用select * from customer where ( custName like '%param1%' OR custAddress equals param2 OR custNo in'List<param>) order by custName desc;的客户端渲染。在客户端渲染中一切正常，但是现在当我在服务器端渲染时，没有CSS表单和UI库（Reactstrap + Material UI）都被渲染。用户界面完全坏了。

我正在将App.js（具有所有UI的实际前端页面）注入html.js（模板）

我的服务器：

ReactDom

我的html.js（只是一个简单的模板）：

import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server'
import App from '../../src/App'
import Html from '../../src/html.js'
const app = express();

// console.log that your server is up and running
app.listen(3001, () => console.log(`Listening on port 3001`));

app.get('/',(req,res) => {
  const title="2FA SDK"
  const body = renderToString(<App/>)
  res.send(
    Html({
      body,
      title,
    })
  )
})

我的app.js（使用用户界面，最少）

const Html = ({ body, styles, title }) => `
  <!DOCTYPE html>
  <html>
    <head>
      <title>${title}</title>
    </head>
    <body style="margin:0">
      <div id="app">${body}</div>
    </body>
  </html>
`;

使用reactstrap的App.js的一部分：

render(){
    return(
        <div className="container">
            <div>
                <TextField 
                    label="Application Name"
                    type="text" 
                    variant="outlined"
                    onChange={this.handleApplicationName}
                />
            </div>
            <div>
                <FormLabel>Phone</FormLabel>
                <div>
                    <OutlinedInput
                        value={this.state.textmaskArray[2]}
                        onChange={(e) => this.handlePhoneNumber(e,2)}
                        labelWidth={200}
                    />
                </div>
            </div>
            <Button variant="contained" color="primary" onClick={this.props.buttonAction}>
            </Button>
        </div>

） } 我的webpack.config.js：

render(){
    return(
      <CardControl
        title={"Code Authention"}
        message={"For your security, we need to verify your identity by sending a code to your phone number"}
        >
        <Container>
            <Row>
                <Col>
                    <div>{this.props.phoneList}</div>
                </Col>
                <Col>
                    <div>{this.props.methodList}</div>
                </Col>
            </Row>
            <Button className="sm-2" disabled={this.props.disabled} color="info" onClick={this.props.buttonAction}>{this.props.buttonName}</Button>
        </Container>
      </CardControl>

我正在使用什么：const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const HtmlWebPackPlugin = require("html-webpack-plugin"); const nodeExternals = require("webpack-node-externals"); module.exports = [ { /*Config for backend code*/ entry: './src/server/server.js', target: 'node', output: { filename: 'server.js' }, externals: [nodeExternals()], module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: "babel-loader" } }, { test: /\.html$/, use: { loader: "html-loader", options: { minimize: true } } }, { test: /\.css$/, use: [MiniCssExtractPlugin.loader,"css-loader"] } ] }, plugins: [ new HtmlWebPackPlugin({ template: "./public/index.html", filename:"./index.html" }), new MiniCssExtractPlugin({ filename: "[name].css", chunkFilename:"[id].css" }) ] }, ]

我尝试过的事情：我安装了CSS滑块，但是根本无法正常工作。我还查看了Material-ui关于服务器端渲染的文档，我觉得我只是缺少了一小部分，而他们提供的说明可能是一个过分的追求。

我需要帮助的地方：我试图弄清为什么material-ui或bootstrap中的UI组件根本无法渲染。我怀疑nodeExternal会将它们排除在外，但我不确定。

Answer 1

您需要在客户端混合渲染的HTML，以使反应接管。

使用以下命令创建一个client.js文件：

import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.hydrate(
  <App/>,
  document.querySelector('#app'),
);

请注意，水合物应与renderToString所呈现的相匹配。

接下来，将其添加为您的webpack配置中的其他条目：

module.exports = [
{
        /*Config for backend code*/ 
        entry: './src/server/server.js',
        target: 'node',
        output: {
            filename: 'server.js'
        },
        externals: [nodeExternals()],
        module: {
            rules: [
                {
                    test: /\.(js|jsx)$/,
                    exclude: /node_modules/,
                    use: {
                        loader: "babel-loader"
                    }
                },
                {
                    test: /\.html$/,
                    use: {
                        loader: "html-loader",
                        options: { minimize: true }
                    }
                },
                {
                    test: /\.css$/,
                    use: [MiniCssExtractPlugin.loader,"css-loader"]
                }
            ]
        },
        plugins: [
            new HtmlWebPackPlugin({
                template: "./public/index.html",
                filename:"./index.html"
            }),


  new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename:"[id].css"
        })
    ]
},
{ 
   entry: './client.js',
   output: {
      filename: 'bundle.js',
   },
   module: {
      rules: [ {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
      },
   ],
 },
]

更改您的html渲染代码以包括以下内容：

const Html = ({ body, styles, title }) => `
  <!DOCTYPE html>
  <html>
    <head>
      <title>${title}</title>
    </head>
    <body style="margin:0">
      <div id="app">${body}</div>
      <script async src="/bundle.js"></script>
    </body>
  </html>
`;

对于这种确切的代码是否有效，我不是100％的自信，但这是一个普遍的想法。

服务器端渲染不渲染UI库

1 个答案: