createStreamableUI causes multiple rerenders / UI flickering

[DennisKo]

Description

Use createStreamableUI and then .append a few items. Every append will cause the previous item to render/mount (I think?) again which causes weird UI flickering. It's even more obvious when you have some fade-in animation on the items.

streamui.mp4

Code example

export async function getMovies(messages: Message[]) {
  'use server';
  const movieUi = createStreamableUI(null);

setTimeout(() => {
    movieUi.update(
      <Movie .../>,
    );
  }, 1000);

  setTimeout(() => {
    movieUi.append(
      <Movie .../>,
    );
  }, 2000);

  setTimeout(() => {
    movieUi.append(
      <Movie .../>,
    );
    movieUi.done();
  }, 3000);

  return movieUi.value;
}

On a page, I am just adding the returned movieUI in a grid component as children. <MovieGrid>{movieUI}</MovieGrid>. Is that maybe the wrong approach?

Additional context

"ai": "3.3.29"
"next": "14.2.8"

[lgrammel]

Potential duplicate of #1850

[lgrammel]

Can you try using createStreamableValue instead and relying on client components as a workaround? I'll plan to take a look at the issue, but it might be related to a long-standing issue that requires next js changes.

[DennisKo]

Can you try using createStreamableValue instead and relying on client components as a workaround? I'll plan to take a look at the issue, but it might be related to a long-standing issue that requires next js changes.

Would be quite a big refactor and kind of would defeat the purpose of streaming RSCs. (my app is a demo of that).

What I noticed it also creates this nested Suspense tree. I don't think that's need for a 4 item array basically?

[lgrammel]

Yeah - so in a nutshell, the suspense tree is the original problem. #1825 fixes that. However, #1825 caused #1933 and needed to be reverted, and from my understanding #1933 is a next js issue. I plan to spend time investigating it but this is not trivial and may not be solvable in the AI SDK itself.

[james-pratama]

I think its also causing this bug in my app to cause it to flicker up after each message finishes streaming. Happened only after I upgraded to @ai-sdk/openai": "^0.0.58" and "ai": "^3.3.32". Do you know what might be the most recent safe version without this bug?

video.mov

[james-pratama]

In case it might be helpful for anyone else, the most stable release I could find without the flicker where we also get OpenAI tokens usage data is 3.2.5

[lgrammel]

@james-pratama 3.2.5 is before the revert of #1933 - did you run into any other issues? what next.js and react versions are you using?

[james-pratama]

I am on React 18.2.0 and still on Next 14.2.2. Have not seen any issues so far but will report back if I do.