Eu RESUMI o Next.js 14 para você! (Server Components & Actions)

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

[BrocchiRodrigo]

Muita gente tinha criticado as mudanças do NextJs, mas o objetivo deles está bem claro já tem algum tempo. Eles estão trabalhando o framework para ser uma caixa de ferramentas que segue por aquela linha da citação de "baterias inclusas", porém muito mais amplo do que já era.

Não atoa eles subdividiram as responsabilidades para que isso fosse possível, sendo time next focado em funcionalidades de servidor, ferramental e desempenho, Tailwind para focar em estilização já nativa e o time do React com a responsabilidade de integrar o roadmap atualizado com as bibliotecas JS/TS, também focando em desempenho, compatibilidade e trazendo novas funcionalidades (muitas vezes alinhadas com a Vercel, principalmente por boa parte do time React original ter ido pra lá).

Apesar de a Vercel querer vender um produto com tudo isso no final, ainda assim você consegue pegar até uma VPS, subir a aplicação e rodar sem muita crise, porém claro que algumas questões de cache, segurança e algumas ferramentas como a otimização de imagens vão funcionar adequadamente só lá (não deixa de funcionar, mas requer mais processamento). Nesse exemplo das imagens, por exemplo, se não usar um worker externo conjunto a lib Sharp, tempo de build realtime das páginas adquiridas em pós processamento de build de aplicação acaba sendo afetado.

No final provavelmente o resultado é que você não vai precisar mais usar bibliotecas como a React Query (Tanstack), ou mesmo as libs externas de estados globais (Context Api não acho legal, aí ainda vale a pena usar um Redux ou Zustand da vida), e no max um ZOD para simplificar validação de tipagem e schemas das APIs do próprio framework (que também nasceram para matar o backend node apartado do front).

Obs: Não remove a necessidade de uso para apis comuns de conexões externas, como as de bancos de dados, AWS e algumas libs de observabilidade, porém essa implementação você pode isolar na camada de API do Next, ou rodar a partir de uma server action que já está trabalhando em uma camada isolada do frontend (eis aqui o medo de todo mundo quando os caras da Vercel botaram uma chamada de banco de dados ali dentro

[itsguim]

Eu fico viajando do tanto de conhecimento e prática na área que esse cara tem..

[lucasfranzolin]

Presente professor! Muito boa a explicacao, confesso que nos projetos de Next 14 (ate entao) venho utilizando RSC apenas para carregar dados iniciais da tela. De certa forma, utilizando react-query, meu "data" nunca eh undefined!! Vou tentar aplicar esse novo "pattern" daqui pra frente e ver se me acostumo, abracos!!

[PedroPeripecias]

Esse é o tipo de vídeo pra salvar em algum lugar, pra voltar aqui de novo

[erickriva]

Tem novidades sobre isso (e algumas outras coisas) no blog do React, indicando o próximo lançamento, React 19.

[MaikBraga]

Esse vídeo tem tanta informação boa e de graça que no final parece que durou 1 hora de vídeo. Ficou muito bom!

[allanrodrigues]

video maravilhoso parabens mano. de hoje que eu to estudando next e sua didatica foi incrivel, parabéns.

[canalbomon]

realmente belo vídeo, parabéns. Eu n cheguei ainda a usar o server actions e a mistura com esse fetch que fizeram explodiu minha mente

[MrGustavotorregrosa]

a clareza do Diogo eh demais...ja fiz o curso deles uma vez e, logo mais vou assinar de novo

[kaianvasconcelos]

Que vídeo bom! Cara, vc é incrível, tua forma de ensinar é tremenda!

[marcella]

Vim pegar um resumo de next, porque já trabalhei com react e fiz projetos pessoais com next pois na minha empresa era sem ele. Ai mudei de empresa e hoje nao uso mais React, só que não queria perder tudo de bagagem que eu tinha né, ai to aqui pra tentar pegar um resumo daas coisas hoje.

Sem condições cara :, ( ....
Ele ja falou sei la quantos termos novos, e olha que nem parei de trabalhar com react faz tanto tempo. Eu percebi que se eu não quiser perder minha bagagem, vou ter q estudar react de novo como se nunca tivesse visto.

React, não sei os outros framew. pra frontend, está sem condições. É todo dia mil tech nova que surge, ao invés de evoluir oq já existe, acho que acaba sendo por isso que outras linguagens e ecossistemas tipo C# e Java acabam sendo mais maduros.

Obs.: adoro js

Mas ta sendo tanta revolução que daqui a pouco a gente volta pro começo da roda.

[acsantana]

Massa bem explicativo!
Estou quebrando a cabeça com o RSC com uma questão re-rendering em uma aplicação com gráficos e precisa ter o estado no lado client para filtrar com base no período selecionado pelo usuário.

[quackNicolas]

Aeee estava esperando por um vídeo br sobre o assunto, muito top!

[cristoff]

Cara, que conteúdo bom.
Continua trazendo novidades das ferramentas, por favor!

[pzglevi]

mano, cara é bom viu, espero um dia esta nesse nivel de conhecimento.

[diegoloop]

Isso abre um leque de possibilidade de novas API's onde, pode esconder certas requisições do cliente, isso vai prevenir muito de raspagem direto no end-point da aplicação.

[alexandre_noguez]

Aula excelente como sempre Diegão! Valeu demais!

[daviamorim]

Fala Diego, as actions ainda acho secas pra usar em produção, mas estou começando a usar a biblioteca next-safe-action que deixa a utilização delas mais robusta, daria um bom vídeo 👍🏼

[rariber]

23:35 isso é muito legal mesmo, até começar a dar dor de cabeça com layout pulando pra todo lado 😅

[GMP]

O erro em 16:00 pra frente é que quando utiliza Server Action, não precisa especificar method e encType no formulario. Vc especificou method e não precisa, o nextjs já trata isso