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

EloB · 2014-12-21T23:22:28Z

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>

The text was updated successfully, but these errors were encountered:

EloB · 2014-12-22T00:21:01Z

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 · 2014-12-22T00:46:54Z

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

EloB · 2014-12-22T07:52:27Z

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);

syranide · 2015-01-21T22:52:20Z

#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 · 2015-01-22T13:29:43Z

@syranide Nice! :)

gaearon · 2017-08-01T20:39:46Z

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

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

gaearon closed this as completed Aug 1, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

EloB commented Dec 21, 2014

EloB commented Dec 22, 2014

gaearon commented Dec 22, 2014

EloB commented Dec 22, 2014

syranide commented Jan 21, 2015

EloB commented Jan 22, 2015

gaearon commented Aug 1, 2017

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

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

Comments

EloB commented Dec 21, 2014

EloB commented Dec 22, 2014

gaearon commented Dec 22, 2014

EloB commented Dec 22, 2014

syranide commented Jan 21, 2015

EloB commented Jan 22, 2015

gaearon commented Aug 1, 2017