0

Error Image

THE ABOVE ERROR OCCURS when I tried to load more than two data with suspense (streaming). I'm using Next JS 13.4 with App router by the way.

export const serverApi = async <T>(
  url: string,
  init?: RequestInit
): Promise<T> => {
  const response = await fetch(BASE_URL.API + url, init);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  return await (response.json() as Promise<T>);
};

export const getArticles = async () => {
  return await serverApi<Article[]>(API.ARTICLES, {
    cache: "no-store",
  });
};

export const getArticle = async (id: string) => {
  return await serverApi<Article>(API.ARTICLE_WITH_ID(id), {
    cache: "no-store",
  });
};

const Header = async () => {
  return (
    <header className="relative w-full flex items-center justify-center">
      <div />
      <HeaderNavigation />
      <Suspense fallback={<HeaderProfileSpinner />}>
        {/* @ts-ignore */}
        <HeaderProfile />
      </Suspense>
    </header>
  );
};

const HeaderProfile = async () => {
  const cookie = getCookie();
  const queryClient = getQueryClient();

  await queryClient.prefetchQuery(USER_QUERY_KEYS.me(), () =>
    getUserMe(cookie)
  );

  const dehydratedState = dehydrate(queryClient);

  return (
    <Hydrate state={dehydratedState}>
      <HeaderProfileImage />
    </Hydrate>
  );
};

I use API like this. I'm using Page Router for API. For more details, I use Prisma for ORM, Postgres (Supabase) for DB, and use Vercel deployment. I think 'connection closed' means that the server aborts the connection when one of the streaming has resolved, and it wasn't like I expected. I thought the whole point of streaming is rendering multiple contents in parallel but it didn't work. It's kinda weird that the error doesn't happen in localhost.

Mark Kim
  • 1
  • 1
  • Hi, the use of images for code/errors causes many problems. Please read [Why should I not upload images of code/data/errors?](https://meta.stackoverflow.com/a/285557/7353417). Please edit your question. Thank you – pierpy May 27 '23 at 08:48
  • This issue is most likely timeouts from your backend. If something takes more than 12-15s+ fetch, then Next will throw a Connection Closed error. The only way I was able to fix it was to make the response faster (under 10s). It appears to be fixed in Next v13.4.4-canary.10+ according to this issue on Github: https://github.com/vercel/next.js/issues/49205 – Dev-Siri May 27 '23 at 08:48
  • @Dev-Siri Thanks for reply. The connection error happens less than 3 seconds loading the page so it is not the case. I tried Next v13.4.4-canary.11 but it won't work either. I think I have to wait to get it fixed. – Mark Kim May 28 '23 at 13:25

0 Answers0