All routes are chunked, causing hydration of prerendered pages to flicker

[ajoslin]

It appears that all routes are being chunked and async loaded, even without the presence of the async! prefix.

I've reproduced this using preact-cli 1.4.1 here: https://github.com/ajoslin/preact-cli-issue-all-routes-chunked. Just build and serve and check the network tab, it loads both bundle and route-home.chunk. And it does a render before the home chunk is loaded.

Details

I have a prerendered homepage. Here's the process when the user visits the site:

1. Index.html loads with prerendered content
2. Main JS bundle loads
   • Initial render is triggered without the home component downloaded
   • Bundle begins downloading route-home.chunk.js
3. Wait for route-home.chunk.js is loaded
4. Home route chunk loads and the home content renders

Between (2) and (4), a version of the app is rendered that does not include the home route's content, because the home route's JS is still loading.

This results in a noticeable "flicker" of the home content being removed then re-appearing as soon as the initial bundle loads.

I'm not using the async! prefix when importing my home route, but it looks like the home route is being chunked anyway.

[prateekbh]

also related #274

[ajoslin]

Let me know how I can help. I might take a stab at seeing what's wrong with the preact-cli Webpack config if I have some time later.

[thangngoc89]

@ajoslin The async loader was implemented in a way that during prerendering , it act as a normal require so the above behavior is correct (maybe?)

But anyway, we should fix this !

[ajoslin]

@thangngoc89 The problem is that it's happening whether or not I use the async! prefix. I would definitely expect this behavior if async! is given, but it happens with or without it.

I've fixed this problem in my app for now by moving my routes into src/components/pages/.

[thangngoc89]

@ajoslin ah. So it's because of route spliting behavior of preact-cli

[lukeed]

This is supposed to happen.

We also state this in the README:

Fully automatic code splitting for routes

The async! prefix is primarily designed for lazy-loading large components. For example, a REPL component or a WYSIWYG editor.

As for your issue, you're seeing a content flash, correct? If so then we need to fix that part 😄

[ajoslin]

Got it. I certainly love this feature minus the flicker.

And yes, the problem is just the content flash and that it's rendering before the current route's bundle is ready.

[lukeed]

Cool 😃 Do you mind refreshing me by sharing what your <script> tags look like? I don't have a CLI project in front of me atm.

[ajoslin]

Sure, here's what they look like (from the repository in the OP): http://ajoslin.co/UzAy0g/4Us7rtzG

[ajoslin]

And here's a movie of what the flicker looks like and the network tab: http://ajoslin.co/GIH2Ts/5kzN1wTO

[lukeed]

Thanks, helpful! I see Network throttling, but do you have CPU throttling on too?

It seems to be just a really slow render, because the "flash"/re-render only happens once the route-home bundle has been downloaded.

[ajoslin]

I don't think that's the issue. It does one render right when bundle.js has loaded (3.04s) and then does another after home bundle has loaded (698ms later). You see all of the content (prerendered), then app content only (bundle), then all content again (bundle + home chunk).

[lukeed]

Oh, silly. I didn't pay attention to the Pending status of the route-home request. 😅

[lukeed]

My first guess is issue with AsyncComponent. I think it gets passed an empty string while the route is being fetched. That empty string becomes its child, which renders & replaces the current content.

I think we can add a falsey check to inside the AsyncComponent? Just need to ignore the first re-render (production & prerender only).

[ajoslin]

I don't think the problem is the first re-render, it's the initial render itself.

I tried:

• Add shouldComponentUpdate to AsyncComponent that allows update only if state.child is truthy
• Return null from render if state.child is falsy

Both of these still result in the Async component's content being erased immediately on initial render. Is there an idiomatic way to tell the component render to "keep whatever is inside this element and don't do a vdom diff?"

The "hacky" way would be something like this (though even this wouldn't exactly work):

render () {
  if (!state.child) return <div dangerouslySetInnerHTML={{__html: this.base.innerHTML}}>
}