Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Server-rendered HTML polluted with empty data-reactid attributes #10306

Closed
lostpebble opened this issue Jul 27, 2017 · 2 comments
Closed

Server-rendered HTML polluted with empty data-reactid attributes #10306

lostpebble opened this issue Jul 27, 2017 · 2 comments
Milestone

Comments

@lostpebble
Copy link

lostpebble commented Jul 27, 2017

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:

server-render-reactid

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.

@gaearon gaearon added this to the 16.0 milestone Jul 27, 2017
@gaearon
Copy link
Collaborator

gaearon commented Jul 27, 2017

If I understand correctly, this gzips very well so it’s not a huge problem.
But I think we planned to fix this.
Pretty sure this is related to #10189.

@gaearon
Copy link
Collaborator

gaearon commented Aug 1, 2017

Fixed by #10339.

@gaearon gaearon closed this as completed Aug 1, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants