Hone logo
Hone
Problems

Implementing Streaming Server-Side Rendering (SSR) in React with TypeScript

Server-Side Rendering (SSR) enhances SEO and initial load performance. Streaming SSR takes this a step further by progressively sending rendered HTML chunks to the client as they become available, rather than waiting for the entire page to be rendered. This challenge asks you to implement a basic streaming SSR solution in React using TypeScript, focusing on the core concepts of chunking and progressive rendering.

Problem Description

You are tasked with creating a React component that performs server-side rendering and streams the rendered output in chunks. The component should fetch data asynchronously, render a portion of the UI based on the fetched data, and then stream this rendered HTML to the client. The component should continue rendering and streaming chunks as more data becomes available. The final chunk should signal the completion of the rendering process.

What needs to be achieved:

  • Create a React component that fetches data asynchronously.
  • Render a portion of the UI based on the fetched data.
  • Stream the rendered HTML in chunks to the client.
  • Signal the completion of the rendering process with a final chunk.

Key Requirements:

  • The solution must be written in TypeScript.
  • The component should use React.createElement to generate the HTML chunks. Direct string concatenation is discouraged.
  • The data fetching should be asynchronous (e.g., using fetch or axios).
  • The streaming should be simulated using a callback function that receives HTML chunks. You don't need to implement a full-fledged streaming server.
  • The component should handle potential errors during data fetching gracefully.

Expected Behavior:

The component should call the provided stream callback function with HTML chunks as they are generated. The first chunk should contain the initial HTML structure (e.g., <html><head>...</head><body>). Subsequent chunks should contain portions of the rendered UI. The final chunk should indicate the end of the stream (e.g., a special marker like </body></html>).

Edge Cases to Consider:

  • Data Fetching Errors: Handle cases where the data fetching fails. Stream an error message chunk.
  • Empty Data: Handle cases where the fetched data is empty. Render a placeholder or message.
  • Asynchronous Data Dependencies: Consider how to handle situations where rendering depends on multiple asynchronous data sources. (For simplicity, this challenge focuses on a single data source.)

Examples

Example 1:

Input:
stream: (chunk: string) => { console.log(chunk); },
dataFetcher: () => Promise.resolve({ title: "My Page", content: "Hello, world!" })
Output:
console output:
<html><head><title>My Page</title></head><body><h1>Hello, world!</h1></body></html>
Explanation:
The component fetches data, renders the title and content, and streams the complete HTML.

Example 2:

Input:
stream: (chunk: string) => { console.log(chunk); },
dataFetcher: () => Promise.resolve({ title: "Error Page", content: "Data fetching failed!" })
Output:
console output:
<html><head><title>Error Page</title></head><body><h1>Data fetching failed!</h1></body></html>
Explanation:
The component fetches data that indicates an error, renders an error message, and streams the complete HTML.

Example 3: (Error Handling)

Input:
stream: (chunk: string) => { console.log(chunk); },
dataFetcher: () => Promise.reject(new Error("Failed to fetch data"))
Output:
console output:
<html><head><title>Error Page</title></head><body><h1>Failed to fetch data</h1></body></html>
Explanation:
The component encounters an error during data fetching, renders an error message, and streams the complete HTML.

Constraints

  • The solution must be a single React component.
  • The stream callback function must be called at least once, even if there's an error.
  • The final chunk must clearly indicate the end of the stream.
  • The component should not use any external libraries beyond React and ReactDOM.
  • The data fetching function (dataFetcher) is provided as a parameter. You should not implement your own data fetching logic.
  • The component should be able to handle data fetching that takes up to 1 second.

Notes

  • Think about how to break down the rendering process into smaller, manageable chunks.
  • Consider using React.createElement to construct the HTML chunks dynamically.
  • The stream callback is your primary means of communicating the rendered output.
  • Focus on the core concepts of streaming and chunking. You don't need to implement a full-fledged streaming server.
  • Error handling is crucial for a robust streaming SSR implementation.
  • The dataFetcher function will always return a Promise.
Loading editor...
typescript