How to render large content use streaming output?

[SteveSuv]

I want to render a large array which has complex object. now I use Suspense and Await to render:

<Suspense fallback={<div>loading...</div>}>
  <Await resolve={listPromise}>
    {(list) => {
      return list.map((item, index) => {
        return <div key={index}>{item}</div>;
      });
    }}
  </Await>
</Suspense>;

but the question is, before the listPromise totally resolved, the UI always shows loading. it will takes much of time. and always show loading UI to users, maybe not a good experience.

I want it can be like the chatgpt output style. when a part of the listPromise resolved, the UI can show it's content. until the promise all resolved. Does remix can handle this situation.

[kiliman]

You should use server-sent events

https://stackblitz.com/edit/github-xzkcug-svg9wj?file=app%2Froutes%2Fsse.chat.tsx,app%2Froutes%2F_index.tsx,app%2Froutes%2Fchat-sse.tsx