Server Components - Execute componentes React no servidor com zero JavaScript no lado do cliente

Q: O que torna um componente um Server Component vs um Client Component?

Componentes são Server Components por padrão em frameworks que suportam RSC (por exemplo, Next.js App Router) Um arquivo deve incluir "use client" no topo para optar pela renderização no lado do cliente Server Components rodam apenas no servidor e enviam zero JavaScript para o navegador

Q: Um Client Component pode importar um Server Component?

Não. Client Components não podem importar módulos de Server Component Em vez disso, passe Server Components como children ou outras props JSX para Client Components Um Server Component pode importar Client Components sem restrições

Q: Posso usar useState, useEffect, ou outros hooks dentro de um Server Component?

Não. Hooks como useState, useEffect, useRef, etc. são apenas para o cliente Server Components podem usar await diretamente no corpo da função em vez disso Mova a lógica interativa para um componente "use client"

Q: Armadilha: Uma biblioteca de terceiros quebra quando usada em um Server Component. Por quê?

Bibliotecas que usam useEffect, useState, ou APIs do navegador (window, document) falharão em Server Components Importe-as apenas dentro de arquivos "use client" ou crie um wrapper de componente cliente fino

Q: Como passar uma promessa de um Server Component para um Client Component para carregamento adiado?

O componente cliente usa use(dataPromise) dentro de um limite para resolvê-la.

Q: Como tipar um Async Server Component em TypeScript?

Async Server Components retornam Promise -- TypeScript lida com isso automaticamente com os tipos do React 19 Use React.ReactNode para a prop children quando um Client Component envolve a saída de um Server Component Tipos de props serializáveis devem evitar funções, instâncias de classe e Symbols

Q: Qual é o padrão de composição para envolver Server Components em Client Components?

O children é JSX já renderizado de um Server Component, não um import.

Receita

// app/page.tsx  (Server Component -- o padrão no Next.js App Router)
import { db } from "@/lib/db";
import ClientCounter from "./ClientCounter";
 
export default async function DashboardPage() {
  // Acesso direto ao banco de dados -- este código nunca chega ao navegador
  const stats = await db.query("SELECT count(*) FROM orders");
 
  return (
    <main>
      <h1>Dashboard</h1>
      <p>Total de pedidos: {stats.count}</p>
      {/* Transfere para um Client Component para interatividade */}
      <ClientCounter initialCount={stats.count} />
    </main>
  );
}

// app/ClientCounter.tsx
"use client";
 
import { useState } from "react";
 
export default function ClientCounter({ initialCount }: { initialCount: number }) {
  const [count, setCount] = useState(initialCount);
  return <button onClick={() => setCount(c => c + 1)}>Contagem: {count}</button>;
}

Quando usar isso: Use Server Components sempre que um componente precisar apenas ler dados e renderizar HTML -- sem manipuladores de eventos, sem estado, sem APIs do navegador.

Exemplo de Trabalho

// Uma página de catálogo de produtos misturando preocupações de servidor e cliente
// app/products/page.tsx  (Server Component)
import { Suspense } from "react";
import { getProducts, getCategories } from "@/lib/api";
import ProductGrid from "./ProductGrid";
import CategoryFilter from "./CategoryFilter";
 
export default async function ProductsPage() {
  const categories = await getCategories();
 
  return (
    <div className="flex gap-6">
      {/* Client Component para filtragem interativa */}
      <CategoryFilter categories={categories} />
 
      {/* Server Component com streaming */}
      <Suspense fallback={<p>Carregando produtos...</p>}>
        <ProductList />
      </Suspense>
    </div>
  );
}
 
async function ProductList() {
  const products = await getProducts();
  // ProductGrid é um componente "use client" que recebe props serializáveis
  return <ProductGrid products={products} />;
}

// app/products/CategoryFilter.tsx
"use client";
 
import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";
 
type Props = { categories: { id: string; name: string }[] };
 
export default function CategoryFilter({ categories }: Props) {
  const [selected, setSelected] = useState<string | null>(null);
  const [isPending, startTransition] = useTransition();
  const router = useRouter();
 
  function handleSelect(id: string) {
    setSelected(id);
    startTransition(() => {
      router.push(`/products?category=${id}`);
    });
  }
 
  return (
    <aside>
      <h2>Categorias</h2>
      <ul>
        {categories.map((c) => (
          <li key={c.id}>
            <button
              onClick={() => handleSelect(c.id)}
              className={selected === c.id ? "font-bold" : ""}
            >
              {c.name}
            </button>
          </li>
        ))}
      </ul>
      {isPending && <p>Filtrando...</p>}
    </aside>
  );
}

// app/products/ProductGrid.tsx
"use client";
 
type Product = { id: string; name: string; price: number };
 
export default function ProductGrid({ products }: { products: Product[] }) {
  return (
    <div className="grid grid-cols-3 gap-4">
      {products.map((p) => (
        <div key={p.id} className="border p-4 rounded">
          <h3>{p.name}</h3>
          <p>${p.price.toFixed(2)}</p>
          <button onClick={() => alert(`Adicionado ${p.name}`)}>Adicionar ao carrinho</button>
        </div>
      ))}
    </div>
  );
}

O que isso demonstra:

Server Component buscando dados com acesso direto ao banco de dados/API
Suspense transmitindo um server component lento
Passando dados serializáveis (objetos simples, arrays, strings, números) do servidor para o cliente
Client Components usando estado e manipuladores de eventos
A diretiva de limite "use client"

Análise Profunda

Como Funciona

Server Components executam apenas no servidor durante a renderização. Sua saída é uma árvore React serializada (payload RSC) que é transmitida para o cliente.
O payload RSC não é HTML -- é um formato compacto binário/semelhante a JSON que o React no cliente pode reconciliar com o DOM existente.
Componentes são Server Components por padrão. Um arquivo deve incluir "use client" no topo para optar pela renderização no lado do cliente.
Server Components podem importar Client Components, mas Client Components não podem importar Server Components. Em vez disso, passe Server Components como children ou outras props JSX.
Props que cruzam a fronteira servidor-cliente devem ser serializáveis: strings, números, booleanos, null, arrays, objetos simples, Dates, Map, Set, FormData, typed arrays, Promise (com use()), server actions e elementos JSX. Funções (exceto server actions), classes e nós DOM não são serializáveis.
Server Components podem ser async -- eles podem usar await diretamente no corpo da função. Isso não é permitido em Client Components.
Como Server Components enviam zero JavaScript para o navegador, dependências grandes usadas apenas para renderização (por exemplo, realçadores de sintaxe, parsers de markdown) não têm impacto no bundle do cliente.

Variações

Padrões de busca de dados assíncronos:

// Padrão 1: Await de nível superior
async function UserProfile({ userId }: { userId: string }) {
  const user = await fetchUser(userId);
  return <h1>{user.name}</h1>;
}
 
// Padrão 2: Busca de dados paralela
async function Dashboard() {
  const [users, posts, stats] = await Promise.all([
    fetchUsers(),
    fetchPosts(),
    fetchStats(),
  ]);
  return (
    <>
      <UserList users={users} />
      <PostFeed posts={posts} />
      <StatsPanel stats={stats} />
    </>
  );
}
 
// Padrão 3: Passar promessa para o cliente (adiar resolução)
async function Page() {
  const dataPromise = fetchSlowData(); // NÃO await
  return <ClientChart dataPromise={dataPromise} />;
}

Padrão de composição -- passando Server Components como children:

// Isso funciona porque children é JSX já renderizado, não um import
"use client";
export function ClientLayout({ children }: { children: React.ReactNode }) {
  const [open, setOpen] = useState(true);
  return <div className={open ? "expanded" : "collapsed"}>{children}</div>;
}

Notas TypeScript

Async Server Components retornam Promise<JSX.Element>. O TypeScript lida com isso automaticamente com os tipos do React 19.
Use React.ReactNode para a prop children quando um Client Component envolve a saída de um Server Component.
Tipos de props serializáveis devem evitar funções, instâncias de classe e Symbols.

Armadilhas

Importar um Client Component em um Server Component é aceitável; o inverso não é -- Um Client Component não pode importar um módulo de Server Component. Correção: Passe o Server Component como children ou outra prop JSX em vez de importá-lo.
Hooks não são permitidos em Server Components -- useState, useEffect, useRef, etc. são apenas para o cliente. Correção: Mova a lógica interativa para um componente "use client".
Closures não serializam -- Você não pode passar uma função regular como prop do servidor para o cliente. Correção: Use um Server Action ("use server") em vez disso, que o React serializa como uma referência RPC.
Bibliotecas de terceiros podem não ser compatíveis com RSC -- Bibliotecas que usam useEffect ou APIs do navegador falharão em Server Components. Correção: Importe-as apenas dentro de arquivos "use client" ou use um wrapper.
Sem acesso a APIs do navegador -- window, document, localStorage, etc. não existem no servidor. Correção: Proteja o código exclusivo do navegador com "use client".
A re-renderização funciona de forma diferente -- Server Components reexecutam no servidor quando a rota muda. Eles não re-renderizam em resposta a mudanças de estado. Correção: Eleve o estado interativo para Client Components.

Alternativas

Abordagem	Quando escolher
Server Components	UI somente leitura, busca de dados, dependências grandes que você quer fora do bundle
Client Components	UI interativa com estado, efeitos ou APIs do navegador
Renderização do lado do servidor (SSR) sem RSC	Aplicativos pré-React 19, frameworks que ainda não suportam RSC
Geração de Site Estático (SSG)	Conteúdo que raramente muda e pode ser construído no momento da implantação
Rotas de API + fetch do cliente	Quando você precisa de controle granular sobre o cache e a forma dos dados

FAQs

O que torna um componente um Server Component vs um Client Component?

Componentes são Server Components por padrão em frameworks que suportam RSC (por exemplo, Next.js App Router)
Um arquivo deve incluir "use client" no topo para optar pela renderização no lado do cliente
Server Components rodam apenas no servidor e enviam zero JavaScript para o navegador

Um Client Component pode importar um Server Component?

Não. Client Components não podem importar módulos de Server Component
Em vez disso, passe Server Components como children ou outras props JSX para Client Components
Um Server Component pode importar Client Components sem restrições

Quais tipos de dados podem ser passados como props de um Server Component para um Client Component?

Strings, números, booleanos, null, arrays, objetos simples, Dates, Map, Set, FormData, typed arrays
Promise (consumido com use()) e server actions também são serializáveis
Funções (exceto server actions), instâncias de classe e nós DOM não são serializáveis

Posso usar useState, useEffect, ou outros hooks dentro de um Server Component?

Não. Hooks como useState, useEffect, useRef, etc. são apenas para o cliente
Server Components podem usar await diretamente no corpo da função em vez disso
Mova a lógica interativa para um componente "use client"

Como buscar dados em paralelo em um Server Component?

async function Dashboard() {
  const [users, posts, stats] = await Promise.all([
    fetchUsers(),
    fetchPosts(),
    fetchStats(),
  ]);
  return <>{/* renderiza dados */}</>;
}

O que é o payload RSC e como funciona o streaming?

O payload RSC é um formato compacto binário/semelhante a JSON (não HTML) que o React no cliente reconcilia com o DOM existente
Server Components podem ser envolvidos em limites <Suspense> para streaming -- o fallback é exibido enquanto o componente resolve
Isso permite que a página seja parcialmente interativa antes que todos os dados sejam carregados

Armadilha: Uma biblioteca de terceiros quebra quando usada em um Server Component. Por quê?

Bibliotecas que usam useEffect, useState, ou APIs do navegador (window, document) falharão em Server Components
Importe-as apenas dentro de arquivos "use client" ou crie um wrapper de componente cliente fino

Armadilha: Por que meu Server Component não re-renderiza quando o estado do cliente muda?

Server Components reexecutam no servidor apenas quando a rota muda
Eles não re-renderizam em resposta a mudanças de estado do lado do cliente
Eleve o estado interativo para Client Components se precisar de reatividade

Como passar uma promessa de um Server Component para um Client Component para carregamento adiado?

// Server Component -- NÃO await
async function Page() {
  const dataPromise = fetchSlowData();
  return <ClientChart dataPromise={dataPromise} />;
}

O componente cliente usa use(dataPromise) dentro de um limite <Suspense> para resolvê-la.

Como tipar um Async Server Component em TypeScript?

Async Server Components retornam Promise<JSX.Element> -- TypeScript lida com isso automaticamente com os tipos do React 19
Use React.ReactNode para a prop children quando um Client Component envolve a saída de um Server Component
Tipos de props serializáveis devem evitar funções, instâncias de classe e Symbols

Qual é o padrão de composição para envolver Server Components em Client Components?

"use client";
export function ClientLayout({ children }: { children: React.ReactNode }) {
  const [open, setOpen] = useState(true);
  return <div className={open ? "expanded" : "collapsed"}>{children}</div>;
}

O children é JSX já renderizado de um Server Component, não um import.

Dependências grandes usadas apenas em Server Components afetam o bundle do cliente?

Não. Como Server Components enviam zero JavaScript para o navegador, dependências grandes como realçadores de sintaxe ou parsers de markdown não têm impacto no bundle do cliente
Este é um benefício de desempenho chave da arquitetura RSC

Relacionado

Visão Geral -- Novidades no React 19
Server Actions -- Mutando dados de funções do servidor
Hook use() -- Consumindo promessas passadas de Server Components
Carregamento de Assets -- Pré-carregando recursos junto com conteúdo renderizado no servidor

Receita

// app/page.tsx  (Server Component -- o padrão no Next.js App Router)
import { db } from "@/lib/db";
import ClientCounter from "./ClientCounter";
 
export default async function DashboardPage() {
  // Acesso direto ao banco de dados -- este código nunca chega ao navegador
  const stats = await db.query("SELECT count(*) FROM orders");
 
  return (
    <main>
      <h1>Dashboard</h1>
      <p>Total de pedidos: {stats.count}</p>
      {/* Transfere para um Client Component para interatividade */}
      <ClientCounter initialCount={stats.count} />
    </main>
  );
}

// app/ClientCounter.tsx
"use client";
 
import { useState } from "react";
 
export default function ClientCounter({ initialCount }: { initialCount: number }) {
  const [count, setCount] = useState(initialCount);
  return <button onClick={() => setCount(c => c + 1)}>Contagem: {count}</button>;
}

Quando usar isso: Use Server Components sempre que um componente precisar apenas ler dados e renderizar HTML -- sem manipuladores de eventos, sem estado, sem APIs do navegador.

Exemplo de Trabalho

// Uma página de catálogo de produtos misturando preocupações de servidor e cliente
// app/products/page.tsx  (Server Component)
import { Suspense } from "react";
import { getProducts, getCategories } from "@/lib/api";
import ProductGrid from "./ProductGrid";
import CategoryFilter from "./CategoryFilter";
 
export default async function ProductsPage() {
  const categories = await getCategories();
 
  return (
    <div className="flex gap-6">
      {/* Client Component para filtragem interativa */}
      <CategoryFilter categories={categories} />
 
      {/* Server Component com streaming */}
      <Suspense fallback={<p>Carregando produtos...</p>}>
        <ProductList />
      </Suspense>
    </div>
  );
}
 
async function ProductList() {
  const products = await getProducts();
  // ProductGrid é um componente "use client" que recebe props serializáveis
  return <ProductGrid products={products} />;
}

// app/products/CategoryFilter.tsx
"use client";
 
import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";
 
type Props = { categories: { id: string; name: string }[] };
 
export default function CategoryFilter({ categories }: Props) {
  const [selected, setSelected] = useState<string | null>(null);
  const [isPending, startTransition] = useTransition();
  const router = useRouter();
 
  function handleSelect(id: string) {
    setSelected(id);
    startTransition(() => {
      router.push(`/products?category=${id}`);
    });
  }
 
  return (
    <aside>
      <h2>Categorias</h2>
      <ul>
        {categories.map((c) => (
          <li key={c.id}>
            <button
              onClick={() => handleSelect(c.id)}
              className={selected === c.id ? "font-bold" : ""}
            >
              {c.name}
            </button>
          </li>
        ))}
      </ul>
      {isPending && <p>Filtrando...</p>}
    </aside>
  );
}

// app/products/ProductGrid.tsx
"use client";
 
type Product = { id: string; name: string; price: number };
 
export default function ProductGrid({ products }: { products: Product[] }) {
  return (
    <div className="grid grid-cols-3 gap-4">
      {products.map((p) => (
        <div key={p.id} className="border p-4 rounded">
          <h3>{p.name}</h3>
          <p>${p.price.toFixed(2)}</p>
          <button onClick={() => alert(`Adicionado ${p.name}`)}>Adicionar ao carrinho</button>
        </div>
      ))}
    </div>
  );
}

O que isso demonstra:

Server Component buscando dados com acesso direto ao banco de dados/API
Suspense transmitindo um server component lento
Passando dados serializáveis (objetos simples, arrays, strings, números) do servidor para o cliente
Client Components usando estado e manipuladores de eventos
A diretiva de limite "use client"

Análise Profunda

Como Funciona

Server Components executam apenas no servidor durante a renderização. Sua saída é uma árvore React serializada (payload RSC) que é transmitida para o cliente.
O payload RSC não é HTML -- é um formato compacto binário/semelhante a JSON que o React no cliente pode reconciliar com o DOM existente.
Componentes são Server Components por padrão. Um arquivo deve incluir "use client" no topo para optar pela renderização no lado do cliente.
Server Components podem importar Client Components, mas Client Components não podem importar Server Components. Em vez disso, passe Server Components como children ou outras props JSX.
Props que cruzam a fronteira servidor-cliente devem ser serializáveis: strings, números, booleanos, null, arrays, objetos simples, Dates, Map, Set, FormData, typed arrays, Promise (com use()), server actions e elementos JSX. Funções (exceto server actions), classes e nós DOM não são serializáveis.
Server Components podem ser async -- eles podem usar await diretamente no corpo da função. Isso não é permitido em Client Components.
Como Server Components enviam zero JavaScript para o navegador, dependências grandes usadas apenas para renderização (por exemplo, realçadores de sintaxe, parsers de markdown) não têm impacto no bundle do cliente.

Variações

Padrões de busca de dados assíncronos:

// Padrão 1: Await de nível superior
async function UserProfile({ userId }: { userId: string }) {
  const user = await fetchUser(userId);
  return <h1>{user.name}</h1>;
}
 
// Padrão 2: Busca de dados paralela
async function Dashboard() {
  const [users, posts, stats] = await Promise.all([
    fetchUsers(),
    fetchPosts(),
    fetchStats(),
  ]);
  return (
    <>
      <UserList users={users} />
      <PostFeed posts={posts} />
      <StatsPanel stats={stats} />
    </>
  );
}
 
// Padrão 3: Passar promessa para o cliente (adiar resolução)
async function Page() {
  const dataPromise = fetchSlowData(); // NÃO await
  return <ClientChart dataPromise={dataPromise} />;
}

Padrão de composição -- passando Server Components como children:

// Isso funciona porque children é JSX já renderizado, não um import
"use client";
export function ClientLayout({ children }: { children: React.ReactNode }) {
  const [open, setOpen] = useState(true);
  return <div className={open ? "expanded" : "collapsed"}>{children}</div>;
}

Notas TypeScript

Async Server Components retornam Promise<JSX.Element>. O TypeScript lida com isso automaticamente com os tipos do React 19.
Use React.ReactNode para a prop children quando um Client Component envolve a saída de um Server Component.
Tipos de props serializáveis devem evitar funções, instâncias de classe e Symbols.

Armadilhas

Importar um Client Component em um Server Component é aceitável; o inverso não é -- Um Client Component não pode importar um módulo de Server Component. Correção: Passe o Server Component como children ou outra prop JSX em vez de importá-lo.
Hooks não são permitidos em Server Components -- useState, useEffect, useRef, etc. são apenas para o cliente. Correção: Mova a lógica interativa para um componente "use client".
Closures não serializam -- Você não pode passar uma função regular como prop do servidor para o cliente. Correção: Use um Server Action ("use server") em vez disso, que o React serializa como uma referência RPC.
Bibliotecas de terceiros podem não ser compatíveis com RSC -- Bibliotecas que usam useEffect ou APIs do navegador falharão em Server Components. Correção: Importe-as apenas dentro de arquivos "use client" ou use um wrapper.
Sem acesso a APIs do navegador -- window, document, localStorage, etc. não existem no servidor. Correção: Proteja o código exclusivo do navegador com "use client".
A re-renderização funciona de forma diferente -- Server Components reexecutam no servidor quando a rota muda. Eles não re-renderizam em resposta a mudanças de estado. Correção: Eleve o estado interativo para Client Components.

Alternativas

Abordagem	Quando escolher
Server Components	UI somente leitura, busca de dados, dependências grandes que você quer fora do bundle
Client Components	UI interativa com estado, efeitos ou APIs do navegador
Renderização do lado do servidor (SSR) sem RSC	Aplicativos pré-React 19, frameworks que ainda não suportam RSC
Geração de Site Estático (SSG)	Conteúdo que raramente muda e pode ser construído no momento da implantação
Rotas de API + fetch do cliente	Quando você precisa de controle granular sobre o cache e a forma dos dados

FAQs

O que torna um componente um Server Component vs um Client Component?

Componentes são Server Components por padrão em frameworks que suportam RSC (por exemplo, Next.js App Router)
Um arquivo deve incluir "use client" no topo para optar pela renderização no lado do cliente
Server Components rodam apenas no servidor e enviam zero JavaScript para o navegador

Um Client Component pode importar um Server Component?

Não. Client Components não podem importar módulos de Server Component
Em vez disso, passe Server Components como children ou outras props JSX para Client Components
Um Server Component pode importar Client Components sem restrições

Quais tipos de dados podem ser passados como props de um Server Component para um Client Component?

Strings, números, booleanos, null, arrays, objetos simples, Dates, Map, Set, FormData, typed arrays
Promise (consumido com use()) e server actions também são serializáveis
Funções (exceto server actions), instâncias de classe e nós DOM não são serializáveis

Posso usar useState, useEffect, ou outros hooks dentro de um Server Component?

Não. Hooks como useState, useEffect, useRef, etc. são apenas para o cliente
Server Components podem usar await diretamente no corpo da função em vez disso
Mova a lógica interativa para um componente "use client"

Como buscar dados em paralelo em um Server Component?

async function Dashboard() {
  const [users, posts, stats] = await Promise.all([
    fetchUsers(),
    fetchPosts(),
    fetchStats(),
  ]);
  return <>{/* renderiza dados */}</>;
}

O que é o payload RSC e como funciona o streaming?

O payload RSC é um formato compacto binário/semelhante a JSON (não HTML) que o React no cliente reconcilia com o DOM existente
Server Components podem ser envolvidos em limites <Suspense> para streaming -- o fallback é exibido enquanto o componente resolve
Isso permite que a página seja parcialmente interativa antes que todos os dados sejam carregados

Armadilha: Uma biblioteca de terceiros quebra quando usada em um Server Component. Por quê?

Bibliotecas que usam useEffect, useState, ou APIs do navegador (window, document) falharão em Server Components
Importe-as apenas dentro de arquivos "use client" ou crie um wrapper de componente cliente fino

Armadilha: Por que meu Server Component não re-renderiza quando o estado do cliente muda?

Server Components reexecutam no servidor apenas quando a rota muda
Eles não re-renderizam em resposta a mudanças de estado do lado do cliente
Eleve o estado interativo para Client Components se precisar de reatividade

Como passar uma promessa de um Server Component para um Client Component para carregamento adiado?

// Server Component -- NÃO await
async function Page() {
  const dataPromise = fetchSlowData();
  return <ClientChart dataPromise={dataPromise} />;
}

O componente cliente usa use(dataPromise) dentro de um limite <Suspense> para resolvê-la.

Como tipar um Async Server Component em TypeScript?

Async Server Components retornam Promise<JSX.Element> -- TypeScript lida com isso automaticamente com os tipos do React 19
Use React.ReactNode para a prop children quando um Client Component envolve a saída de um Server Component
Tipos de props serializáveis devem evitar funções, instâncias de classe e Symbols

Qual é o padrão de composição para envolver Server Components em Client Components?

"use client";
export function ClientLayout({ children }: { children: React.ReactNode }) {
  const [open, setOpen] = useState(true);
  return <div className={open ? "expanded" : "collapsed"}>{children}</div>;
}

O children é JSX já renderizado de um Server Component, não um import.

Dependências grandes usadas apenas em Server Components afetam o bundle do cliente?

Não. Como Server Components enviam zero JavaScript para o navegador, dependências grandes como realçadores de sintaxe ou parsers de markdown não têm impacto no bundle do cliente
Este é um benefício de desempenho chave da arquitetura RSC

Relacionado

Visão Geral -- Novidades no React 19
Server Actions -- Mutando dados de funções do servidor
Hook use() -- Consumindo promessas passadas de Server Components
Carregamento de Assets -- Pré-carregando recursos junto com conteúdo renderizado no servidor

Server Components - Execute componentes React no servidor com zero JavaScript no lado do cliente

Buscar na documentação

Server Components - Execute componentes React no servidor com zero JavaScript no lado do cliente