AWS Next.js streaming

Tip

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

An example of how to use streaming Next.js RSC. Uses Suspense to stream an async component.

app/page.tsx

<Suspense fallback={<div>Loading...</div>}>
  <Friends />
</Suspense>

For this demo we also need to make sure the route is not statically built.

app/page.tsx

export const dynamic = "force-dynamic";

This is deployed with OpenNext, which needs a config to enable streaming.

open-next.config.ts

export default {
  default: {
    override: {
      wrapper: "aws-lambda-streaming"
    }
  }
};

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.

sst.config.ts

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

View the full example.