node.js - 在 renderStatic 期间 react Helm 混合场

Question

我正在运行 React 应用程序的服务器端渲染。为此，我使用 express。整个服务器端渲染代码如下所示:

import * as React from "react"
import * as ReactDOMServer from "react-dom/server"
import * as express from "express"
import { StaticRouter } from "react-router-dom"
import walker = require("react-tree-walker")
import { useStaticRendering } from "mobx-react"

import Helmet from "react-helmet"
import Provider from "../src/Provider"
import { StaticRouterContext } from "react-router"
import version = require("../version")

var _template: string = require(`../dist/${version.v()}/index.html`)

interface IRenderResponse {
    statusCode: number,
    template: string,
    redirect?: string
}

const run = (url: string, locale?: string): Promise<IRenderResponse> => {
    var template: string
    var html: string = ""
    var head: object
    var context: StaticRouterContext = {}

    useStaticRendering(true)

    var routing = (
        <StaticRouter 
            location={url} 
            context={context}
        >
            <Provider defaultLocale={locale} />
        </StaticRouter>
    )

    return new Promise((resolve) => {
        walker(routing, (element, instance) => {
            if (instance && typeof instance._prepare == typeof (() => {}))
                return instance._prepare()
        }).then(() => {
            html = ReactDOMServer.renderToString(routing)
            head = Helmet.renderStatic()
            template = _template.replace(/\${__rh-([a-z]+)}/gi, (match, group) => {
                return head[group].toString()
            })
            template = template.replace(/\${__body}/gi, (match) => {
                return html
            })
            if (context.url)
                context["statusCode"] = 301

            resolve({
                statusCode: context["statusCode"] || 200, 
                template, 
                redirect: context.url
            })
        }).catch((error) => {
            template = _template.replace(/\${__rh-([a-z]+)}/gi, "")
            template = template.replace(/\${__body}/gi, error.stack || error.toString())
            resolve({
                statusCode: 500, 
                template
            })
        })
    })
}

var app = express()

app.get("*", (req, res) => {
    var accepted = req.acceptsLanguages()
    var locale = accepted ? (accepted[0] || "ru").split("-")[0] : "ru"
    run(req.originalUrl, locale).then((data) => {
        if (data.redirect)
            res.redirect(data.redirect)
        else
            res.status(data.statusCode).send(data.template)
    })
})

app.listen(1239)

可以看到这里用到了react-tree-walker。但是无论我使用服务器端渲染，都会出现这个问题。

问题在于，如果我的 node-js 服务器在一个线程中运行，那么如果同时完成两个不同的请求，那么 react-helmet 会混合字段。例如，如果有两个 View :

class FirstView extends React.Component {
    render() {
        return (
            <Helmet>
                <title>This is first title</title>
                <meta name="description" content="My first view description" />
            </Helmet>
        )
    }
}

和

class SecondView extends React.Component {
    render() {
        return (
            <Helmet>
                <title>This is second title</title>
                <meta name="description" content="My second view description" />
            </Helmet>
        )
    }
}

然后我可以收到类似这样的头部:

<title>This is first title</title>
<meta name="description" content="My second view description" />

这显然是因为 react-helmet 使用静态字段，我想。所以，如果两个请求被并行处理，这个字段就会被乱七八糟地改变。

我怎样才能打败它？这个问题经常出现在高负载的项目中，这会导致 SEO 崩溃，因为爬虫可能会接收到错误的数据。

---

webpack.config.js:

var webpack = require("webpack")

var config = {
    mode: "production",
    target: "node",
    entry: __dirname + "/index.tsx",
    output: {
        path: __dirname,
        filename: `index.js`
    },
    module: {
        rules: [
            {
                test: require.resolve("phoenix"),
                use: "imports-loader?window=>global"
            },
            {
                test: /\.tsx?$/,
                loader: "awesome-typescript-loader?configFileName=tsconfig.server.json",
                exclude: /node_modules/
            },
            {
                test: /\.js$/,
                enforce: "pre",
                loader: "source-map-loader"
            },
            {
                test: /\.html$/,
                loader: "html-loader"
            },
            {
                test: /\.(svg|woff|woff2|ttf|otf|png|jpg)$/,
                loader: "url-loader"
            },
            {
                test: /\.(css|sass)$/,
                loader: "ignore-loader"
            }
        ]
    },
    resolve: {
        modules: [
            "node_modules",
            `${__dirname}/../src`
        ],
        extensions: [".js", ".jsx", ".sass", ".json", ".css", ".ts", ".tsx"]
    },
    parallelism: 2,
    plugins: [
        new webpack.DefinePlugin({
            "ENV": JSON.stringify("server"),
            "process.env.ENV": JSON.stringify("server"),
            "process.env.VERSION": JSON.stringify("n/a"),
            "process.env.NODE_ENV": JSON.stringify("production"),
            "global.GENTLY": false
        })
    ]
}

module.exports = config

---

编辑

似乎，根据 this issue，react-helmet 是 thread-unsafe .是否有可能根据这些知识创建一些解决方法？

Answer 1

我觉得 require(../dist/${version.v()}/index.html); 只导入了一个模板实例。

通过在所有网络调用中重复要求模板，您可能会一次又一次地更新相同的字符串引用。

所以。您可以执行以下操作:

1. import(require) template 仅一次位于文件顶部。
2. 将其分配给run函数返回的promise中的字符串类型的新变量，并对其执行替换操作。

基本代码片段:

...
import version = require("../version");

import appTemplate = require(`../dist/${version.v()}/index.html`)


interface IRenderResponse {
    statusCode: number,
    template: string,
    redirect?: string
}

const run = (url: string, locale?: string): Promise<IRenderResponse> => {
    var template: string = "";
    var html: string = ""
    var head: object
    var context: StaticRouterContext = {}

    useStaticRendering(true)

    var routing = (
        <StaticRouter 
            location={url} 
            context={context}
        >
            <Provider defaultLocale={locale} />
        </StaticRouter>
    )

    return new Promise((resolve) => {
        walker(routing, (element, instance) => {
            if (instance && typeof instance._prepare == typeof (() => {}))
                return instance._prepare()
        }).then(() => {
            html = ReactDOMServer.renderToString(routing)
            head = Helmet.renderStatic()
            template = appTemplate.replace(/\${__rh-([a-z]+)}/gi, (match, group) => {
                return head[group].toString()
            })
            template = template.replace(/\${__body}/gi, (match) => {
                return html
            })
            if (context.url)
                context["statusCode"] = 301

            resolve({
                statusCode: context["statusCode"] || 200, 
                template, 
                redirect: context.url
            })
        })....