renderToNodeStream [object Object] server-side-rendering

Viewed 449
ReactDOMServer.renderToNodeStream(
      <Html
        helmet={Helmet.renderStatic()}
        window={{
          __STATE__: ctx.store.getState()
        }}
        css={css}
        scripts={scripts}
        locale={ctx.locale}
        url={ctx.request.url}
        dynamicData={dynamicData}
      >
        {components}
      </Html>
    )

enter image description here

I can't find what is the reason of this issue . I want to switch to renderToNodeStream but it works in little bit different way then renderToStaticMarkup and I can't find out it .

1 Answers

You cannot pass the store as a json object to the html tag. You may use JSON.stringify and append the store like this,

`window={{
    __STATE__: JSON.Stringify(ctx.store.getState())
}}`

If the store contains any malicious script tag rendered from the API response, that would also get executed within the HTML. To avoid this cross-site scripting(XSS), I would highly recommend importing the serialize (serialize-javascript) package and use it like this.

`window={{
   __STATE__: serialize(ctx.store.getState())
}}`

Serialize will make sure the HTML characters and JavaScript line terminators are escaped automatically.

Related