AWS Astro streaming

Tip

This page is best viewed through the site search or through the AI.

Follows the Astro Streaming guide to create an app that streams HTML.

The responseMode in the @sst-community/astro-sst adapter is set to enable streaming.

astro.config.mjs

adapter: aws({
  responseMode: "stream"
})

Now any components that return promises will be streamed.

src/components/Friends.astro

---
import type { Character } from "./character";

const friends: Character[] = await new Promise((resolve) => setTimeout(() => {
  setTimeout(() => {
    resolve(
      [
        { name: "Patrick Star", image: "patrick.png" },
        { name: "Sandy Cheeks", image: "sandy.png" },
        { name: "Squidward Tentacles", image: "squidward.png" },
        { name: "Mr. Krabs", image: "mr-krabs.png" },
      ]
    );
  }, 3000);
}));
---
<div class="grid">
  {friends.map((friend) => (
    <div class="card">
      <img class="img" src={friend.image} alt={friend.name} />
      <p>{friend.name}</p>
    </div>
  ))}
</div>

You should see the friends section load after a 3 second delay.

Note

Safari handles streaming differently than other browsers.

Safari uses a different heuristic to determine when to stream data. You need to render enough initial HTML to trigger streaming. This is typically only a problem for demo apps.

There’s nothing to configure for streaming in the Astro component.

sst.config.ts

new sst.aws.Astro("MyWeb");

View the full example.