React › Server Components

What are the main benefits of using Server Components in a real React app?

Intermediate

Answer

Server Components reduce the amount of JavaScript sent to the browser, since their actual code never needs to run on the client at all. They also let you safely access databases and secret keys directly, and they can improve initial page load speed since the server can send fully rendered content right away.
// This safely uses a secret database connection string, never exposed to the browser
async function Dashboard() {
  const stats = await db.query('SELECT * FROM stats', { key: process.env.SECRET_DB_KEY });
  return <StatsView data={stats} />;
}
Real-world example A company dashboard loads noticeably faster after switching several data heavy sections to Server Components, since much less JavaScript now needs to download and run in the visitor's browser before the page becomes usable.

Common follow-ups: Does using Server Components mean an app no longer needs a separate backend API?;What kind of apps benefit the most from adopting Server Components?