Filtro, busca e paginação na URL com Next.js 14 / 15

Поделиться
HTML-код
  • Опубликовано: 4 окт 2024

Комментарии • 62

  • @codante-io
    @codante-io  3 месяца назад +3

    Pra quem quiser mais conteúdo de Next.js se cadastra no nosso site: codante.io
    Temos uma trilha só de projetos e workshops de Next 😄

  • @gustavrosantana
    @gustavrosantana 3 месяца назад +5

    Que aula SENSACIONAL!!! O algoritmo do RUclips dessa vez mandou muito, canal e projeto maravilhoso. Didática do professor supimpa, ótimo vídeo. Parabéns

    • @codante-io
      @codante-io  3 месяца назад +1

      Muito obrigado pelos elogios, @chustaffus9342!
      Depois dá uma olhada no nosso site que tem muito mais conteúdo lá: codante.io

    • @computacaosemdrama9080
      @computacaosemdrama9080 Месяц назад

      Se tu quer dominar Next.js, MongoDB, Fastify, Redis e Kafka na prática, CrazyStack Node e React do devdoido é o corre.

  • @kinerikin
    @kinerikin 2 месяца назад +1

    Sou muito fã do Codante! Direto ao ponto 🎯

    • @codante-io
      @codante-io  2 месяца назад

      Obrigado @kinerikin!

  • @DenisioRodrigues
    @DenisioRodrigues 2 месяца назад +1

    Excelente vídeo!

  • @abelbartolomeu2795
    @abelbartolomeu2795 3 месяца назад +2

    Cara, o video que eu mais precisava. Top Demaisssss

    • @codante-io
      @codante-io  3 месяца назад

      Valeu pelo elogio, Abel.
      Depois dá uma olhada no nosso site que temos muito mais conteúdo lá codante.io

  • @LeviSoares-m1i
    @LeviSoares-m1i 3 месяца назад +2

    Ganhou mais um inscrito

  • @000matheusteixeira
    @000matheusteixeira 3 месяца назад +4

    cara tu é muito foda obg msm😄😘

    • @RobertoCestari
      @RobertoCestari 3 месяца назад

      Fala Matheus! Obrigado pelas palavras!

  • @bertoldoklinger9092
    @bertoldoklinger9092 3 месяца назад +2

    Cara!! Top demais o vídeo, percebi muito a inspiração do Sam selikoff!!! O cara é foda

    • @RobertoCestari
      @RobertoCestari 3 месяца назад +1

      Sim sim, gosto muito dele! :) Obrigado pelo comment!!

  • @Franca-jn2jy
    @Franca-jn2jy 3 месяца назад +2

    Bom tutorial, contudo ao fazer uma consulta na API a cada letra digitada pode gerar muitas requisições desnecessárias e rapidamente exceder o limite de taxa (rate limit) da API.

    • @RobertoCestari
      @RobertoCestari 3 месяца назад

      Exatamente! No finalzinho do vídeo eu resolvo isso usando o hook useDebounce()!

    • @codante-io
      @codante-io  3 месяца назад

      Fala @Franca! Obrigado pelo feedback.
      No final do vídeo foi feito um debounce para isso (último capítulo aqui no YT). Mas claro sempre é possível otimizar de outras formas também.
      Para o tutorial, o objetivo foi simplificar e focar nos Server Components do Next 😄

    • @Franca-jn2jy
      @Franca-jn2jy 3 месяца назад

      @@codante-io Verdade, assisti até o penúltimo, obrigado!!

  • @lucasgoncalves9652
    @lucasgoncalves9652 3 месяца назад

    Sensancional a aula, lembrando que a api já estava muito completa então facilitou demais, mas parabéns pelo conteúdo

    • @RobertoCestari
      @RobertoCestari 3 месяца назад

      Valeu Lucas! Se tiver interesse em como desenvolvemos a API, também é open source no github do Codante! Abs!

  • @fillipeamg5877
    @fillipeamg5877 3 месяца назад

    Mto bom. Obrigado

  • @GisellyRock
    @GisellyRock 3 месяца назад +1

    excelente aula

  • @maycondouglas3179
    @maycondouglas3179 3 месяца назад +2

    Você poderia trazer o backend dessa aplicação neh, essa api parece tão organizada

    • @codante-io
      @codante-io  3 месяца назад +2

      Fala Maycon! A API é open source e você consegue ver todo o backend dela no repo (spoiler: é em Laravel): github.com/codante-io/api-service abs!

    • @maycondouglas3179
      @maycondouglas3179 3 месяца назад

      @@codante-io Ser em Laravel doeu no coração, mas obg ! Vou dar uma olhada mesmo assim

  • @gabrielpelicano8583
    @gabrielpelicano8583 3 месяца назад

    Muito bom!!!

    • @codante-io
      @codante-io  3 месяца назад

      Valeu, Gabriel!

    • @gabrielpelicano8583
      @gabrielpelicano8583 3 месяца назад

      @@codante-io Tentei colocar um loading na paginação usando suspense, mas ele funciona somente na primeira vez que a página carrega. Você conhece alguma outra forma de colocar um loading na paginação?

  • @johnnatagomes7829
    @johnnatagomes7829 2 месяца назад +1

    Teria aula de como realizar este lindo front end? Foi utilizado o shadcn ui?

    • @codante-io
      @codante-io  2 месяца назад

      Boa sugestão! Usamos sim, @johnnatagomes7829 !

  • @Andersomatheusful
    @Andersomatheusful 3 месяца назад +2

    Muito bom, cara. Conteúdo muito rico. Você acha fazer melhor dessa forma do que o usando TanStack Table?

    • @RobertoCestari
      @RobertoCestari 3 месяца назад +2

      Eu nunca usei o Tanstack table - quero muito testar :)
      Certamente vai ter mais funcionalidades já "out of the box" (ordenação, paginação, etc), então em produção eu provavelmente usaria algo do tipo.
      Abraços!

  • @bernardoveras2066
    @bernardoveras2066 3 месяца назад +2

    Sensacional, como vocês criaram a documentação da API?

    • @RobertoCestari
      @RobertoCestari 3 месяца назад +1

      Fala Bernardo!
      Criamos com Starlight (que é um framework baseado no Astro). Dá uma olhada que é bom demais usar!

    • @codante-io
      @codante-io  3 месяца назад +1

      Tanto a documentação como a API em si é open-source Bernardo! Só dar uma fuçada no nosso github para encontrar os repos. Qualquer coisa chama a gente no Discord que a gente te ajuda por lá!

    • @bernardoveras2066
      @bernardoveras2066 3 месяца назад

      @@RobertoCestari Muito obrigado, mano! Eu estou à procura pra fazer uma documentação da minha API que pretendo abrir.
      Valeu mesmo.

  • @iury664
    @iury664 3 месяца назад +1

    tudo com o prisma

  • @EduardoSilva-zi5yx
    @EduardoSilva-zi5yx 2 месяца назад +2

    Otimo video. Tenho um app em prod com searchparams vindos da pagina, e nao funcionam, eles vem undefined sabe o porque ?

    • @codante-io
      @codante-io  2 месяца назад

      Fala Eduardo! Depois se quiser, entra na nossa comunidade no Discord, alguém pode tentar te ajudar com isso!

  • @neliodiassantos
    @neliodiassantos 3 месяца назад +1

    Parabéns pelo conteúdo foda! ❤ Qual seria o app pra desenhar na tela?

    • @RobertoCestari
      @RobertoCestari 3 месяца назад +2

      Fala Nelio! Uso o screenbrush no Mac (não sei se está disponível para windows). E é sensacional - recomendo pra todo mundo 😊

    • @neliodiassantos
      @neliodiassantos 3 месяца назад +1

      @@RobertoCestari obrigado! Sucesso para você e espero que continue fazendo conteúdo ótimos como esse 👏👏

  • @fillipeamg5877
    @fillipeamg5877 3 месяца назад

    cursor-pointer é apenas um estilo, não controla o click

    • @RobertoCestari
      @RobertoCestari 3 месяца назад

      Fala Filipe! Consegue me dizer o minuto em que eu falo? Abs!

  • @maycondouglas3179
    @maycondouglas3179 3 месяца назад

    Acho que enxerguei um possível problema, se você muda a URL, a page home não é sempre reenderizada sempre que você faz uma alteração na URL ? Ao invés de reenderizar apenas a listagem

    • @RobertoCestari
      @RobertoCestari 3 месяца назад

      Fala Maycon, não sei se entendi exatamente a pergunta - me corrija se não é isso. Se mudarmos a URL manualmente, sempre haverá uma nova renderização de toda a página (por SSR). Ao clicar em algum link dentro da página, aí apenas os itens que mudarem serão recalculados e renderizados

  • @pedrodias.fullstack
    @pedrodias.fullstack 3 месяца назад

    Muito bom o video,
    Como voce faz para sinalizar em Amarelo o que voce quer comentar sobre diretamente na tela?

    • @codante-io
      @codante-io  3 месяца назад

      Fala Pedro! Obrigado pelo elogio
      Uso o screenbrush no Mac. E é sensacional - recomendo pra todo mundo 😊
      No Windows existem algumas alternativas tipo o epic pen, ppInk e gInk

  • @tomaslillo7500
    @tomaslillo7500 3 месяца назад

    Boa tarde, tenho uma dúvida: se a paginação é recomendada ser feita sempre no backend, por que bibliotecas como a TanStack Table oferecem paginação 100% no lado do cliente? Existe algum contexto onde é possivel gerar a paginaçao no lado do cliente sem problema?

    • @codante-io
      @codante-io  3 месяца назад +1

      Boa tarde! Quando estamos lidando com um volume grande de dados, é melhor paginar sempre no backend - imagina ter que carregar na memória centenas de milhares (ou milhões) de itens. Para sets de dados menores, aí a paginação pode ser feita client-side.
      No caso da TanStack Table, a lib suporta tanto paginação client-side como server-side - então você é quem escolhe como fazer.
      Quando é um set de dados menores (ou quando a API não traz os dados paginados), nesse caso é razoável paginar client-side :). A vantagem de paginar client-side é a velocidade (não é necessário fazer um request para cada página).

    • @tomaslillo7500
      @tomaslillo7500 3 месяца назад

      @@codante-io obg :). Excelente material

  • @F3lipe00
    @F3lipe00 3 месяца назад +1

    qual tema vc está usando?

  • @pinhaumgabriel8224
    @pinhaumgabriel8224 3 месяца назад

    qual é a aplicação uqe está sendo utilizada para marcar as coisas na tela?

    • @codante-io
      @codante-io  3 месяца назад

      Chama-se screenbrush!

  • @marcosl.matheus1909
    @marcosl.matheus1909 3 месяца назад

    tutorial de como pedir dinheiro emprestado pra pagar a AWS rsrsrsrs, fazer query direto no banco de dados desse jeito ai além de criar filas vai elevar gastos com infra, a ideia é bacana, mas pra isso acontecer recomendo que a quesry seja em cache e não direto em uma base de dados.

    • @marcosl.matheus1909
      @marcosl.matheus1909 3 месяца назад

      @@icaroharry8465 sim, mas pense nisso em um sistema com bastante acessos, geralmente o que se faz nesses casos é gerar um cache de dados básicos, como por exemplo somente o id e o nome da pessoa e enviar tudo ao front, pois ficar fazendo essas pequenas querys ao banco em um grande conjunto pode travar a aplicação.

    • @RobertoCestari
      @RobertoCestari 3 месяца назад

      Fala Marcos!
      Fazer query simples na DB é uma operação extremamente otimizada.
      Se tivessemos uma DB com milhões de entradas, a DB é feita justamente pra isso; colocar tudo em cache seria provavelmente inviável ou por a memória do servidor ter que ser gigantesca (cache na memória) ou por ser mais lenta (se fosse um cache em arquivo, por exemplo).
      Acho que talvez a única forma de otimizar mais ainda seria usando um servidor de busca estilo elasticsearch ou algolia.
      Para otimizar ainda mais, podemos fazer um debounce (que eu fiz no final do vídeo)
      Me diga se concorda! Abs 😊