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

já faz um tempo aí né que o Next não só o Next mas o react em si veio com essa arquitetura de server components isso trouxe muita dúvida na comunidade e para ser sincero com vocês eu não acho que toda essa essa questão de server component server Actions é um caminho único para quem trabalha com react tipo ah eu vou ter que desenvolver aplicações dessa maneira o mais rápido possível vou ter que me adaptar não mas eu acho que é bom saber Independente de você optar por criar suas aplicações dessa forma ou usar um outro

Framework como por exemplo um remix um astro que vai seguir para uma para uma linha um pouco diferente O Astro nem tanto né O Astro ele ainda segue muito por essa linha de hidratar pequenas partes da nossa aplicação mas é legal você conhecer e a minha ideia aqui com vocês é dar uma repassada e mostrar como que você poderia fazer um crud e mostrar um pouco das principais funcionalidades que você vai ter a partir do momento que você tá criando uma aplicação utilizando esses conceitos de server components e server actions né então cri uma aplicação

aqui que só tem um Hello Word Deixa eu aproveitar e trocar aqui no Body o Font Family para botar aqui uma fonte sem serifa e pronto deixa eu só botar aqui também um web kit F smoothing analized beleza que que a gente vai fazer vamos comear criando aqui dentro da nossa aplicação um servidorzinho então instalar aqui ó o Jason server não sei se vocês já tiveram se vocês já utilizaram Jason server alguma vez na vida mas o Jason server é basicamente uma ferramenta que você vem aqui ó cria um arquivo Jason cria um objeto cria

rotas dentro dele então por exemplo sei lá tags E aí Isso aqui vai ser um Array e aqui dentro eu boto sei lá algumas tags então por exemplo vou ter uma tag e com Slug react e uma tag com Slug next como se fossem como se fosse um api mesmo né E aí eu salvo isso aqui rodo json server e passo o nome da minha do meu arquivo que é server.js E aí uma coisa que eu gosto de fazer aqui também é botar um menw que ele vai ficar fazendo watch mode então toda vez que

eu modificar esse arquivo ele faz o Restart na minha api e um menos D 1000 aqui que é para ele botar um 1 segundo de delay em toda requisição para assim a gente conseguir ter um uma sensação como se minha aplicação tivesse no ar né pera aí pera aí que agora até me perdi aqui na qual que é a opção de delay é não tem mais delay Então esquece que eu tô falando para vocês nova versão do Jason server não tem mais delay ele pede para fazer o delay pelo próprio Chrome Mas tudo bem a

gente já tem vou ter que trocar a porta só dele aqui botar na porta 33 33 Beleza já tá rodando agora a nossa ap e a ideia é que se eu acesso aqui o meu end Point né loc Rocha já traz as tags aqui ele cria um ID automático aqui pras tags por isso que ele trouxe aqui essa informação tá que que a gente vai fazer aqui agora né uma requisição simples né então vou começar criando aqui dentro da do Next um componente tags ptsx vou exportar aqui ele vai funcionar como uma listagem de tags

E aí eu vou ter uma ul basicamente uma lista E aí cada tag vai vir aqui dentro de um list it né então vou botar aqui dentro da minha page text salvo e pronto já tá ali só que isso não tá vindo da api certo e aí no next primeira coisa né isso que eu acho que é uma das coisas que se tornou se não existisse muito muita coisa do resto até se tornou mais simples que é a questão de chamada api né então se eu quero que esse componente carregue dados de uma API eu

venho aqui só transformo ele em uma função assíncrona e faço requisições aqui dentro mesmo então const response igual ait fch http local host 3333 bar tag que é a minha api Transformo os dados em Jon e uso esses dados aqui embaixo então como eu sei que isso aqui vai me retornar um Array com duas tags que tem Slug eu posso fazer data ponto map E aí mostra um list item com o Slug da tag né então se eu salvar isso aqui agora e voltar a gente vai ver que tem o mesmo resultado ali dentro só

que agora lá no meu servidor se eu adicionar uma tag nova por exemplo é salvo isso aqui agora dou F5 e não deu certo deixa eu arrumar aqui algumas coisinhas ou ser por causa do Cash Deixa eu só ver aqui se eu der um console log nesse data ele tá retornando as mesmas tags Então o meu servidor não tá em watch mode ele não tá restando sozinho Deixa eu ver se eu consigo passar aqui um menos menos watch eu não lembro se é essa opção Ah agora sim ó watching server Jason vamos dar F5 e

tá ali e aí eu venho aqui no nosso list item vou botar uma chave nele item pid que também é retornado lá de dentro da minha api PR assim a gente tem um ID diferente então primeira coisa né quando eu uso essa estratégia de server components os meus componentes eles podem ser assíncronos e eu posso fazer chamadas http diretamente dentro deles outra coisa interessante de um componente que ele é um server component é que ele é um componente que ele é renderizado pelo lado do Servidor ou seja antes de ele chegar no meu navegador a

interface dele já foi criada tanto que se eu vier aqui desabilitar por exemplo o JavaScript do client Side da F5 ele vai continuar funcionando normalmente certo só que aí Isso aqui digamos é a parte mais básica né E aí conforme a gente vai aprofundando mais a gente começa a cair nos seguintes casos de uso imagina que eu tenho um formulário add tag certo eu vou ter um input name Slug holder Slug da tag botar um but aqui submit criar tag E aí eu volto aqui na minha página e vou adicionar esse componente aqui embaixo só

botar aqui embaixo Ah e pronto já tenho agora um formulário aqui para criar uma nova tag E aí se a gente for fazer isso aqui da maneira ainda antes das server Actions né do Next que que eu tenho que fazer aqui nesse caso eu vou primeiro converter esse componente aqui em um client component E aí eu preciso colocar esse use client aqui por que que eu converti ele num client component porque agora como eu quero ouvir um evento que é o on submit toda vez que eu tem um componente que ele vai ouvir algum evento

do usuário eu preciso que esse componente seja um client component que que é um client component né diferente de um componente de um server component ele é um componente que ele a interface dele continua sendo criada no servidor tanto que se eu vier aqui inspecionar e desabilitar o JavaScript a gente vai ver que o formulário ele vai continuar aqui ó ele continua sendo criado no servidor não é um componente que vai ser criado somente no client né somente no JavaScript client site mas a diferença é que esse componente ele é é hidratado a hidratação é

basicamente um processo que o JavaScript que esse componente precisa para funcionar que é por exemplo essa função aqui né O Event listener ele vai ser enviado do servidor do Next para o cliente e ele vai ser hidratado ou seja ele vai ser injetado ali na minha aplicação para que esses eventos funcionem então o use client Ele tem muito mais a ver com hidratação dos meus componentes do que necessariamente é dizer onde que esse componente vai renderizar e aí O que que a gente faria aqui né Eu quero pegar os dados desse input aqui então eu

poderia por exemplo criar um estado é uma das formas existem muitas formas né E aí eu venho aqui no meu input coloco value dele Slug e One Change e set Slug e p target P value certo e aí quando eu for criar a tag eu faço uma requisição lá para dentro de de local host 3333 bar tags porém usando método post e no bar da minha requisição eu envio aqui um Jason com o Slug da minha nova tag que vem aqui do meu estado e aqui dentro só para evitar que a gente faça uma inserção

com Slug que não existe eu venho aqui e dou um return nisso aqui para ele não ser enviado então que que vai acontecer agora aqui dentro da minha aplicação né só botei assim que a wiit não precisava mas por acaso a gente eh faça algum tipo de operação aqui depois mas o que que tá acontecendo aqui agora na minha aplicação Olha só eu venho aqui vou criar uma nova tag então por exemplo vou botar aqui remix venho aqui no Network quando eu clico em criar tag ele deu um F5 na minha aplicação porque eu esqueci

de cancelar o evento tradicional eh Def aqui que é o Reload da página né então vou dar um F5 aqui agora remix vou dar um criar tag deu erro vamos ver aqui então ele falhou aqui a requisição htp né tô acostumado a botar htps e acabei escrever htps mas vamos voltar lá ah vou dar F5 aqui de novo ah remix clica em criar tag pronto requisição feita tag criada e Nossa lista não foi atualizada Se eu vi aqui dar um control shift F5 remix apareceu ali dentro quando a gente e cria uma aplicação react sem

o Next sem usar nada disso de server components server Action ou qualquer coisa para resolver esse problema a gente tinha algumas formas de resolver ele né a gente pode usar um conceito chamado lift state up que é o seguinte né a gente aqui dentro desse componente de tags é onde que estaria o nosso estado que armazen asse as tags né que vieram da requisição e a gente traria esse estado aqui para dentro da página né aqui a gente teria um estado por exemplo tags e a gente passaria esse Estado tanto para esse componente quanto para

esse componente componente a gente teria acesso a essa informação nos dois componentes e poderia passar a função de atualização do estado aqui pro componente adtag e ele colocaria Um item novo ali ou seja react mais puro possível né ou a gente usaria uma ferramenta que é uma das mais famosas do mercado hoje muito forte no mercado que é o react query né ou o nome aí a partir da versão 5 Se não me engano T stack query que é uma forma da gente gerenciar até já saiu vídeo no canal sobre isso Caso vocês queiram ver

que é htp state se vocês procurarem isso aqui no a no YouTube da Rocket vão cair num vídeo aí que eu explico bem detalhadamente sobre o que que é isso né então a gente consegue gerenciar recarregar informações que vieram de uma requisição htp de uma tela ou de um componente e através de outro componente só que a partir do Next com essa parte de server Actions a gente já tem isso meio embutido dentro do próprio next Tá e isso aqui cai numa daquelas coisas onde eu falei no começo do vídeo cara não é uma das

coisas que você tem que tipo sair de desesperado famoso fomo né Fear of Miss out tipo assim ah desesperado eu preciso aprender isso e tal não assim Vou ser bem sincero que eu tô desenvolvendo um projeto aqui com next 14 né que é esse projeto que eu tava mostrando anteriormente aqui que é o nível esse projeto aqui cara é um projeto que eu uso bastante server components mas eu não uso muito server Actions por dois motivos primeiro eu não tenho muito conhecimento ainda com server actions e segundo ainda é muito limitado para várias coisas assim

então cara Não e eu acho que você como desenvolvedor você tem que olhar para essas novidades entender se se encaixa no que você tá criando né E se se encaixar se for trazer algum benefício show se não beleza é aprende entende o que que é e para um dia que se você pegar um projeto com isso você saber da manutenção né Mas vamos fazer isso aqui agora usando server Actions né então o que que a gente vai fazer eu vou tirar tudo o que que for relacionado a client Side Então não vamos mais ter estado

aqui dentro vou tirar o use client aqui em cima vou tirar essa importação do react posso até transformar isso aqui num componente assíncrono na verdade não é obrigatório porque eu não tô carregando tenum uma informação aqui dentro e eu vou fazer o seguinte vou trocar aqui de on submit para Action E aí essa função aqui dentro dela eu vou passar aqui use server para indicar que isso aqui é uma server Action Ou seja é uma ação que ela vai ser tratada como sendo algo que vai executar pelo lado do servidor no next como se fosse

uma rota api da nossa aplicação E aí a diferença é que aqui eu vou receber o meu formulário que ele vai seguir a api do form data né porque ele é disparado através de uma vou tirar o value vou tirar o onchange aqui dentro e agora aqui dentro vou fazer um console log no meu form P entries pra gente visualizar um pouquinho as informações que estão vindo aqui dentro desse formulário Então vou salvar aqui agora a gente volta no navegador Vou preencher aqui sei lá View vou dar um criar tag e veja que ele disparou

uma requisição htp Vocês estão vendo aqui embaixo ó uma requisição post PR mes rota ou seja pra própria rota enviando aqui o meu Slug eu acho que é por causa que o meu form talvez eu passo um method post aqui e aí ele não envia isso aqui na URL beleza ó então ele fez a requisição post enviando aqui o meu Slug ó View que foi o que eu digitei ali dentro tão vendo então o que que acontece quando eu crio uma server Action no next É como se eu tivesse criando uma rota http uma rota

da minha api dentro do próprio nente Olha que interessante né E aí dentro do meu form aqui ó Eu dei um console log só que esse console log ele vai sair aqui ó no next só que aqui ele acabou não trazendo nada tá então vamos ao invés disso aqui usar form.get passando o nome do meu campo que é Slug vamos ver se ele traz aqui agora criar tag veja que ele trouxe View tá vendo que foi exatamente o que eu preenchi no campo legal né só que agora aqui dentro o que que eu quero fazer

então eu vou salvar isso aqui dentro de uma variável const Slug se o Slug não existir vou retornar Basicamente nada né posso dar um erro aqui caso eu queira mas não acho que é algo para dar um erro é só para não fazer nada mesmo e aí vou fazer a minha requisição então fatch http 2 p bar bar local host 33 33 bar tags method post body Jason P string fy enviando aqui o meu Slug lá para dentro aqui posso usar um await né até porque essa função aqui tá usando aink e agora a gente

vai salvar e vamos testar se tá tudo funcionando Então olha só venho aqui escrevo View veja que quando eu dou um criar tag ele faz a requisição aqui ó só que a requisição Agora é para dentro do servidor do Next e não lá pro meu servidor pra minha api porque esta requisição não vai aparecer aqui dentro porque agora como isso aqui é uma server Action isso aqui tá executando pelo backend do Next então é o backend do Next o servidor do Next que tá fazendo essa requisição E aí se eu for aqui no log do

Next tá vendo que ele não mostra muita informação pra gente ele tá dando um monte de erro aqui ank Type or method for a form that specifi function as an Action can react provid Will get depois eu tenho que ver o porque que ele tá dando esses erros aqui mas aqui dentro do Next config você consegue passar se eu não me engano em ah login se eu não me engano fetches ah full URL como sendo true E aí agora ele vai começar a fazer o log de todas as requisições que acontecem na tua aplicação então

se eu der um F5 Olha só ó ele mostrou a requisição get que ocorreu aqui ó na na rota tags o tempo que ela demorou E se ela bateu em algum cash ou não agora ó a gente vai cadastrar aqui uma nova por exemplo ah angular quando eu clicar em criar tag veja que agora ele mostra requisição post aqui dentro tá vendo isso é legal para quem quiser saber as requisições que estão sendo feitas pelo servidor do Next E aí pode ver que quando eu dou um ctrl shift F5 já tá carregando aqui View e

angular só que aí a gente cai no famoso problema Cara eu tô criando uma tag como que eu faço para essa lista aqui atualizar depois de eu criar a tag né E aí que a gente tem essa parte de invalidação que ela ainda que ainda tem muito a melhorar mas que já tá bem legal então olha só o que que a gente vai fazer aqui nas minhas tags aqui onde eu faço a requisição fat ó eu passo uma vírgula aqui dentro Eu tenho uma opção chamada next e aqui dentro Eu tenho uma opção chamada tags

E aí eu vou passar aqui por exemplo tags aqui não é o nome tags que eu tenho aqui em cima tá isso aqui é algo do Next que é uma forma de eu tagar essa requisição é como se se eu fosse dar um ID para ela então aqui eu vou falar que o ID dela é tags porque ou sei lá get tags que é a minha requisição que busca as tags E aí lá na minha server Action aqui quando eu terminei de fazer a server Action eu vou utilizar uma função do Next que se chama

revalidate tag E aí eu passo aqui basicamente a tag que eu quero revalidar que é a get tags Olha só eu salvo aqui agora volto se eu venho aqui cadastro teste dou um criar tag ela automaticamente já aparece lá dentro da minha listagem legal né E aí imagina que por exemplo eu tenha o desafio de fazer esse botão aqui né ele ficar desabilitado enquanto a requisição tá acontecendo Então olha só o que que eu vou fazer galera eu vou vir aqui ó vou dar um await New Promise resolve set time out resolve 3000 que que

eu fiz aqui né basicamente adicionei um delay de 3 segundos então quando o código chegar aqui ele vai aguardar 3 segundos para continuar executando certo e aí o que que vai acontecer com a minha aplicação agora se eu botar aqui Ah test delay quando eu clicar em criar tag Olha o que que vai acontecer demora 3 segundos e aí ele aparece só que tá vendo que não tem nada na interface mostrando que isso tá acontecendo nesse caso que que a gente pode fazer Olha só eu vou criar aqui um componente chamado add tag Button eu

V trazer este botão aqui dentro e v botar aqui o componente vou transformar esse botão aqui em um Cent component e aqui dentro eu usar um h do react chamado use form status esse use form status aqui me retor uma informação chamada pending que é um boleano se aquilo ali tá carregando ou não então eu venho aqui dentro do meu botão e faço o seguinte se o meu formulário está pending eu vou mostrar carregando senão eu boto salvar tag e aqui no botão eu deixo ele desabilitado caso ele esver como pending salvo isso aqui agora

volto venho aqui clico Olha lá carregando e mostra o que o Next tá criando não só o Next né o react junto com o Next com vários outros frameworks é basicamente uma forma de você ter essas funcionalidades de revalidação como a gente tem no react query client Side porém utilizando server Side porque tudo isso aqui que a gente criou é legal é interessante dizer que precisa de pouquíssimo JavaScript para funcionar né a gente pode vir aqui por exemplo desabilitar o JavaScript dá um F5 e a gente vai ver que vai continuar funcionando então venho aqui

ó 1 2 3 é claro que o loading aqui no botão não vai aparecer igual por quê Porque isso aqui é algo que só funciona client Side como eu desabilitei o JavaScript não vai funcionar mas olha só o cadastro ó a revalidação tudo funcionou tá vendo isso é muito massa cara isso é muito legal mesmo assim eu vejo que tem muita gente às vezes na internet que fala pô Diego mas cara o Next ele tá tá indo por um lado que não faz sentido todos os outros frameworks estão indo por outro lado e não me

desculpa mas ou você não tá usando os outros frameworks ou você tá um pouco desatualizado porque é eu acho que o remix ele tá indo pro para outro lado mas se você for pegar frameworks como por exemplo Astro Ah o próprio Solid o próprio fresh lá dentro do Dino Ah tem vários outros frameworks né mas pegar o Astro por exemplo que é bem famoso cara ele tá indo pela mesma linha de de server components tá de tipo a gente indicar Quais componentes da minha aplicação eu quero que sejam hidratados com o JavaScript e os outros

componentes não são hidratados a questão do server Actions que foi algo que o Next trouxe e isso é algo do Framework isso é algo do Framework que é e a parte de eu ter ações que vão acontecer pelo lado do servidor porque o Next ele tem um servidor ali junto com ele agora a parte de server components cara isso é algo que na verdade já faz uns 2 3 anos assim que o os frameworks estão indo por esse lado da gente ter como controlar Quais componentes serão renderizados pelo lado do servidor a nível de componente

coisa que antigamente a gente só podia fazer a nível de página dentro da nossa aplicação e cara isso aqui traz pra gente um leque de a de novas apis que a gente pode aprender uma das apis aqui para mim que é mais incrível é a suspense api certo que é o seguinte aqui dentro desse nosso componente de tags hoje essa requisição ela acontece muito rápido concorda com comigo mas imagina se essa requisição aqui demorasse para acontecer então o que que eu vou fazer novamente aqui na listagem de tags eu vou adicionar um delay de 3

segundos só pra gente ver isso aqui demorando para renderizar então aqui em cima ó vou colocar um delay se eu salvar isso aqui agora voltar lá no meu navegador e d F5 veja que a minha página por completo vai demorar 3 segundos para carregar ó posso até copiar o código e abrir de novo ó vou acessar ó 1 2 3 E aí mostra só que concorda comigo que apenas a listagem é que tá demorando o formulário ele já poderia aparecer na tela então que que a gente pode fazer a gente vem aqui por volta da

tags adiciona suspense que vem de dentro do react não é algo do Next adiciona um fallback que é o seguinte o que que eu quero mostrar em tela Enquanto essa informação está carregando eu posso mostar por exemplo carregando tags salvo vem aqui ó ó lá carregando tags quando ele termina de carregar ele já a nova informação Cara isso aqui é muito legal isso aqui vem do próprio react