demo.jsx

    // RSC to fetch initial data
    export default async function CounterRSC() {
      const initialCount = 0; // Or fetch from a database
      return (
        <CounterClient initialCount={initialCount} />
      );
    }
    
    
  // new file
    'use client' // Indicate that this is a client component
    import { useState } from 'react';

    export default function CounterClient({ initialCount }) {
      const [count, setCount] = useState(initialCount);

      const increment = () => {
        setCount(count + 1);
      };

      return (
        <div>
          <p>Count: {count}</p>
          <button onClick={increment}>Increment</button>
        </div>
      );
    }