Closed
Description
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>
Metadata
Metadata
Assignees
Labels
No labels