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

Feature request to strip data-reactid and return them as an array or string #2761

Closed
EloB opened this issue Dec 21, 2014 · 6 comments
Closed

Comments

@EloB
Copy link

EloB commented Dec 21, 2014

Right now data-reactid on every element adds up a lot of unnecessary space for server generated pages.

I know that they are still needed to initialize on the browser. My solution minimize the output is that I strip all the data-reactid and add them as an array in a <script> tag at the end <body> tag. See my example below.

Except from example server script:

var html = React.renderToString(React.createElement(element, { some: data }))
  , reacts = []
  , filtered;

html = html.replace(/ data-reactid="([^"]*)"/g, function(full, value) {
    reacts.push(value);
    return '';
});

filtered = html.replace('appReact=[]', 'appReact=' + JSON.stringify(reacts));

res.send('<!doctype html>' + filtered);

Except from example client script

var elements = document.getElementsByTagName('*');

// This is fast because it doesn't trigger any reflow.
Array.prototype.slice.call(elements).forEach(function(element, index) {
    element.setAttribute('data-reactid', appReact[index]);
});

React.render(React.createElement(element, { some: data }), document);

Except from example jsx

<html>
    <head>
    </head>
    <body>
        <script dangerouslySetInnerHTML={{__html:'var appReact=[];'}}></script>
        <script src="/client.js"></script>
    </body>
</html>

I think this solution could be done a lot better/safer if its somehow included in the core.

HTML tags Saved characters
10 120+
100 1 200+
1 000 12 000+

Saved characters is even higher because labels often gets wrapped into <span>

@EloB
Copy link
Author

EloB commented Dec 22, 2014

A even better solution is to use a string instead of an array and split the string by a delimiter. To lose 2 extra characters for each tag.

@gaearon
Copy link
Collaborator

gaearon commented Dec 22, 2014

This looks like something gzip should handle quite nicely at the transport level.

@EloB
Copy link
Author

EloB commented Dec 22, 2014

Why not use both and get even better compression?

As far as I know browsers have a stream based rendering approach so they probably will get faster rendered.

Example:

var http = require('http');

http.createServer(function(req, res) {
  res.writeHead(200, { 'Content-Type': 'text/html; charset=UTF-8' });
  res.write('<html><head><title>Test</title></head><body><h1>This will be visible at first</h1>');
  // Simulate bad connection
  setTimeout(function() {
    res.write('<h1>This will be visible after the timeout</h1></body></html>');
    res.end();
  }, 5000);
}).listen(8080);

@EloB EloB changed the title Feature request to strip data-reactid and return them as an array Feature request to strip data-reactid and return them as an array or string Jan 7, 2015
@syranide
Copy link
Contributor

#1570 it's easy to reconstruct the IDs during client render, but until React can go all the way (like in the PR), the entire rendered tree would have to be updated with reconstructed data-reactid during first client render which may or may not a bit of a perf issue.

@EloB
Copy link
Author

EloB commented Jan 22, 2015

@syranide Nice! :)

@gaearon
Copy link
Collaborator

gaearon commented Aug 1, 2017

We don't use IDs anymore so this can probably close. #10339
The change will be part of React 16.

@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

3 participants