Next.js RSC

document.cookie em RSC

Server Components rodam no Node.js — não existe `document` ou qualquer browser API neles.

Definição

Server Components (RSC) são componentes que renderizam exclusivamente no servidor. Eles não têm acesso a browser APIs (window, document, localStorage). Para cookies, o Next.js fornece a função cookies() do next/headers.

Problema → Solução

Problema

Tentar ler document.cookie num Server Component causa ReferenceError: document is not defined.

Solução

Usar cookies() do next/headers em Server Components. document só existe no browser.

Dica de entrevista

Tip

Regra: Server Component = servidor = sem window, document, navigator, localStorage, etc.

Código

// ❌ ERRO em Server Component
export default async function Page() {
  const token = document.cookie; // ReferenceError!
}

// ✅ Correto em Server Component
import { cookies } from 'next/headers';

export default async function Page() {
  const cookieStore = cookies();
  const token = cookieStore.get('auth-token');
  return <div>Olá, {token?.value}</div>;
}

// ✅ document.cookie funciona em Client Component
'use client';
export function ClientComp() {
  useEffect(() => {
    const val = document.cookie; // OK no browser
  }, []);
}

Perguntas de entrevista

Q.Como compartilhar cookies entre Server e Client Components?▾

A.O servidor lê via cookies() do next/headers e passa o valor como prop para o Client Component. Cookies HttpOnly não são acessíveis no client mesmo — precisam vir do servidor.

Q.Server Components podem usar useState?▾

A.Não. Server Components não têm hooks de estado (useState, useEffect, useReducer, useContext). São completamente sem estado e renderizados apenas uma vez no servidor.

Q.Como detectar se estou em Server ou Client em runtime?▾

A.typeof window === 'undefined' indica servidor. Mas em RSC isso é desnecessário — o tipo de componente é definido na arquitetura ('use client' ou ausência dele), não em runtime.

3/122← →