How do React Server Components enhance full-stack application performance and developer experience?

// app/dashboard/page.js (Server Component - no hydration)
async function Dashboard() {
  const userData = await db.query('SELECT * FROM users WHERE id = ?', [userId]);
  return (
    <div>
      <h1>Welcome, {userData.name}</h1>
      <ClientChart data={userData.metrics} /> {/* Interactive */}
      <ServerTable data={userData.orders} />   {/* Static */}
    </div>
  );
}

// components/ClientChart.jsx
'use client';
import { useState } from 'react';
export default function ClientChart({ data }) {
  const [filter, setFilter] = useState('day');
  // Interactive logic here
}