Lazy loading with react lazy instead of preact-async-route #372
Conversation
Updated README.md to perform lazy loading with react lazy function (with examples) instead of the deprecated package preact-async-route.
| function App() { | ||
| return ( | ||
| <div> | ||
| <Suspense fallback={<div>Loading...</div>}> |
There was a problem hiding this comment.
I'm a little wary of recommending this pattern. AsyncRoute transitions between two routes seamlessly by leveraging the fact that preact-router doesn't destroy and recreate routes if they're the same component. With lazy(), clicking a link immediately shows the fallback content ("loading..."), then flashes to the new route once loaded - fairly expensive.
Here's a demo showing the effect:
https://codesandbox.io/s/preact-router-372-bitsq?file=/components/app.js
There was a problem hiding this comment.
I don't agree with you. I think that happens because of naive component that we are providing ("loading...") completely different from the rest of the app causing the flash effect. Correct me if i'm wrong but if we provide a component congruent with the rest of the app i don't think it would be a problem. Besides suspense/code splitting this way is now recommended by React am I wrong?
There was a problem hiding this comment.
Besides suspense/code splitting this way is now recommended by React am I wrong?
We're not React and we arguably have a stronger focus on performance. Suspense isn't good for code-splitting as it will very likely lead to wasteful rendering/diffing, that will be immediately thrown out. The concept itself is flawed, which is why we don't recommend Suspense to be used in production.
There was a problem hiding this comment.
@marvinhagemeister if not Suspense, then what would be a good approach for code splitting with preact-router? If the concept is flawed then why is leaving experimental status soon? (preactjs/preact#2915) Has your stance changed?
There was a problem hiding this comment.
AsyncRoutes says it is deprecated and we should use Suspense/lazy instead...
@marvinhagemeister you recommend not to use lazy/suspense...
It feels like a vicious circle, isn't it ? 😅
|
I don't think preact-cli is using AsyncRoute? (perhaps the recommended "code snippet" could copy from preact-cli) |
|
Is preact-async-route still the recommended way to do it? |
Wonder the same thing... |
Updated README.md to perform lazy loading with react lazy function (with examples) instead of the deprecated package preact-async-route.