Renderização no servidor

Todos os pacotes do reelkit funcionam no servidor. Importe e renderize com Next.js, Remix, Angular Universal ou qualquer configuração de SSR.

Como funciona

O controlador do slider é lógica pura, sem nenhum acesso ao DOM na construção. Escutas de gesto, eventos de teclado e animações só entram nos ciclos de vida do lado do cliente.

Durante o SSR, o componente Reel renderiza um contêiner estático com os slides visíveis iniciais (normalmente 3: anterior, atual, próximo). Na hidratação, ele conecta os controladores de gesto, teclado e roda do mouse, deixando tudo interativo.

Pacote	Seguro no SSR	Observações
`@reelkit/core`	Sim	Lógica pura, sem APIs do navegador na importação ou na construção
`@reelkit/react`	Sim	Reel e ReelIndicator produzem HTML válido no servidor
`@reelkit/angular`	Sim	Componentes standalone, compatíveis com Angular Universal
`@reelkit/vue`	Sim	Componentes e composables, compatíveis com Nuxt 3
`@reelkit/react-reel-player`	Sim	Não renderiza nada quando fechado (`isOpen=false`)
`@reelkit/react-lightbox`	Sim	Não renderiza nada quando fechado (`isOpen=false`)
`@reelkit/angular-reel-player`	Sim	Não renderiza nada quando fechado (`isOpen=false`)
`@reelkit/angular-lightbox`	Sim	Não renderiza nada quando fechado (`isOpen=false`)
`@reelkit/stories-core`	Sim	Independente de framework, sem acesso ao DOM
`@reelkit/react-stories-player`	Sim	Não renderiza nada quando fechado (`isOpen=false`)

Next.js App Router

O Reel usa eventos do navegador e refs, então ele roda como Client Component. Adicione a diretiva "use client" no topo do arquivo que usa Reel:

tsx

Você pode buscar os dados em um Server Component e repassá-los:

tsx

Next.js Pages Router

O Pages Router funciona sem configuração extra. O componente renderiza no SSR e hidrata no cliente:

tsx

Tamanho responsivo com SSR

Simplesmente não passe a prop size. Sem ela, o Reel mede o próprio contêiner no cliente via ResizeObserver. Durante o SSR o slider renderiza um contêiner vazio; na hidratação ele mede e exibe os slides na hora:

tsx

Como funciona a medição automática

Quando size não é informado, o contêiner precisa ganhar tamanho pelo CSS (flex/grid do elemento pai, largura/altura explícitas ou porcentagens). O slider não mostra nada até concluir a primeira medição; depois disso preenche as dimensões medidas e acompanha sozinho os redimensionamentos seguintes.

Tamanho explícito (abordagem manual)

Para controle no nível do pixel, passe a prop size explicitamente. Como window.innerWidth não existe durante o SSR, defina um valor padrão e atualize na montagem:

tsx

Dica

Escolha um tamanho padrão próximo da tela mais comum entre seus leitores (comece pelo celular). Se a tela real for diferente, o slider se reajusta na hidratação, sem atraso perceptível.

Componentes de overlay

ReelPlayerOverlay e LightboxOverlay não renderizam nada quando isOpen={false}, então já são seguros no SSR. Eles só montam seu portal ao abrir, o que normalmente parte de uma interação no cliente:

tsx

Angular Universal / SSR

Todos os componentes Angular são seguros no SSR. O controlador do slider adia o acesso às APIs do navegador para afterRenderEffect. Componentes de overlay não renderizam nada quando isOpen=false, então não produzem marcação alguma no servidor.

typescript

Nuxt 3

Os componentes Vue do ReelKit funcionam com Nuxt 3 sem ajustes. Como o Reel usa APIs do navegador (eventos de toque, ResizeObserver), envolva-o em um <ClientOnly> ou use o sufixo .client.vue:

vue

O componente Feed usa o Reel normalmente:

vue

Tamanho responsivo com SSR

Não passe a prop size e deixe a medição automática agir. O Reel ocupa 100% do elemento pai. Durante o SSR ele renderiza um contêiner vazio; na hidratação mede e exibe os slides:

vue

Usando o core diretamente

Ao usar @reelkit/core direto para integrar um framework próprio, você pode criar o controlador no servidor. Chame attach() e observe() apenas no cliente:

typescript

Resumo

O que já funciona sem ajustes

Importar qualquer pacote do reelkit no servidor
Renderizar os componentes de slider durante o SSR (gera HTML estático válido)
Criar controladores no servidor
Componentes de overlay com isOpen=false

O que exige atenção

Omita size para medir automaticamente, ou defina um padrão ao usar dimensões baseadas na janela
Não chame attach()/observe() no servidor ao usar o core diretamente