Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Lazy loading with react lazy instead of preact-async-route #372

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 17 additions & 16 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -61,25 +61,26 @@ You can also make params optional by adding a `?` to it.

### Lazy Loading

Lazy loading (code splitting) with `preact-router` can be implemented easily using the [AsyncRoute](https://www.npmjs.com/package/preact-async-route) module:

Lazy loading (code splitting) with `preact-router` can be implemented using the `lazy`-component.
```js
import AsyncRoute from 'preact-async-route';
<Router>
<Home path="/" />
<AsyncRoute
path="/friends"
getComponent={ () => import('./friends').then(module => module.default) }
/>
<AsyncRoute
path="/friends/:id"
getComponent={ () => import('./friend').then(module => module.default) }
loading={ () => <div>loading...</div> }
/>
</Router>
import { lazy, Suspense } from "preact/compat";
import { Router } from "preact-router";

const Home = lazy(() => import("./home"));

function App() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
Copy link
Member

@developit developit Jun 15, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Author

@jose-donato jose-donato Jun 16, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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?

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 ? 😅

<Router>
<Home path="/" />
</Router>
</Suspense>
</div>
);
}
```


### Active Matching & Links

`preact-router` includes an add-on module called `match` that lets you wire your components up to Router changes.
Expand Down