Quando usar React Query ou Server Components no Next.js

Links complementares citados no vídeo 👇

00:30 - 01:02 - O que é Server Components e Fetching de Dados?
01:02 - 01:35 - Comparando Fetch no Client e Server
02:39 - 03:10 - Como reduzir Loading States com Server Components?
05:14 - 10:47 - Qual o melhor uso de React Query para interfaces?

-----

Acompanhe a Rocketseat nas redes sociais:
TikTok: @rocketseat
Facebook: @rocketseat
Instagram: @rocketseat

[edy.rodrigues]

1. Pra ser sincero eu uso 100% das requisições iniciais usando server components. Quando tem um componente muito interativo, como por exemplo uma mensagem em um chat que o usuário vai adicionando múltiplas mensagens enquanto ele digita eu uso React Query, mas o carregamento inicial do chat ou de tudo sempre se inicia por um server component, eu acho extremamente performático desta forma e simples de trabalhar.

2. Um detalhe que eu posso adicionar é que precisa ser lembrado que quando o cache é feito com React Query o cache é apenas na máquina do usuário, quando é feito no NextJS o cache é para todos os clients (navegadores). Isso é importante ressaltar porque dependendo da situação isso economiza muitas requisições batendo no servidor e deixa mais performático para todos os clients.

[xbozo.]

Faz um vídeo sobre algum tópico de escalabilidade no front-end, como separação em camadas, componentes e hooks reutilizáveis, consumo de dados... temas muito pouco abordados no front em comparação com o back e que são de suma importância no dia a dia

[codigodeev]

React Query é vida 😁, uso em todos os projetos da minha empresa.

[giovannipadova]

Fala Diegão! Levando em conta que você está falando do Tanstack Query, acho que seria legal fazer um vídeo sobre o Tanstack Start/Router. Acho que esse framework tem conceitos que vão mudar em muito a comunidade React.

[rafaelrufino]

Fala Diegão, depois trás um pouco sobre Mvvm e system Design, conteúdos legais!

[anderson_lima_dev]

Anos pra finalmente ver o fim do fetch dentro do useEffect <3

[victorross]

Pode fazer um video explicando o cache do NextJS e todas as formas de uso?
Obrigado pelas aulas!

[felippt]

faz um vídeo explicando melhor o trpc e como aplicar em nossos projetos!

[brunomouradev]

Outra vantagem é a segurança em autenticações processadas no server

[sgabrielsoares]

Eu comecei a fazer meu projeto em React, cogitei migrar para Next no início mas por causa dessas coisas vi que não fazia muito sentido e mantive em React e tenho usado React Query, delicinha em.

[VictorSilvaDev]

Pergunta Diegão: Você diz que o único motivo para usar o NextJS é o cache, mas por que não considerar todos os outros recursos, como a facilitação para criação de rotas via estrutura de pastas, criação de layouts, criação de API (já que o nextjs é fullstack) entre outros benefícios. Claro que tudo isso é recriavel se usar só do Vite por exemplo, mas aí teriamos que baixar pacotes adicionais como react router por exemplo. Então acredito que o NextJS traz muita coisa pronta e que facilita o uso, não só o cache sabe, o que acha ?

[canalbomon]

Fui começar a usar React query hj, o do tanstack. E oq fez brilhar pra mim no mlr caso de uso foi a mistura que fizeram com o react query e componentes de servidor. Ou mlr, uma das coisas que fez brilhar pois aos poucos estou entendendo suas funções. Mas achei legal o uso dele com comps de servidor. Se vc tiver um fetch gigante, pode começar ele pelo servidor e terminar pelo front.

[eduardobertozi]

Diego faz um vídeo falando sobre o Orval e como ele faz mágica no nextjs a partir de uma documentação swagger :D

[joaomarcosestevesjoaomarco]

Fala Diegão, Faz um video falando sobre as requisições no server do next.js e o quanto isso pode sobrecarregar o servidor. Hoje em dia o pessoal só usa o servidor mas não sabe as consequencias de infra que isso pode causar em alta escala.

[pamarques]

Muitoooo bom video. Diego, faz um video falando do nuqs e porque usar ele inves de nativamente com o next. A proposito, achei essa video através de um shorts, deveria estar não listado mesmo?

[GuilhermeMarquesMachado]

Atualmente em meus projetos uso o React Query tanto com SSR quanto CSR, funcionando com um prefetch no server side e mantendo as funcionalidades no client side

[natanfoleto]

Desenvolvi um sistema para empresa onde trabalho, que tem um site público e um dashboard, usei next para os dois, faço o uso do react query também, minha tomada de decisão de qual usar, server ou client, é se o componente precisa da diretiva 'use cliente', ou seja, se tem algo ali que só funciona no lado do cliente, caso haja uma requisição eu uso o useQuery, caso contrário eu uso a requisição no server. Eu meio que uso o react query se o componente precisar ser cliente. Não sei se estou usando de maneira correta. As vezes penso que deveria componentizar melhor a aplicação pra conseguir usar mais o cache do next. Mas não sei, pelo menos de acordo com vídeo estou indo no caminho certo.

[mateusdev]

Sigo a mesma ideia, no caso estou usando muito o apollo cliente, porque a nossa api é totalmente graphql

[mcel]

sinceramente eu acho que manusear cache é muito mais fácil no react query. eu vejo muita gente usar HydrationBoundary pra poder renderizar server-side e poder hidratar client-side, ainda não vi se o vídeo chega a mencionar isso, mas até agora parece o melhor método

[cssorlandi]

Quanto ao vídeo, sem comentários, sempre muito bom! Agora ô Diegão, e essa espuma do Mic aí? A bixinha ta só o pó, pedindo socorro 🤣