A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://github.com/facebook/react/issues/10306 below:

Server-rendered HTML polluted with empty data-reactid attributes · Issue #10306 · facebook/react · GitHub

Do you want to request a feature or report a bug?

Bug / Feature

What is the current behavior?

Using new React v16-beta.1 for server-rendering, I'm using the regular react-dom/server package and the method renderToString().

The HTML / DOM output which is created has a root element with an attribute data-reactroot="" and all elements with the attribute data-reactid="". Having this on every single HTML element ends up consuming a lot of bytes on large pages and it seems like it potentially might not be necessary with the new client re-hydration? Or could at least be reduced in size since it appears that they serve no real purpose besides being a binary marker at this point?

To quote from the beta release notes:

Server rendering does not use markup validation anymore, and instead tries its best to attach to existing DOM, warning about inconsistencies.

I see there is a new streaming server-renderer under react-dom/node-stream as well which I haven't managed to take a look at yet. But I expect these two methods of rendering to have the same output.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

Node.js v8.2.0 - React v16-beta.1

EDIT: Just to quickly illustrate what I'm talking about better:

That's 16 extra characters in each HTML element rendered by React. Just in this very small example app, that's 16 * 53 = 848 characters.


RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4