Pessoal, pequena observação: Durante a gravação desse vídeo, o meu site (bergdaniel.com.br) tinha sido feito em React, mas agora eu re-criei ele com NextJS. E eu usei o SSG do Next, ou seja, meu site é 100% estático, o SEO está bem melhor e não existe mais nenhum tempo de loading em nenhuma página (por que elas já estão renderizadas, inclusive a aba de cursos).
Cara sensacional a explicação, me fez abrir a mente para mais possibilidades, assim como você disse pensava que o ReactJS ia resolver todos os meu problemas. Parabéns pelo vídeo!!
Muito foda seu conteúdo, parabéns!! Conheci seu canal só agora e já tô amando! Só achei seu video explicando todo o conceito sobre SSR e suas diferenças. Já virei seu fã 🚀👏🏾
Excelente video irmão. Lucidez demais sua elaborar esse vídeo. Pensamento a diferença entre as soluções muito bem formatada na sua mente. A base é tudo, library é śo uma ferramenta. Parabéns.
Vídeo INCRÍVEL, todas as duvidas que eu tinha em relação,o que é o next ou gatsby e aonde utilizar cada um, quando abi o vídeo vi que tinha 30 minutos e pensei que iria assistir somente o necessário, mas dps de 10 minutos vidrado absorvendo todo o conteúdo nem vi passando esses 30 minutos, vídeo incrível pra quem quer iniciar um novo projeto ou pesquisar sobre o assunto
@@DanielBergholz Cara que vídeo bom, eu precisava começar um novo projeto no meu estágio e sempre tive a duvida do que são essas tecnologias que eu olhava muito nos seus stories, e dps de ver o vídeo encontrei a minha resposta, usar react, pois o que irei criar se esconde atras de uma página de login, então tenho que agradecer por você ter me salvado de talvez estudar algo que no momento seria desnecessário e atrasaria minha jornada.
Cara, parabéns pelo conteúdo de qualidade, esses são conceitos básicos que todo "frontender" deveria saber e vc explicou tudo de uma forma bem intuitiva!
vídeo massa em daniel estou iniciando no desenvolvimento web focado no front-end e tinha essa duvida esclareceu na minha cabeça agora parabéns !! conteúdo foda
Que vídeo foda, sou iniciante consegui entender tudo, me deu até uma explosão mental tipo aquele meme kkkkkkk. Consegui entender o pq esses freamworks foram criados, quais problemas eles resolvem, vantagens e desvantagens, etc. muitos vídeos não falam sobre isso. Poderia fazer mais vídeos assim só que falando de outros assuntos
Parabens pelo canal mano, muito bom todos os conteúdos. Sou iniciante em programação, comecei de cara nesse mundo este ano (final de janeiro). De la pra ca venho estudando para ser Fullstack javascript. Consegui um emprego de forntend (um estágio na verdade) mes passado, 100% remoto, mas está me ajudando a consolidar meus conhecimentos em javascript e linguagens de marcação. Semana que vem começo o bootcamp GoStack. Seu canal tb me ajudou nessa minha caminhada, os conteúdos que você trabalha são extremamentes pertinentes para quem está começando. Meus Parabens!...e continue nos ajudando,rs
Recentemente eu estou tentando trazer alguns assuntos mais teóricos, para ajudar os iniciantes a entender toda a mágica que rola por baixo dos panos. E hoje foi a vez de entender de uma vez por todas as diferenças entre as arquiteturas de frontend
bom dia, gostei do seu conteúdo e da forma como tu explica, poderia fazer uma minissérie sobre como usar a API do youtube integrado com o react né, ensinando como fazer a validação da conta google pra usar a API e posteriormente como usar isso com o react
Caramba Daniel que conteúdo foda véy, cara quem sou eu para pedir algo aqui, mas se poder falar mais sobre esse conteúdo ficarei muito grato, acredito que a comunidade também, vlw man acompanhando a um tempo
Eu fiz esse vídeo exatamente por que eu quero falar mais sobre isso no meu canal! E fique tranquilo, que semana que vem o vídeo vai ser sobre SSG no Gatsby
E eu aqui maravilhado com o laravel 😂, fiz um curso d reactjs da rocketseat mas preciso fazer um portifólio pra mim, vou d next até mesmo pra servir d aprendizado, o futuro é next, como o próprio nome sugere, parabéns vercel, e valeu pelo conteúdo Man, ganhou mais um inscrito 😁
Muito bom ! Primeira vez vendo essa diferença, mas ja tinha visto antes ainda sim tinha duvidas , foram esclarecidas..... Video de dicas para free lance First Freelaa
Eu achei que o reddit usava next rs. Então, o Facebook usa o react + umas outras 200 bibliotecas pra tornar possível a indexação de páginas em uma aplicação react. Não sei exatamente qual melhora o SEO, mas tem umas libs que eu vi que fazem o seguinte: Detectam quem está acessando a página. Se for um usuário, o servidor manda o site em react. Se for um bot de indexação do Google, manda uma página renderizada no servidor
Muito bom . parabéns. Me inscrevi 😎🥳. A respeito de Sistemas corporativos, do qual não preciso de SEO. (Dashboard, gráficos, tabelas, cadastros) Vale a pena usar o next.Js ou React normal. Estou começando um projeto mas estou com nessas dúvidas
Interessante, cara nunca trabalhei como freelance, mas na epoca quando começei a trabalhar usava eu aprendi React para SPA, mas caso eu queira gerar Um site estático usava EJS já ouviu falar dele? Acho que quase ninguém conhece.
Obrigado por compartilhar conhecimento. Caro, suponha que eu crie um site estático no vue, nutx ou outro framework. É possível eu fazer ele ser dinâmico mas no lado do cliente? Uma vez que o framework é javascript no fim das contas, durante a build os js serão salvos contamente com os htmls e css. O browser do visitante se encarregaria de remontar o html de acordo com as buscas da api que o cliente requisitar? Se sim isso se encaixaria em qual caso exposto seu vídeo?
Em relação ao ssr, ele é usado quando precisa atualizar com frequencia os dados, mas o que impediria eu ter uma página estática que mapeasse os dados de uma api externa. Ela já se atualizaria imediatamente de acordo os dados buscados Porque usar ssg sabendo disso.. se alguem souber por favor me responde
Ah entendi. Mas se você mapear os dados de uma API usando o SSG, em tempo de build que seu site ia consumir a API. Então o site fica atualizado somente até o último dado retornado pela API na hora do último build. E se você quiser atualizar o seu site estático, você precisaria fazer um build de novo
Existem muitas pessoas que tentam implementar SSR no react, aí eles geralmente fazem um combo entre react e node.js com express. Tem como fazer, mas dá muito mais trabalho do que simplesmente usar a solução pronta do next
@@DanielBergholz Então, eu ouvi sobre react ssr a aproximadamente 1 mes atras quando li em um grupo de react (pessoas comentando sobre SEO). Se vc procurar no google vc acha algo no site da NPM, mas sabemos que isso n significa mt coisa, pode ser uma lib qualquer mal feita. Mas se procurar no YT vc ve alguns videos gringos falando de react ssr, alguns com expressjs. Eu sei que se vc procurar no google pode cair nesse site tambem: blog.rocketseat.com.br/ssr-nextjs-reactjs/ Que comenta o fato de usar o react + nextJS. Se procurar com a palavra git acha varios reps. A verdade é que estou pesquisando ainda, estou fazendo um site que vai ter atz constante por usuarios (como add fotos e comentarios), e ele esta quase pronto e foi feito inteiramente no react (é um site bem grande). Estou vendo SEO agr e não sei qual caminho vou tomar agr. Tenho que ver outra lib do react tb (que esqueci o nome agr, react king? nao, fugiu o nome kkkk)
Ah sim, achei alguns pacotes do npm com o nome "react-ssr", e pelo o que eu vi é uma junção do react com o node e express mesmo. Mas sinceramente, na minha opinião vale mais a pena "reescrever" o site em next, vai te dar muito menos trabalho do que envolver o nodejs. Eu mesmo converti meu site inteiro de react pra next em 3 horas, os dois são quase idênticos no código
@@DanielBergholz o site é gigante e a equipe tem 5 pessoas, o pessoal n vai sequer cogitar a ideia kkkk. Vou ver ss tem algo a fazer de maneira externa, ou usar uma lib, express, node sla
Massa o video! cara mas vc fez esse site que vc mostrou com react entao como vc fez as rotas sem utilizar a hash-router?? quando eu faço o deploy com react usando rotas normais como ' /blog' o react não carrega as páginas pq não faz requisições com o servidor, tem sempre que usar aquelas rotas com hashtags no inicio eu acho muito feio como vc fez dessa forma as rotas com react??
Tecnicamente falando, o react "não tem rotas", por que não existe um servidor por trás fazendo isso. O que acontece é o seguinte: A gente usa uma biblioteca que simula o funcionamento de rotas no React, ela se chama react router
![Como Eu Programo e Hospedo Sites da Forma Mais Moderna que Existe [GUIA DEFINITIVO]](/img/n.gif)
Pessoal, pequena observação: Durante a gravação desse vídeo, o meu site (bergdaniel.com.br) tinha sido feito em React, mas agora eu re-criei ele com NextJS. E eu usei o SSG do Next, ou seja, meu site é 100% estático, o SEO está bem melhor e não existe mais nenhum tempo de loading em nenhuma página (por que elas já estão renderizadas, inclusive a aba de cursos).
Que aula é essa ???? meu amigo, outro nível de didática e qualidade 😍😍😍
Conteúdo excelente Daniel. Você é muito eloquente na explicação. Parabéns!
Que didática incrível vsf kkkkkk, nunca tinha entendido o que era mvc e como hospedar o front end e back end, muito obrigado!
Muito obrigado pelo feedback!
Mais claro que esse video só o sol. Muito bom, sua explicação e muito boa, absorvi td. Obrigado mesmo 🙏
Meu amigo que qualidade de vídeo, muito obrigado.
com certeza um dos vídeos mais explicativos do assunto, parabéns, +inscrito
Obrigado!
Cara sensacional a explicação, me fez abrir a mente para mais possibilidades, assim como você disse pensava que o ReactJS ia resolver todos os meu problemas.
Parabéns pelo vídeo!!
Muito obrigado!
Pois é, é importante entender a diferença entre as arquiteturas do frontend e saber em qual situação usar cada um
Muito foda seu conteúdo, parabéns!!
Conheci seu canal só agora e já tô amando!
Só achei seu video explicando todo o conceito sobre SSR e suas diferenças.
Já virei seu fã 🚀👏🏾
Muito obrigado! :)
Daniel, sua didática e dicção são excelentes, parabéns, excelente conteúdo, continua que teu canal vai crescer muito.
Muito obrigado! 😃
Muito Obrigado, Que vídeo bom, me ajudou a entender esses conceito e oque utilizar na minha aplicação.
Cara que vídeo sensacional, extremamente esclarecedor.
Excelente video irmão. Lucidez demais sua elaborar esse vídeo. Pensamento a diferença entre as soluções muito bem formatada na sua mente. A base é tudo, library é śo uma ferramenta. Parabéns.
Que bom que você curtiu o vídeo! Muito obrigado 👊
Vídeo INCRÍVEL, todas as duvidas que eu tinha em relação,o que é o next ou gatsby e aonde utilizar cada um, quando abi o vídeo vi que tinha 30 minutos e pensei que iria assistir somente o necessário, mas dps de 10 minutos vidrado absorvendo todo o conteúdo nem vi passando esses 30 minutos, vídeo incrível pra quem quer iniciar um novo projeto ou pesquisar sobre o assunto
MUITO obrigado! Eu acho muito confuso todos esses frameworks e arquiteturas, então decidi fazer um vídeo sobre isso pra ajudar
@@DanielBergholz Cara que vídeo bom, eu precisava começar um novo projeto no meu estágio e sempre tive a duvida do que são essas tecnologias que eu olhava muito nos seus stories, e dps de ver o vídeo encontrei a minha resposta, usar react, pois o que irei criar se esconde atras de uma página de login, então tenho que agradecer por você ter me salvado de talvez estudar algo que no momento seria desnecessário e atrasaria minha jornada.
Que bom que deu pra te ajudar! A pior coisa que existe é você gastar uma semana estudando uma tecnologia que você não vai usar no final
Hoje em dia eu só to usando o react para aplicações atrás de um login também, de resto eu to usando o next
Explicação sensacional, muito util e satisfatoria.
Explicação Perfeita!
Cara, parabéns pelo conteúdo de qualidade, esses são conceitos básicos que todo "frontender" deveria saber e vc explicou tudo de uma forma bem intuitiva!
Muito obrigado! Pois é, são conceitos muito importantes pro dev frontend e eu infelizmente vejo poucas pessoas explicando isso
Explicação perfeita ! Obrigado !
Daniel, que conteúdo absurdo cara!! Muito boa a explicação, não deixou nenhuma dúvida. Bom demais!
Fico MUITO feliz de ouvir isso! Obrigado
muito bom - eduardo nunes
Muito bom ! Primeira vez vendo essa diferença clara !
Aula sensacional! Ganhou um inscrito
Vídeo espetacular, esclareceu bastante
Que explicação fantástica! Muito obrigado, eu ainda não tinha entendido a diferença de forma tão clara. Valeu mesmo!
vídeo massa em daniel estou iniciando no desenvolvimento web focado no front-end e tinha essa duvida esclareceu na minha cabeça agora parabéns !! conteúdo foda
Muito obrigado! Eu mesmo me confundia muito com isso a não muito tempo atrás
Que vídeo foda, sou iniciante consegui entender tudo, me deu até uma explosão mental tipo aquele meme kkkkkkk. Consegui entender o pq esses freamworks foram criados, quais problemas eles resolvem, vantagens e desvantagens, etc. muitos vídeos não falam sobre isso. Poderia fazer mais vídeos assim só que falando de outros assuntos
Excelente vídeo Daniel. Muito clara e precisa sua explicação. Parabéns!
Obrigado Gustavo! 👊
Parabens pelo canal mano, muito bom todos os conteúdos. Sou iniciante em programação, comecei de cara nesse mundo este ano (final de janeiro). De la pra ca venho estudando para ser Fullstack javascript. Consegui um emprego de forntend (um estágio na verdade) mes passado, 100% remoto, mas está me ajudando a consolidar meus conhecimentos em javascript e linguagens de marcação. Semana que vem começo o bootcamp GoStack. Seu canal tb me ajudou nessa minha caminhada, os conteúdos que você trabalha são extremamentes pertinentes para quem está começando. Meus Parabens!...e continue nos ajudando,rs
Caraca, muitíssimo obrigado pela mensagem!! Eu fico muito feliz de saber disso
Recentemente eu estou tentando trazer alguns assuntos mais teóricos, para ajudar os iniciantes a entender toda a mágica que rola por baixo dos panos. E hoje foi a vez de entender de uma vez por todas as diferenças entre as arquiteturas de frontend
Que isso rapaz, contúdo bom demais!! Muito obrigada por trazer uma explicação tão completa do assunto, finalmente consegui compreender kkk ☺👍
Muito obrigado por esse conteúdo irmão, tô iniciando na programação web e essa dica foi de ouro!!!! Ótimo trabalho!
Obrigado! 👊
Adorei a sua explicação. Parabéns!
Queria entende melhor como funciona essa parte do SEO com o Next. Obrigada!
Show cara, matou as dúvidas
Parab[ens Show! de explica;'ao!!!
Muito obrigado!
bom dia, gostei do seu conteúdo e da forma como tu explica, poderia fazer uma minissérie sobre como usar a API do youtube integrado com o react né, ensinando como fazer a validação da conta google pra usar a API e posteriormente como usar isso com o react
toooop! esclareceu demais!!
Caramba Daniel que conteúdo foda véy, cara quem sou eu para pedir algo aqui, mas se poder falar mais sobre esse conteúdo ficarei muito grato, acredito que a comunidade também, vlw man acompanhando a um tempo
Muitíssimo obrigado 👊
Eu fiz esse vídeo exatamente por que eu quero falar mais sobre isso no meu canal! E fique tranquilo, que semana que vem o vídeo vai ser sobre SSG no Gatsby
E eu aqui maravilhado com o laravel 😂, fiz um curso d reactjs da rocketseat mas preciso fazer um portifólio pra mim, vou d next até mesmo pra servir d aprendizado, o futuro é next, como o próprio nome sugere, parabéns vercel, e valeu pelo conteúdo Man, ganhou mais um inscrito 😁
Muito obrigado teilor! Pois é, o futuro é Next.js + Vercel
Muito bom ! Primeira vez vendo essa diferença, mas ja tinha visto antes ainda sim tinha duvidas , foram esclarecidas..... Video de dicas para free lance First Freelaa
Parabéns! Ótimo conteúdo muito bem explicado!
Obrigado!
Sensacional Daniel! Parabéns!!
Valeu!
Ótimo conteúdo, sua explicação foi sensacional!
Muito obrigado 👊
conteudo incrivel!!!
Muito bom Daniel, adorei o conteúdo sua explicação foi muito clara!
Valeu! 👊
eu te amo cara kkkkkk muito obrigado
Que aula!
16:54 mas e no caso por exemplo, o Facebook e reddit que usam React? Como que conseguem um SEO "bom"?
Eu achei que o reddit usava next rs. Então, o Facebook usa o react + umas outras 200 bibliotecas pra tornar possível a indexação de páginas em uma aplicação react. Não sei exatamente qual melhora o SEO, mas tem umas libs que eu vi que fazem o seguinte: Detectam quem está acessando a página. Se for um usuário, o servidor manda o site em react. Se for um bot de indexação do Google, manda uma página renderizada no servidor
Vídeo incrivel
Muito bom . parabéns. Me inscrevi 😎🥳. A respeito de Sistemas corporativos, do qual não preciso de SEO. (Dashboard, gráficos, tabelas, cadastros) Vale a pena usar o next.Js ou React normal. Estou começando um projeto mas estou com nessas dúvidas
Obrigado Alex!
Se você já tiver conhecimento em react.js e não precisa de bom SEO, dá pra usar o react de boa
Ótimo conteúdo, me ajudou muito!
Obrigado pelo video
Interessante, cara nunca trabalhei como freelance, mas na epoca quando começei a trabalhar usava eu aprendi React para SPA, mas caso eu queira gerar Um site estático usava EJS já ouviu falar dele? Acho que quase ninguém conhece.
Obrigado por compartilhar conhecimento. Caro, suponha que eu crie um site estático no vue, nutx ou outro framework. É possível eu fazer ele ser dinâmico mas no lado do cliente? Uma vez que o framework é javascript no fim das contas, durante a build os js serão salvos contamente com os htmls e css. O browser do visitante se encarregaria de remontar o html de acordo com as buscas da api que o cliente requisitar? Se sim isso se encaixaria em qual caso exposto seu vídeo?
Aula incrível!
Muito top os vídeos, Oooook? 🤣
SSR pode ser chamado de Universal Apps???
Em relação ao ssr, ele é usado quando precisa atualizar com frequencia os dados,
mas o que impediria eu ter uma página estática que mapeasse os dados de uma api externa.
Ela já se atualizaria imediatamente de acordo os dados buscados
Porque usar ssg sabendo disso.. se alguem souber por favor me responde
Então, na verdade o ssg é usado para sites que não mudam muito. Pq o site final é estático.
@@DanielBergholz ata saquei, editei o comentário na verdade eu quis dizer ssr ao invés de ssg
Ah entendi. Mas se você mapear os dados de uma API usando o SSG, em tempo de build que seu site ia consumir a API. Então o site fica atualizado somente até o último dado retornado pela API na hora do último build. E se você quiser atualizar o seu site estático, você precisaria fazer um build de novo
Eu respondo exatamente essa sua pergunta no início desse vídeo: th-cam.com/video/0-W5lak4NYY/w-d-xo.html
@@DanielBergholz valeu! sanou minha dúvida, obrigado. + 1 inscrito! seu conteúdo é perfeito.
Show!
Mesclar o Gatsby com o React seria o ideal então? Os dois funcionam bem juntos?
O gatsby é construído em cima do react, então tudo que o react tem, o gatsby tambem tem. Se quiser usar o gatsby ou o next, pode usar eles sozinhos
top man top
Poderia falar de React SSR?
React SSR é alguma biblioteca pra react? Nunca usei
Existem muitas pessoas que tentam implementar SSR no react, aí eles geralmente fazem um combo entre react e node.js com express. Tem como fazer, mas dá muito mais trabalho do que simplesmente usar a solução pronta do next
@@DanielBergholz Então, eu ouvi sobre react ssr a aproximadamente 1 mes atras quando li em um grupo de react (pessoas comentando sobre SEO).
Se vc procurar no google vc acha algo no site da NPM, mas sabemos que isso n significa mt coisa, pode ser uma lib qualquer mal feita.
Mas se procurar no YT vc ve alguns videos gringos falando de react ssr, alguns com expressjs.
Eu sei que se vc procurar no google pode cair nesse site tambem: blog.rocketseat.com.br/ssr-nextjs-reactjs/
Que comenta o fato de usar o react + nextJS.
Se procurar com a palavra git acha varios reps.
A verdade é que estou pesquisando ainda, estou fazendo um site que vai ter atz constante por usuarios (como add fotos e comentarios), e ele esta quase pronto e foi feito inteiramente no react (é um site bem grande). Estou vendo SEO agr e não sei qual caminho vou tomar agr.
Tenho que ver outra lib do react tb (que esqueci o nome agr, react king? nao, fugiu o nome kkkk)
Ah sim, achei alguns pacotes do npm com o nome "react-ssr", e pelo o que eu vi é uma junção do react com o node e express mesmo. Mas sinceramente, na minha opinião vale mais a pena "reescrever" o site em next, vai te dar muito menos trabalho do que envolver o nodejs. Eu mesmo converti meu site inteiro de react pra next em 3 horas, os dois são quase idênticos no código
@@DanielBergholz o site é gigante e a equipe tem 5 pessoas, o pessoal n vai sequer cogitar a ideia kkkk. Vou ver ss tem algo a fazer de maneira externa, ou usar uma lib, express, node sla
Massa o video!
cara mas vc fez esse site que vc mostrou com react
entao como vc fez as rotas sem utilizar a hash-router??
quando eu faço o deploy com react usando rotas normais como ' /blog'
o react não carrega as páginas pq não faz requisições com o servidor,
tem sempre que usar aquelas rotas com hashtags no inicio eu acho muito feio
como vc fez dessa forma as rotas com react??
Tecnicamente falando, o react "não tem rotas", por que não existe um servidor por trás fazendo isso. O que acontece é o seguinte: A gente usa uma biblioteca que simula o funcionamento de rotas no React, ela se chama react router
reactrouter.com/
Zerou o joguim
Ou seja, essa pirueta toda é por culpa do google.
Kkkkkkkkkk sim
@@DanielBergholz obrigado, gostei muito do seu canal, vou maratonar a série de nextJS.