Client render without static contents #795

mohsen1 · 2017-08-05T17:17:48Z

When using Preact with server-side rendering we're transferring a parts of the app to the client two times!

Consider following app:

const App = () => <div onClick={ ()=> alert('hi') }>Lorem ipsum</div>

Server will render the app with the string "Lorem ipsum" in the HTML. The client bundle has the string "Lorem ipsum" in it as well.

Solution

Make a transformer(Babel or TypeScript) that removes static content from client bundle

By removing static content that's possible to recover from rendered HTML we can reduce the bundle size:

const App = () => <div onClick={ ()=> alert('hi') }></div>

Make client render use existing HTML to hydrate its virtual DOM.

<html>
    <body>
        <div id="root">
            <div>Lorem ipsum</div>
        </div>
        <script src="preact.js"></script>
        <script>
            const App = () => <div onClick={ ()=> alert('hi') }></div>
            preact.render(App, document.getElementById('root'));
        </script>
    </body>
</html>

We might have to put markers to maintain order of children in components. For instance:

const Comp =({children, prop1}) => (
  <div> 
        Static content 1
        {prop1}
        Static content 2
  </div>
)

Should be transformed into something like this:

const Comp =({children, prop1}) => (
  <div> 
        {preact.staticContent}
        {prop1}
        {preact.staticContent}
  </div>
)

Recovering more than just strings from HTML.

If we can determine part of component is completely static we can remove it entirely and recover it from HTML:

const Comp =({children, prop1}) => (
  <div> 
        <div><span>Hi</span></div>
        {prop1}
  </div>
)

Tranfroms into:

const Comp =({children, prop1}) => (
  <div> 
        {preact.staticContent}
        {prop1}
  </div>
)

I don't understand Preact internals. Is it even possible? This might be a very tricky problem to solve but I believe it worth it. Our own apps are exploding it bundle size and most of the bundle is just static strings.

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

developit · 2017-08-05T23:41:03Z

Could maybe do this in userland by having a scanner that converts DOM to VDOM and then provides a component that can insert that VDOM in place. Hard to ditch the static via Babel though, JSX isn't very deterministic.

marvinhagemeister · 2019-04-21T16:18:57Z

Determining which string can be safely removed will be extremely tricky due to the highly dynamic nature of JavaScript. Whilst this is an interesting idea it's out of scope for us to tackle. For this to work one would need to plugin into one of the existing compilers and extend them.

marvinhagemeister closed this as completed Apr 21, 2019

mohsen1 mentioned this issue Dec 2, 2019

Idea: extract “static” component subtrees to HTML during build facebook/react#17479

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Client render without static contents #795

Client render without static contents #795

mohsen1 commented Aug 5, 2017 •

edited

developit commented Aug 5, 2017

marvinhagemeister commented Apr 21, 2019

Client render without static contents #795

Client render without static contents #795

Comments

mohsen1 commented Aug 5, 2017 • edited

Solution

Make a transformer(Babel or TypeScript) that removes static content from client bundle

Make client render use existing HTML to hydrate its virtual DOM.

Recovering more than just strings from HTML.

developit commented Aug 5, 2017

marvinhagemeister commented Apr 21, 2019

mohsen1 commented Aug 5, 2017 •

edited