Skip to content

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

Closed
@lostpebble

Description

@lostpebble

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions