Building a React Server Components Application with Dynamic Client Components

This challenge focuses on implementing a basic React Server Components (RSC) application. RSCs allow you to render components on the server, improving initial load times and SEO, while still leveraging client-side interactivity where needed. You'll build a simple blog post listing, utilizing RSCs for the initial rendering and a dynamic client component for liking a post.

Problem Description

You are tasked with creating a React application that displays a list of blog posts. The application should leverage React Server Components for the initial rendering of the post list and a dynamic Client Component for a "Like" button on each post. The "Like" button should update the like count on the server (simulated for this challenge) and re-render the component on the client.

What needs to be achieved:

Server-Side Rendering: The list of blog posts should be fetched and rendered on the server using an RSC.
Dynamic Client Component: Each blog post should have a "Like" button implemented as a dynamic Client Component.
State Management (Simulated): Clicking the "Like" button should simulate updating the like count on the server and re-rendering the post with the updated count. You don't need to implement a real database or backend; a simple in-memory state will suffice.
Proper RSC/Client Component Usage: Ensure that only the "Like" button is a Client Component and that the rest of the post listing is handled by an RSC.

Key Requirements:

Use TypeScript for type safety.
Utilize use client directive where necessary to define Client Components.
Demonstrate the correct usage of RSCs and Client Components.
The application should be functional and visually presentable.

Expected Behavior:

The initial page load should display the list of blog posts rendered on the server.
Each post should display its title and current like count.
Clicking the "Like" button should increment the like count for that post.
The post should re-render on the client with the updated like count.
No errors should be thrown during server or client rendering.

Edge Cases to Consider:

Empty post list: Handle the case where there are no blog posts to display.
Error fetching posts: Consider how to handle potential errors during post fetching (though error handling is not a primary focus of this challenge).

Examples

Example 1:

Input:  posts = [{ id: 1, title: "First Post", likes: 0 }, { id: 2, title: "Second Post", likes: 5 }]
Output:  A React component rendering a list:
  - First Post (Likes: 0) [Like Button]
  - Second Post (Likes: 5) [Like Button]
Explanation: The initial rendering shows the posts and their like counts.

Example 2:

Input:  posts = [{ id: 1, title: "First Post", likes: 0 }]
Output:  A React component rendering a list:
  - First Post (Likes: 0) [Like Button]
Explanation:  Handles a single post scenario.

Example 3:

Input: posts = []
Output: A React component rendering: "No posts available."
Explanation: Handles the edge case of an empty post list.

Constraints

Post Data: Assume the posts data is an array of objects with the following structure: { id: number, title: string, likes: number }.
Rendering: The entire application must be rendered using React Server Components and Client Components.
State Management: Simulate state updates using a simple in-memory array. No external state management libraries (Redux, Zustand, etc.) are required.
Performance: While not a primary focus, strive for reasonably efficient rendering. Avoid unnecessary re-renders.

Notes

Think about how to structure your components to clearly delineate between RSCs and Client Components.
The use client directive is crucial for defining Client Components.
Consider using React hooks (e.g., useState) within your Client Component to manage the like count state.
The "Like" button's functionality is a simulation. You don't need to implement a real backend API. Focus on the React component structure and interaction.
Start with a simple post list and gradually add the "Like" button functionality.