Fala mestre beleza no vídeo de hoje a gente vai estar falando aqui sobre server componentes e Clint component state vai dar continuação no vídeo anterior porque no vídeo anterior a gente falou sobre isso né mas ficou só na teoria Então essa aula aqui vai ser uma aula prática onde a gente vai ver e sendo aplicado nesses conceitos aí de server e Clint componey Beleza então antes da gente ir para o vídeo né Eu gostaria de pedir aí que você se inscreva no canal né deixa o like no vídeo também clique no Sininho para o YouTube
te manter atualizado aí dos nossos conteúdos e na descrição vai estar também todos os links aí né das redes aqui da Mestres para você tá acompanhando a gente em todas as redes Tá certo então não imagina eu sou desenvolvedor aqui na Mestres e vamos lá para mais um conteúdo [Música] Beleza então eu estou aqui né no nosso vscote Tá o que que eu fiz aqui de novo só criei uma nova rota dei o nome dela aqui de posts para a gente ver esse exemplo né eu vou usar uma ponte do apic retorna é posts para
gente Para gente então só por isso que eu criei aqui o diretório posts né e a página aqui para representar esse diretório tá para ser essa rota até esse Hello aqui from post certo então que é esse nosso H1 Beleza então o que que eu vou fazer né como a gente tá falando aqui como foi dito né na aula passada que serve compõe antes é o padrão do Next né então isso aqui já é uma server componente tá então o que que eu vou fazer aqui para a gente ver essa server componentes funcionando eu vou
fazer uma requisição para uma feliz externa certo então eu até deixei separado aqui ó url que é o Jason bem famosa aí para a gente tá testando tá pegando post tudo isso usuários também e o que que eu vou fazer aqui na verdade né a gente tem que a função né uma componente que tá retornando o H1 certo então antes de retornar eu vou fazer o seguinte eu vou armazenar aqui na variável eu vou fazer aqui um pet né lembrando aí que o pet é um api do node né ele já tá até me sugerindo
aqui um monte de coisa e essa sugestão é porque eu estou com o Pilot ativado eu desativei ele aqui né para não atrapalhar né até a nossa aula ou é para não ter mais não tem ninguém sugerindo coisas aqui para a gente fazer é mas o que que eu tô fazendo aqui eu tô usando o fat para poder fazer uma restrição né um get nesse indypoint para pegar os dados para mim né como eu tava falando Pet é um api do node também do browser né que antes a gente tinha ela só no Browser mas
deu umas versões para cá do node Ele veio para o note também que a gente consegue chamar fazer requisições para de Pontes externa tá então o que que eu vou fazer aqui no frete né Ele é uma requisição assim cara né Então Eu precisaria guardar aqui né fazer um Auê só que para mim fazer um Awake aqui eu preciso que a minha função ela seja assim certo então aqui já começa uma coisa um pouco estranha né porque no react em si a gente não tá acostumado a criar componentes assim com nós né não é uma
coisa não é uma prática tão comum mas aqui nesse caso servem a gente faz isso eu crio uma componente assíncrona para dentro dela eu consegui fazer esse Awake tá então fazendo esse Awake né a perifete que vai retornar os dados né vai vai ter essa resposta aí htp e aqui no final a gente tem eu posso fazer isso em outra linha né vai receber esse Jason aqui é um método que a gente tem sessões né http que transforma né a O que foi trago da ponte em um objeto vai transformar o Jason né em um
objeto de água escrito Então o que eu vou aguardar porque ele também é assim certo então aqui dentro de posts ou gente eu posso até fazer que é um consolo e postes pobre gente e se eu salvo isso aqui e a gente voltar aqui no navegador eu vou atualizar aqui a página e aqui já começa né A primeira diferença porque o Hello from post a gente não tá tendo nenhum log aqui tá não tem o log que a gente colocou lá ele não vai ser feito no cliente né que é o browser esse log ele
vai ser feito no navegador tá que é aqui no caso a gente tá rodando o navegador ou não no servidor que a gente tá rodando aqui um NET né o servidor localmente Então os logs estão aparecendo aqui novo tá que que é o nosso ambiente que é desenvolvimento em desenvolvimento né é o nosso servidor tá então esse log ele foi realizado no servidor e isso aqui mostra pra gente aquele comportamento né prova para a gente aquele comportamento que eu expliquei que a server componente ela é montada ela é executada e montada no servidor e ela
envia para o cliente no caso pro browser o HTML ali pronto a componente já montada tá então esses tipo que tá sendo escrito aqui ele não está sendo enviado para o cliente né pro navegador então sabendo disso né O que que eu posso fazer o que eu tô fazendo só o consolog Mas eu posso por exemplo montar um HTML referente a esse objeto tá então o que que eu vou fazer aqui eu vou retornar um map né um post Object ponto Map eu vou o que que ele tá reclamando não precisa da chave né opa
os objetos.mec É que na verdade é que ele não sabe o ambiente aqui tá um ele né que a gente está sem as tipagens aqui do da estrutura desse objeto eu não vou criar esse aqui agora também para não a gente não desviar muito é o que eu vou resolver um eu vou receber um post esse post vou falar que ele que é um n só para não a gente não ter o teto script não ficar reclamando aqui tá mas o que que eu tô fazendo tô pegando uma lista de posts né mapeando pegando cada
post e para cada post eu vou retornar por exemplo um eu preciso de um retorno né vou retornar aqui uma dica dentro dessa dívida eu vou colocar um H2 pode ser jogador imposto e além do H2 eu vou colocar aqui um parágrafo que vai estar o post com isso aqui vai ficar reclamando por conta daqui né porque é questão básica ali do quando a gente tá mapeando né então a gente tem que ter um identificador para cada item quando a gente faz um map né então que vai ser o ID do post para o saber
qual elemento é esse lá na árvore né que ele vai montar então com isso aqui se eu volto aqui no navegador a gente já vai ver que a nossa lista de post tá então o que que eu vou fazer eu vou para a gente conseguir né concluir o exemplo eu vou adicionar um pouco de estilo aqui nesse nesse nosso nessa nossa give né E também não vai ser muita coisa eu só quero eu só quero uma borda essa borda ela vai ser uma borda eu vou ter também um pé e um e também uma eu
vou querer também o curso certo então feito isso aqui a gente já vai ter aqui os nossos posts com o cursor que tá eu já coloquei o Pointer que a gente vai adicionar o evento de Clique nele mas basicamente nós temos aqui a listagem de 100 post Beleza então eu vou voltar aqui no nosso código e agora o que que eu quero fazer eu quero sempre que eu clicar nessa minha dívida eu quero fazer um console log só tá consolog por exemplo do título o título do post que eu cliquei então o que que eu
faria aqui One click dessa dívida eu vou passar a função aqui mesmo no html que vai ser basicamente o console log do post. né eu vou até colocar aqui ó computado certo então feito isso aqui se a gente voltar no Browser aqui nós já temos um erro tá um problema porque aqui a gente já começa a entrar no que foi dito né na aula anterior sobre a o klight e server componente como essa componente ela está sendo montada no servidor e no servidor a gente não tem essa questão do evento do clique porque isso aqui
é adicionado no navegador né no Browser então lá no servidor a gente tem esse problema para adicionar a interatividade né nos elementos que a gente tá criando Então se a gente voltar aqui no Brasil o erro em si Ele já fala isso pra gente né que os eventos né não podem ser passados para uma um clight componente próprio né porque o One click esse essa propriedade né One clique esse evento de clique ele é um evento de uma componente do client né uma componente que ela é criada lá no cliente certo então voltando aqui no
nosso código o que que eu poderia fazer para melhorar isso aqui eu poderia converter essa minha server componet em uma Clint componente tá poderia muito bem fazer isso aqui só que se eu fizer eu vou perder essa vantagem porque eu estou tendo aqui de poder fazer a requisição direto na função tá então porque porque como a gente viu né esse código java script ele não estava indo sendo mandado para o cliente mas se eu definir isso aqui como uma uma clique componente né eu vou fazer isso aqui ó para definir a gente passou um string
aqui no início da componente com isso aqui ó a escrita Então as componentes que tem essa estranha aqui logo no início elas são que compõem então quando eu faço isso Eu transformo toda essa componente em uma frente componente E aí esse código ele passa a ser enviado para o cliente né essa requisição que eu faço para api passa a ser enviada para o cliente então se eu olhar aqui no navegador se a gente olhar aqui na aba de rede net se eu atualize isso aqui a gente pode ver que eu fiz uma requisição Cadê ela
aqui ó eu fiz uma requisição de expandir isso aqui olha lá para Jason Place holder tá então esse código né ele esse JavaScript ele foi executado no cliente então todos aqueles benefícios que a gente falou lá na aula anterior sobre fazer a requisição do back end é manter ali usar infraestrutura do back end e tá mais próximo do por exemplo do banco de dados né para tornar as coisas mais rápido mais mais rápidas né mais otimizadas a gente passa a perder isso né porque isso que vai ser executado lá no cliente e tem também a
parte de privacidade né de quiz de segurança porque essa minha api ela por exemplo ela poderia comunicar com o banco de dados ou com principalmente com o banco de dados né quando ela é uma server componente e para comunicar com o banco de dados a gente precisa de credenciais específicas que a gente precisa estar comunicando ali com algum outro serviço externo que precisa dessas credenciais então se eu fizer o uso dessas credenciais aqui eu vou estar expondo isso né porque esse código vai ser mandado para o cliente né e eu não quero fazer isso tá
então eu vou para o final eu vou dar um exemplo que dá as variáveis de ambiente para a gente ver isso que funcionando mas antes de fazer isso eu vou mostrar eu vou eu vou dar aqui a solução para vocês do que a gente poderia fazer para resolver essa questão da do da requisição e não transformar essa nossa componente né post em uma um componente uma cliente componente tá então eu vou tirar aqui e na aula passada né a gente uma das coisas que a gente viu que eu falei com vocês né que que a
ideia para tentar resolver isso é mover as clientes componentes para as folhas né que é o que eles falam lá na questão da árvore de componentes né O que significa que é o mover as correntes componentes para a extremidade maior possível do da nossa componente Então se a gente pensar aqui que a nossa componente post ela tá fazendo um mapeamento e um objeto e retornando essa estrutura né essa dívida com esse H2 e SP eu poderia transformar essa dívida essa H2 e esse parágrafo em uma componente né em uma outra componente e essa componente seria
uma parte componente Então eu isolaria as duas componentes e transformaria só essa componente interna que nesse caso aqui como exemplo é extremamente simples eu só tenho esse código né esse HTML mas eu poderia que por exemplo eu tô fazendo um P né O que que eu vou fazer aqui então eu vou passar retornar aqui ó uma dívida por exemplo com um H1 que é vai estar escrito que e embaixo desse H1 eu vou estar fazendo esse map tá que é esse código aqui ele fecha certo então só essa parte aqui ó deixa eu voltar aqui
no navegador Nossa ele tá reclamando ainda né não tirei o erro eu vou tirar esse um clique vou deixar ele comentar aqui para a gente voltar lá e ver que agora eu tenho né um título post e um várias componentes né vários posts aqui então esses post né a componente que descreve esse post eu vou estar separando ela dessa nossa componente principal que seria a componente posts né é que tá ficando confuso tá posts e poste Tá eu vou criar a componente post no singular então aqui dentro de src ó eu vou criar um novo
diretório Chamar esse tipo de componentes e aqui dentro eu vou criar um novo Barquinho vou chamar isso aqui de porte Nossa singular ponto tsx então isso aqui vai ser um componente e essa componente ela vai me retornar a estrutura do post que nós vimos aqui nós já temos isso aqui pronto aqui é basicamente essa dívida que com o h2v parágrafo Então vou até recortar isso aqui ó colar na minha componente post eu tenho que receber post como parâmetro né então eu vou falar aqui que essa componente um post a tipagem que eu vou fazer n
só para gente não ter problema Ele tá reclamando eu fiz coisa mais aqui né de ter as coisas erradas mas aqui agora nós temos um componente que ela vai receber um post e vai renderizar esse cara certo então essa componente ela vai ser na verdade eu não vou converter ela ainda para o Clinton para a gente ver que tudo vai se ligar tá então no mapeamento né aqui na componente pai a componente que eu faça a requisição eu vou retornar ao invés de retornar aquela Dívida eu vou retornar aqui a componente post que eu acabei
de criar essa componente ela vai precisar daqui né e vai precisar também da propriedade post que é o post que eu estou renderizando certo então só recapitulando eu tenho uma lista de posts né e para cada item nessa lista eu tô renderizando a componente post que foi isso aqui que a gente acabou de criar certo então salvando isso aqui tudo se eu volto no navegador vai estar tudo funcionando tá normal como estava antes Beleza então agora o que que eu vou fazer eu vou converter essa componente post né para uma cliente componente e agora convertendo
para uma cliente componente eu vou adicionar também o evento de One click nela Então fazendo isso se eu voltar aqui no navegador Tá tudo funcionando e se eu clicar né agora no post ele vai logar ali o post né o posto explicado é para cada posto que eu clico tá então dessa forma a gente conseguiu né separar aí a lógica que roda no servidor e a lógica que roda no cliente tá conseguiu adicionar interatividade que é o evento de clicar né e fazendo né o bom uso aí do dessa vantagem e o Next nos dá
para estar criando ou comunicando fazendo uso do Servidor aí de uma forma mais inteligente de uma forma mais otimizada tá então o exemplo o último exemplo que eu quero dar aqui é sobre as aves né que é o que eu falei lá que a questão de das chaves né de deixar as coisas restritas as informações restritas aos servidor somente nele então o que que a gente pode fazer né Sempre que a gente tá falando de ambiente de Chaves né a gente fala lá das variáveis de ambiente dos pontos ambientes que eu criaria que na raiz
do projeto um arquivo chamado ponto em tá é no next tem todo um documentação lá falando sobre essas índias para que tem formas diferentes de fazer isso aqui né mas aqui eu vou definir uma variável de ambiente eu vou chamar isso aqui por exemplo e vou dar um valor doidão para ela certo então supondo que essa epi aqui ela é uma chave que a gente usa para acessar uma apis externa portanto ela é uma e nesse caso aqui como ela ela tem que ficar no servidor né porque ela é uma informação sensível aí eu não
quero mandar isso aqui para o Frontier tá então o que que eu posso fazer aqui nos posts né Por exemplo na hora de buscar esse post vamos imaginar aqui que eu precisaria usar esse aí o que que eu vou fazer aqui o uso que eu vou dar para ela é um console logo que a gente na verdade não precisa né É do processo eu vou fazer um consolog dessa equipe aqui se eu faço isso e abro aqui o nosso servidor né o terminal aqui novo o log dela foi feito aqui ó essa string aqui é
a minha e piá aqui certo agora se eu vier aqui no navegador a gente vai ver que não tem log nenhum de enfiar aqui beleza Então vamos voltar lá então eu vou vir aqui na minha post na componente post né na minha componente do cliente e vou dar um log aqui ó sócios se eu faço isso e a gente vai lá no navegador a gente vai ver que ele logou 100 vezes aqui a string underfiled tá então o porquê que tá um definete né porque é o que a gente debateu né a nossa componente a
nossa server componente ela tem acesso as coisas do Servidor né e o que seria essa coisa do Servidor essa variável de ambiente ela tá restrita aos servidor Então por mais que eu uso ela aqui ó a minha componente post para fazer um consolog ela não vai ser enviada de forma alguma Frontier para o cliente tá E aqui em Post né como posts é uma e os clientes ela é uma componente do cliente lá no cliente não tem nada definido essa variável então o cliente né o melhor essa componente ela não sabe o que que é
essa epi aqui tá certo porque as coisas estão rodando em Ambientes diferentes e no next a gente tem a possibilidade de transformar uma variável de ambiente que está no servidor público né transformar ela para ela conseguir ser acessada pelo cliente e para fazer isso eu só tenho prefixar o nome da variável de ambiente Connect underline Public certo se eu faço isso ele vai transformar essa variável que até então era privada ao servidor em uma variável pública então agora se eu fizer o consolog aqui de Next público em piá na nossa componente post ele vai fazer
o log ele consegue né ou a nossa server componente consegue acessar essa variável e a minha corrente componente se eu fizer logo aqui ó next público e piá aqui a gente pode ver que ela também fez o blog 100 vezes da nossa que cara nossa da nossa variável de ambiente tá então por que que foi 100 vezes porque nós temos sem impostos né para cada post eu renderizo uma vez aquela componente que a gente criou essa aqui então por isso que tá printando 100 vezes Tá mas essa aqui é uma forma da gente tá compartilhando
informações através das variáveis de ambiente entre o servidor e o cliente e a gente conseguiu também que é numa server componentes as coisas ficam totalmente isoladas do cliente tá então a componente em si né ela vai ser enviada lá para o cliente sem esse java script que a gente usa aqui do lado do servidor Beleza então para essa aula aqui vai ser isso tá eu espero aí que eu tenha ajudado qualquer dúvida pode estar deixando um comentário logo abaixo e é isso aí muito obrigado e até a próxima [Música]
