Open devmattrick opened 2 years ago
I've had this same question for quite a while too. As far as I can tell this is where things stand regarding lazy routes:
preact-router
will be refactored to support it. Their focus is on wmr
at the moment, so unless the community refactors preact-cli
and preact-router
they both face an uncertain future.wmr
. This looks like it could work as a drop-in replacement for preact-router
. However the documentation is quite sparse so it is hard to tell.My plan is to move to react-router
until the preact ecosystem has stabilized around a consistent stack.
I just used Suspense
& lazy
with preact-router
and it works nice 👍
I followed instructions in this PR : https://github.com/preactjs/preact-router/pull/372
I had to adjust things to make it work with TS & my non-default exported components, but in the end I have :
Here is my implementation :
import { Router } from 'preact-router'
import { Suspense, lazy } from 'preact/compat'
import { useState } from 'preact/hooks'
import { AppLoader } from './components/app-loader'
import { PageError } from './pages/page-error'
import { PageHome } from './pages/page-home'
type Component = typeof PageHome
const AsyncPageSearch = lazy<Component>(() => import('./pages/page-search').then(({ PageSearch }) => ({ default: PageSearch })))
const AsyncPageSettings = lazy<Component>(() => import('./pages/page-settings').then(({ PageSettings }) => ({ default: PageSettings })))
export function App () {
const [isLoading, setLoading] = useState(true)
return (
<>
<Suspense fallback={<AppLoader isLoading />}>
<Router>
<PageHome path="/" />
<AsyncPageSearch path="/search/:input" />
<AsyncPageSettings path="/settings" />
<PageError code="page-not-found" default />
</Router>
</Suspense>
<AppLoader isLoading={isLoading} />
</>
)
}
Hope this will help some of you 👍 Happy new year
@Shuunen works like charm!
not work for me 😭
I wanted to follow up on some of the discussion on lazy route loading. Right now, the preact-async-route package is deprecated, saying to use Suspense and lazy. However, some of the discussion on the pull request here discourages the use of Suspense and lazy for this purpose.
Is there a recommended pattern for achieving lazy route loading?