react-helmet mixing fields during renderStatic

I'm running server-side render of the React application. I'm using&nbsp;<code>express</code>&nbsp;for this purposes. The whole server-side render code looks like this:

I'm running server-side render of the React application. I'm using express for this purposes. The whole server-side render code looks like this:

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")

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

const run = (url: string, locale?: string): Promise<IRenderResponse> => {
var template: string = require(../dist/${version.v()}/index.html)
var html: string = ""
var head: object
var context: StaticRouterContext = {}

useStaticRendering(true)

var routing = (
    &lt;StaticRouter 
        location={url} 
        context={context}
    &gt;
        &lt;Provider defaultLocale={locale} /&gt;
    &lt;/StaticRouter&gt;
)

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

        resolve({
            statusCode: context["statusCode"] || 200, 
            template, 
            redirect: context.url
        })
    }).catch((error) =&gt; {
        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)

You can see that the react-tree-walker is used here. But this problem occurs whatever I'm using for the server-side render.

The problem is that if my node-js server is running in one thread, the if two different requests are being done simultaneously, then react-helmet mixes fields. For example, if there are two views:

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

and

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

then I can receive the head something like that:

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

Obviously this happens because of react-helmet uses static fields, I suppose. So, if two request are being handled in parallel, this fields are being changed chaoticaly.

How can I defeat it? This problem often occurs for high-load projects, and this can crash the SEO, because crawler can receive wrong data.

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


Top 7 Most Popular Node.js Frameworks You Should Know

Top 7 Most Popular Node.js Frameworks You Should Know

Node.js is an open-source, cross-platform, runtime environment that allows developers to run JavaScript outside of a browser. In this post, you'll see top 7 of the most popular Node frameworks at this point in time (ranked from high to low by GitHub stars).

Node.js is an open-source, cross-platform, runtime environment that allows developers to run JavaScript outside of a browser.

One of the main advantages of Node is that it enables developers to use JavaScript on both the front-end and the back-end of an application. This not only makes the source code of any app cleaner and more consistent, but it significantly speeds up app development too, as developers only need to use one language.

Node is fast, scalable, and easy to get started with. Its default package manager is npm, which means it also sports the largest ecosystem of open-source libraries. Node is used by companies such as NASA, Uber, Netflix, and Walmart.

But Node doesn't come alone. It comes with a plethora of frameworks. A Node framework can be pictured as the external scaffolding that you can build your app in. These frameworks are built on top of Node and extend the technology's functionality, mostly by making apps easier to prototype and develop, while also making them faster and more scalable.

Below are 7of the most popular Node frameworks at this point in time (ranked from high to low by GitHub stars).

Express

With over 43,000 GitHub stars, Express is the most popular Node framework. It brands itself as a fast, unopinionated, and minimalist framework. Express acts as middleware: it helps set up and configure routes to send and receive requests between the front-end and the database of an app.

Express provides lightweight, powerful tools for HTTP servers. It's a great framework for single-page apps, websites, hybrids, or public HTTP APIs. It supports over fourteen different template engines, so developers aren't forced into any specific ORM.

Meteor

Meteor is a full-stack JavaScript platform. It allows developers to build real-time web apps, i.e. apps where code changes are pushed to all browsers and devices in real-time. Additionally, servers send data over the wire, instead of HTML. The client renders the data.

The project has over 41,000 GitHub stars and is built to power large projects. Meteor is used by companies such as Mazda, Honeywell, Qualcomm, and IKEA. It has excellent documentation and a strong community behind it.

Koa

Koa is built by the same team that built Express. It uses ES6 methods that allow developers to work without callbacks. Developers also have more control over error-handling. Koa has no middleware within its core, which means that developers have more control over configuration, but which means that traditional Node middleware (e.g. req, res, next) won't work with Koa.

Koa already has over 26,000 GitHub stars. The Express developers built Koa because they wanted a lighter framework that was more expressive and more robust than Express. You can find out more about the differences between Koa and Express here.

Sails

Sails is a real-time, MVC framework for Node that's built on Express. It supports auto-generated REST APIs and comes with an easy WebSocket integration.

The project has over 20,000 stars on GitHub and is compatible with almost all databases (MySQL, MongoDB, PostgreSQL, Redis). It's also compatible with most front-end technologies (Angular, iOS, Android, React, and even Windows Phone).

Nest

Nest has over 15,000 GitHub stars. It uses progressive JavaScript and is built with TypeScript, which means it comes with strong typing. It combines elements of object-oriented programming, functional programming, and functional reactive programming.

Nest is packaged in such a way it serves as a complete development kit for writing enterprise-level apps. The framework uses Express, but is compatible with a wide range of other libraries.

LoopBack

LoopBack is a framework that allows developers to quickly create REST APIs. It has an easy-to-use CLI wizard and allows developers to create models either on their schema or dynamically. It also has a built-in API explorer.

LoopBack has over 12,000 GitHub stars and is used by companies such as GoDaddy, Symantec, and the Bank of America. It's compatible with many REST services and a wide variety of databases (MongoDB, Oracle, MySQL, PostgreSQL).

Hapi

Similar to Express, hapi serves data by intermediating between server-side and client-side. As such, it's can serve as a substitute for Express. Hapi allows developers to focus on writing reusable app logic in a modular and prescriptive fashion.

The project has over 11,000 GitHub stars. It has built-in support for input validation, caching, authentication, and more. Hapi was originally developed to handle all of Walmart's mobile traffic during Black Friday.

Difference between Node.js and React.js and Angular.js

AngularJS turned the whole definition of web development through its existence, what was lacking in previous methods of development was inappropriate structure. It merges use of JavaScript with MVC and HTML with DOM. ReactJS is a JavaScript library and has a view, but lacks model &amp; controller components. React introduced the concept of virtual DOM which is regarded as one of the greatest advantages of React in comparison of AngularJS. Node.js is a JavaScript-based platform used for developing real-time network applications like a chat software.

AngularJS turned the whole definition of web development through its existence, what was lacking in previous methods of development was inappropriate structure. It merges use of JavaScript with MVC and HTML with DOM. ReactJS is a JavaScript library and has a view, but lacks model & controller components. React introduced the concept of virtual DOM which is regarded as one of the greatest advantages of React in comparison of AngularJS. Node.js is a JavaScript-based platform used for developing real-time network applications like a chat software.