Javascript 服务器端渲染不渲染UI库_Javascript_Reactjs_Server Side Rendering

Javascript 服务器端渲染不渲染UI库

javascript reactjs

Javascript 服务器端渲染不渲染UI库,javascript,reactjs,server-side-rendering,Javascript,Reactjs,Server Side Rendering,我正在尝试为我的应用程序实现服务器端渲染。它过去是使用ReactDom的客户端渲染。在客户端渲染中一切都很好，但是现在当我在服务器端渲染时，没有任何CSS表和UI库（Reactstrap+Material UI）被渲染。用户界面完全崩溃了我正在将App.js（包含所有UI的实际前端页面）注入到html.js（模板）中我的服务器： import express from 'express'; import React from 'react'; import { renderToString

我正在尝试为我的应用程序实现服务器端渲染。它过去是使用

ReactDom

的客户端渲染。在客户端渲染中一切都很好，但是现在当我在服务器端渲染时，没有任何CSS表和UI库（Reactstrap+Material UI）被渲染。用户界面完全崩溃了

我正在将App.js（包含所有UI的实际前端页面）注入到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,
    })
  )
})

我正在使用的内容：

创建react应用程序

我尝试的内容：我安装了CSS loders，但它根本不起作用。我还查阅了material ui在服务器端渲染上的文档，我觉得我只是缺少了一小部分，他们提供的说明可能有些过分

我需要帮助的内容：我正在试图弄清楚为什么material UI或bootstrap中的UI组件根本没有得到渲染。我怀疑nodeExternal排除了它们，但我不确定。

您需要在客户端对呈现的HTML进行水合处理，以便react接管

使用以下内容创建client.js文件：

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

更改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>
`;

consthtml=（{body，styles，title}）=>`
${title}
${body}
`;

我不是100%相信这个确切的代码是否会工作，但这是一般的想法

你在任何地方添加渲染元素吗？@apokryfos不，让我发布我的app.js我应该运行服务器还是运行bundle.js？Webpack应该创建两个文件。您运行服务器，当它提供HTML时，它应该发送bundle.js tooI running nito“document is not define”错误。我认为这是因为服务器端渲染没有文档。服务器端没有

document

，但是

client.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"
            })
        ]
    },
]

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

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',
      },
   ],
 },
]

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>
`;