Feature: Lazyload islands components in the client side

[Khaledinges]

Hello !

It comes to my mind that I wouldn't want to load all the islands JS chunks on the page load in the client side. Obviously, it would be for performance optimization reasons.

would it be possible to inject some islands JS components code when needed (lazyloaded) or on user interactions ?

[lucacasonato]

This would be a good addition, I agree. Ideally one should be able to set when the island should be loaded via either an option in the island file (at declaration), or at the island instantiation (at island use).

I think "at declartion" would be an easier first step. Maybe something along the lines of:

// islands/Island.tsx

export default function Island() { ... }

// When to load the island. Defaults to "eager".
// Valid options are:
//   - "eager": load as soon as possible (use for above the fold islands).
//   - "viewport": load when the island is about to enter the viewport.
//   - "interaction": when an interactive event is encountered by the island. The event will be captured, the island loaded, and then the event is replayed.
export const load = "eager";

[Khaledinges]

Great looks perfect ! Thank you

[igorbrasileiro]

It seems that islands already can lazy load to user interaction via Suspense. Take a look at this example:

import { Suspense, Lazy }  from "preact/compat"
import {useState} from "preact/hooks"

const Comp = lazy(() => import("../component/Comp.tsx"))
export default function Component() {
  const [render, setRender] = useState(false);
  return <div>{render && <Comp />} <button onClick={() => setRendeR(true)}>click</button></div>
}

In addition, IMO, islands can be rendered from fresh following the browser scheduler.postTask improving the UX and decreasing the TBT. I opened a PR doing this (#1019) for islands, this could be implemented for plugins too.

[DontMash]

I would also argue that using <Suspense> and lazy loading your component is way more versatile than adding an option to the "island declaration".

Since the PR #1019 has been merged and the solution would be to use Suspense, this issue could be closed.

[bartlomieju]

As noted in the comments, lazy-loading island content is achievable today using Preact's lazy() + <Suspense> inside an island component. Additionally, Fresh's island hydration itself is already deferred (PR #1019 was merged).

The declarative load option ("eager", "viewport", "interaction") was never implemented, but the existing Preact primitives cover the use case. Closing — feel free to reopen if there's a specific gap that lazy() + <Suspense> doesn't address.