Building a Server-Centric Data Fetching Application with React Server Components

This challenge focuses on implementing a modern React application architecture utilizing Server Components (RSC). You will build a small application that fetches and displays data from an API, demonstrating how to leverage RSC for efficient data loading and improved initial page performance. This is crucial for understanding how to build performant, scalable React applications in the modern web landscape.

Problem Description

Your task is to create a simple React application that fetches a list of "posts" from a publicly available API and displays them. The core of this challenge is to implement this data fetching and rendering using React Server Components (RSC) and demonstrate how to handle data fetching directly within server components.

What needs to be achieved:

Server Component for Data Fetching: Create a React Server Component that fetches a list of posts from a placeholder API.
Client Component for Interaction (Optional but Recommended): Create a Client Component that can display the fetched posts and potentially offer a simple interaction like a "Refresh" button.
Page Structure: Structure your application to utilize RSC for initial data loading.

Key Requirements:

The application must be built using TypeScript.
You should use a framework that supports RSC, such as Next.js App Router.
Data fetching must occur within the Server Component. Avoid client-side fetching for the initial list of posts.
The fetched data should be displayed clearly in the UI.
Error handling for API requests should be considered.

Expected Behavior:

When the application loads, the list of posts should be fetched on the server and rendered directly into the HTML. This means users will see content immediately without waiting for JavaScript to download and execute on the client to fetch data. If a "Refresh" button is implemented in a Client Component, clicking it should re-fetch the data and update the displayed posts.

Important Edge Cases:

API Unavailability: What happens if the placeholder API is down or returns an error?
Empty Data: What if the API returns an empty list of posts?

Examples

Example 1: Successful Data Fetch and Display

Input (Conceptual): A user navigates to the application's root page.

Output (Conceptual): The page displays a list of post titles and their bodies. Each post might look like:

# Post Title 1
This is the body of post 1...

# Post Title 2
This is the body of post 2...

Explanation: The Server Component made an HTTP request to the API, received the data, and rendered it into HTML. This HTML was then sent to the browser.

Example 2: API Error Handling

Input (Conceptual): The placeholder API returns a 500 Internal Server Error.

Output (Conceptual): The application displays a user-friendly error message such as "Failed to load posts. Please try again later." or shows an empty state with an error indication.

Explanation: The Server Component caught the API error and rendered an appropriate fallback UI instead of crashing or showing incomplete data.

Example 3: Empty Data Set

Input (Conceptual): The placeholder API returns an empty array [] for posts.

Output (Conceptual): The application displays a message like "No posts found." or simply renders an empty list.

Explanation: The application gracefully handles scenarios where there's no data to display.

Constraints

You must use TypeScript for all code.
The solution should be implementable within a Next.js App Router project.
The placeholder API to be used is https://jsonplaceholder.typicode.com/posts.
The initial data fetch must occur within a Server Component.
Avoid client-side data fetching libraries like swr or react-query for the initial data load. You can use them in Client Components for subsequent refreshes if you implement that feature.

Notes

This challenge is designed to familiarize you with the core concepts of React Server Components, particularly their ability to fetch data server-side.
Consider how you will structure your components to separate server-rendered logic from client-side interactivity.
Think about how to pass data from Server Components to Client Components.
Experiment with different ways to handle loading states and errors.
For this challenge, you don't need to implement complex routing or state management beyond what's necessary for displaying the posts.