Guidance on lazy route loading?

[devmattrick]

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?

[Pringels]

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:

• The preact team is actively working on Suspense, but it seems unlikely to me that 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.
• A preact router that does support lazy loading via Suspense is preact-iso, which ships with 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.

[Shuunen]

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 :

1. succesfull build with code splitting
2. lazy loaded pages
3. no added dependencies

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

[pnutmath]

@Shuunen works like charm!

[cbbfcd]

not work for me 😭