astro-suspense

Out of order streaming support for Astro.

⚠️ This is little more than a proof of concept at this point. Use it if you dare, but know that I'm not (yet) using it in production myself.

Demo

See a demo.

Installation

npx astro add astro-suspense

Usage

---
import { Suspense } from "astro-suspense/components";
import SlowComponent from "./SlowComponent.astro";
---

<Suspense>
  <p slot="fallback">Loading...</p>
  <p slot="error">Something went wrong</p>
  <SlowComponent />
</Suspense>

For view transitions you need to replace Astro's default <ViewTransitions /> with this package's <SuspenseViewTransitions />.

---
import { SuspenseViewTransitions } from "astro-suspense/components";
---

<!doctype html>
<html>
  <head>
    <SuspenseViewTransitions />
  </head>
  <body> </body>
</html>