example of what a re-renderable React server component could maybe look like?

CurrentServerTime.server.tsx

"use server"
import { $ } from "bun"

export async function* CurrentServerTime() {
  while (true) {
    yield <html.input key="ONLY ME!" readOnly value={await $`time`.text()} />
    await sleep(1_234)
  }
}

const sleep = (time: number) => new Promise(resolve => setTimeout(resolve, time))

export function Demo() {
  return (
    <Suspense fallback="loading…">
      <CurrentServerTime />
    </Suspense>
  )
}

https://x.com/sebmarkbage/status/1764399242179744093?s=20 seems to indicate that yielding multiple times from a component should append yielded children instead of replacing or updating as if it were re-rendering.

But by specifying the same key for each child, it seems like this could be a way to explicitly opt-in to re-rendering that child instead of appending it. Is this an abuse of react? Or could this be a legit option?

https://x.com/shuding_/status/1770623199929078112?s=20
The AI SDK UI stream was implemented via nesting <Suspense> elements