服务器端响应 HTML

Question

如何配置节点服务器来托管 React components/templates 并在传入 props 后将 HTML 作为字符串输出？

概念：

const React = require('react');
const { renderToStaticMarkup } = require('react-dom/server');

const sayHello = props => (
   return renderToStaticMarkup(<p>Hello, {props.name}!</p>);
)

module.exports = sayHello;

这似乎是最简单的事情，但在 NodeJS 中使这项工作的文档很少。我已经尝试了很多不同的 webpack/babel 插件和节点错误，只要你写了 jsx，即：<p>Hello...</p>.

Answer 1

import jsx from '../src/app';
import { renderToString } from "react-dom/server";


function template(reactDom) {
    return `
        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
            <meta name="viewport" content="width=device-width, initial-scale=1">

            <title>React App</title>

        </head>

        <body>
            <div id="app">${reactDom}</div>

            <script src="/app.bundle.js"></script>
         </body>
        </html>
    `;
}

app.get("*", function (req, res, next) {
    const reactDom = renderToString(jsx);
    res.writeHead(200, { "Content-Type": "text/html" });
    res.end(template(reactDom));
});

jsx是应用程序文件，不是index.js文件，index.js包含ReactDom.render，这不是必需的。

renderToString

值得研究 Next.js

服务器端响应 HTML

Server Side React to HTML

node.js

reactjs

server-side-rendering

react-dom