O TanStack Start evoluiu rapidamente, melhorando a experiência do desenvolvedor, robustez e documentação. Uma das últimas inovações é o SSR Seletivo, que oferece uma maneira flexível de controlar como as rotas são renderizadas em seu aplicativo.

Tradicionalmente, frameworks SSR tratam todas as rotas da mesma forma: renderizam no servidor e depois no cliente. No entanto, essa abordagem não é ideal para rotas que dependem de APIs exclusivas do navegador, conteúdos dinâmicos ou recuperação de dados lenta. É aí que entra o SSR Seletivo.

Este post explica como o SSR Seletivo funciona, quando usá-lo e como construir um app TanStack Start que mistura rotas renderizadas no servidor, no cliente e apenas dados, funcionando perfeitamente em conjunto.

Por que SSR Seletivo?

Os frameworks SSR geram o conteúdo HTML da primeira rota solicitada no servidor, o que leva a tempos de carregamento mais curtos ou First Contentful Paint (FCP) mais rápidos.

Após enviar o HTML para o navegador, o framework hidrata com JavaScript, funcionando como uma SPA em navegações subsequentes. Contudo, rotas que exibem conteúdo baseado em tempo ou aleatório diferem entre servidor e cliente, e APIs exclusivas do navegador não podem ser renderizadas no servidor.

O SSR Seletivo é uma abordagem limpa para lidar com esses casos, evitando erros de hidratação ou lentidão.

Como funciona o SSR Seletivo?

No TanStack Start, cada rota pode ser configurada para rodar no servidor, apenas carregar dados, ou rodar apenas no cliente. A propriedade ssr define o modo de renderização, permitindo flexibilidade no desenvolvimento.

O SSR Seletivo permite configurar a renderização de rotas em projetos, oferecendo modos de renderização no servidor, apenas dados ou no cliente. Isso é útil quando a recuperação de dados é rápida, mas os componentes não se ajustam à renderização no servidor.

Com o SSR Seletivo, desenvolvedores têm mais controle sobre como suas rotas são renderizadas, otimizando o uso de APIs do navegador e conteúdos dinâmicos.

Comparando o SSR Seletivo do TanStack Start com outros frameworks

Nesta seção, comparamos o SSR Seletivo com frameworks populares como Next.js e React Router. Next.js utiliza componentes do servidor e do cliente, enquanto o React Router tem modos que se assemelham ao “data-only” do SSR Seletivo, mas não oferece uma replicação exata da funcionalidade.

Conclusão

O TanStack Start, com o SSR Seletivo, oferece uma abordagem flexível para renderização de rotas, permitindo que desenvolvedores escolham modos adequados, independentemente do conteúdo exibido ou do tempo de carregamento. O artigo demonstrou como o SSR Seletivo é útil, explicou seu funcionamento e comparou com outras soluções.