主页 / 问题 / 766733
Accepted
Skim
Asked:2020-01-05 07:02:28 +0000 UTC2020-01-05 07:02:28 +0000 UTC

NodeJS 在 React 上执行 SPA 服务器渲染的脚本中应该包含什么样的代码？

  • 772

来自 React 新手的问题。有一个使用 Webpack 构建的 SPA React 应用程序。一切都很完美。对服务器的请求返回给我们的 index.html 没有“有用”的内容，但只有初始标记框架和其中包含的 bundle.js 文件。然后 bundle.js 做它的事。我们在应用程序周围走来走去——我们在相应的页面上看到了必要的内容。那些。路线工作，组件被渲染和更新。现在我们需要确保当向服务器发出请求时，返回的页面已经填充了与请求的 URL 对应的内容。那些。这样 bundle.js 在服务器上运行，而不是在客户端上。谷歌了很多。我发现这是通过在服务器上安装 NodeJS 和 Express 模块来完成的。在这里，一切似乎也很清楚。目前尚不清楚 NodeJS 的脚本代码是什么样的，它将接受来自客户端的请求并呈现相应的页面，即 从 react 应用程序的 index.html 中使用的 bundle.js 为请求的 URL 执行适当的路由。有没有人有解决类似问题的代码示例？好吧，或者是有关该主题的信息的链接。我会很感激！

node.js

1 个回答

  1. Best Answer

    1 - 你需要一个节点 + 快递服务器

    var App = require("./public/static/server/app").App; //ОБ этом дальше будет описано
var express = require("express");
var app = express();

// Принимаем все подряд GET запросы
app.get("*", function (req, res, next){
    var preloadState = preloadStateData(req)
    var renderData = App.getHTML(
        preloadState,
    );
    res.send(renderData.html);
});
app.listen(8080, () => {
    console.log("Running on http://localhost:");
});

function preloadStateData(req) {
    return {
        location: req.url,
        context: {},
        data: {
           ...ваш стейт
        }
    };
}

    2 - 您需要 2 个构建：第一个用于服务器，第二个用于客户端。在 webpack 中，您创建了 2 个具有不同入口点的程序集。对我来说，它看起来像这样

    var base = {...конфигурация}
var server = clone(base);
var client = clone(base);
client.entry = {
    app: ["babel-polyfill", "./application/client.js"]
}; 
client.output.path = __dirname + "/public/static/client";

server.entry = {
    app: ["babel-polyfill", "./application/server.js"]
};
server.output = {
    path: __dirname + "/public/static/server",
};

    3 -./application/client.js这是您的客户端应用程序，它将与您现在的应用程序保持一致，但是./application/server.js- 这是服务器端的实现。小例子：

    let App = {
    getHTML: preloadState => {
        //Тут нужно заинициализировать вашу стору...
        let app = (
            <StaticRouter context={{}} location={preloadState.location}>
                <Provider store={store}>
                    <Application />
                </Provider>
            </StaticRouter>
        );

        const html = <Html preloadState={preloadState} content={ReactDOMServer.renderToString(app)} />;

        let returnObj = {
            html: `<!doctype html>\n${ReactDOMServer.renderToStaticMarkup(
                html 
            )}`
        };

        return returnObj;
    }
};

function Html({ content, preloadState }) {
    return (
        <html>
            <head>
                <link
                    href="/app.css"
                    media="screen"
                    rel="stylesheet"
                    type="text/css"
                />
            </head>
            <body>
                <div id="root" dangerouslySetInnerHTML={{ __html: content }} />
                <script
                    dangerouslySetInnerHTML={{
                        __html: `window.__PRELOAD_STATE__=${JSON.stringify(
                            preloadState.data
                        )};`
                    }}
                />
                <script src="/app.js" />
            </body>
        </html>
    );
}

module.exports = App;

    因此，我们使用 React 渲染整个页面。我很着急，我可能会犯错误，但总体计划看起来像这样。

    • 0

相关问题