119Build a Suspense-based data-loading example with streaming SSR boundaries

A profile page loads the user quickly and their posts slowly. Without Suspense, the page waits for the slowest request. With nested Suspense boundaries and streaming SSR, the browser gets the page shell immediately, then the profile, then the posts, each as soon as it is ready.

Implement (React 19; the editor provides react-dom/server):

1. createDataCache(api): returns { user(id), posts(id) }, each returning a cached promise (api.getUser(id), api.getPosts(id) are called at most once per id). Components read them with React's use(promise).
2. <UserPage data={cache} userId={id} />:
   • <main> with two independent Suspense boundaries: the profile (<h1>{user.name}</h1>, fallback <p>Loading profile…</p>) and the posts (<ul> of <li>{post.title}</li>, fallback <p>Loading posts…</p>);
   • if the posts request fails, show <p role="alert">Could not load posts</p> inside that section only (an error boundary around it), while the profile stays.
3. streamToChunks(element): render element with renderToReadableStream and resolve with the array of decoded text chunks in the order they arrived.