next.js: inconsistencies with streaming and `Suspense` on vercel

Let me check to see if this is indeed a Vercel issue, and if so, we can transfer this issue over to the Vercel GitHub Discussions and keep looking into this. Thanks for the reproduction!

Hey we found the issue I think so we’re rolling out a fix on production soon enough. Thanks for reporting and digging @Fredkiss3, super helpful.

This fix has been deployed! Thank you all for the helpful information and reproductions.

Thanks @leerob - If it does transfer somewhere else, please let us know where we can track it.

cc @leerob

@YoussefKababe I’m not even using layouts, the fallback is in a page.tsx file. and i don’t even know how i could rearchitect the app to use templates.

Another thing : this issue only happen on vercel. so this is not simply a next.js issue… i think.

Ignore me, it’s still very much an issue. 🙃

This is happening to me in production now with nested suspense as well. Blocking the content download. Nice waterfall locally but issues on Vercel.

Related thread discussing the browser issue (which they’re seeing on multiple platforms): https://github.com/sveltejs/kit/issues/9154#issuecomment-1461169811

I seem to be having this same issue. Suspense/Streaming seems like such a core RSC feature to be broken, right? I couldn’t believe it was a bug and I spent hours trying to get it to work. Streaming is one of the biggest selling points of RSC!

Simple example below. This waits for 5 seconds on the server, rather than returning immediately and streaming in the Suspense content. https://demystifying-rsc.vercel.app/suspense-test/ Code:

import {Suspense} from "react";
export const dynamic='force-dynamic';

async function Delay() {
  return new Promise(r=>{
    setTimeout(()=>r(<div>Delayed Content: {Date.now()}</div>),5000);
  });
}
export default async()=>{
  return <Suspense fallback={<div>Loading...</div>}><Delay/></Suspense>
}

I’m having an issue where I have a component wrapped in suspense with a fallback, the component fetches data with an artificial delay, on navigating to the page it looks for a loading.js page as per NextJS docs and if none is found it blocks the page render until the data is fetched. However, if I reload the page suspense does work. An example is below.

// /dashboard.js

import { Suspense } from "react";
import PostList from "./postList";
import Header from './header';
import Link from "next/link";

const Dashboard = async () => {
  return (
    <div className="p-8">
      <Header />
      <Suspense fallback={<div>Loading...</div>}>
        <PostList />
      </Suspense>
    </div>
  );
};

export default Dashboard;

and

// /dashboard/postList.js

const PostList = async () => {
  const fetchDataWithDelay = async () => {
    const res = await fetch(
      "https://jsonplaceholder.typicode.com/posts?userId=3",
      {
        cache: "no-store",
      }
    );
    const data = await res.json();

    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(data);
      }, 3000);
    });
  };

  const data = await fetchDataWithDelay();

  return (
    <ul className="flex flex-col gap-2">
      {data.map((post) => (
        <li
          key={post.id}
          className="flex flex-col border rounded-md border-slate-500 p-4"
        >
          <h4 className="text-lg font-medium">{post.title}</h4>
          <p className="text-slate-500">{post.body}</p>
        </li>
      ))}
    </ul>
  );
};

export default PostList;