< Return to Video

WEB CAP17 2025 VA07 NEXT.JS SERVER-SIDE-RENDERING

  • 0:08 - 0:13
    SO é o mecanismo de busca otimizado
    e uma forma de utilizá lo com SSR
  • 0:13 - 0:17
    que renderiza páginas web no servidor,
    ao invés do navegador,
  • 0:17 - 0:19
    tornando a aplicação
    muito mais rápida,
  • 0:19 - 0:21
    principalmente ao consumir API.
  • 0:21 - 0:25
    Aqui no código vamos ter que fazer
    algumas modificações,
  • 0:25 - 0:29
    como por exemplo,
    em AP adicionar mais uma pastinha.
  • 0:29 - 0:33
    Exemplo um API com sua APIs e no NAV
  • 0:34 - 0:37
    vamos criar mais um link chamando a rota
  • 0:37 - 0:41
    exemplo API e colocando exemplo
    o consumo de API com SSR.
  • 0:41 - 0:45
    Como vocês podem ver aqui na tela
    nós temos o roaming.
  • 0:45 - 0:49
    Sobre contato
    e o exemplo de com sua API com SSL
  • 0:50 - 0:52
    no page
  • 0:52 - 0:54
    nós temos a seguinte estrutura.
  • 0:54 - 0:58
    Essa função chamado Get data,
  • 0:58 - 1:04
    que está sendo executada
    de forma assíncrona e está buscando
  • 1:04 - 1:10
    nessa URL ele que é uma API desenvolvida
    e pelo jeito o placeholder.
  • 1:11 - 1:15
    Então ele vai lá buscar todos os dados
    que estão nessa API e se tiver tudo certo
  • 1:15 - 1:16
    ele retorna.
  • 1:16 - 1:19
    Onde é isso?
    Se não ele apresenta uma falha.
  • 1:19 - 1:25
    Essa forma de você criar essa função
    ajuda exatamente a executar.
  • 1:25 - 1:29
    Em vez de executar aqui no seu navegador
    e executar no servidor
  • 1:29 - 1:31
    que está executando sua aplicação.
  • 1:31 - 1:35
    Isso é uma forma de um server
    side render um SCR.
  • 1:35 - 1:39
    E aqui embaixo
    é onde será apresentado o resultado
  • 1:40 - 1:43
    dos dados
    que vão ser consumidos dessa API.
  • 1:43 - 1:44
    Então estou retornando aqui.
  • 1:44 - 1:49
    O meu nome,
    um H1 que vai ter dados do servidor
  • 1:49 - 1:52
    com SSR e aqui fazendo uma função linha
  • 1:52 - 1:57
    usando o map, listando por title
    a ID e título.
  • 1:57 - 2:01
    Na verdade
    tudo o que tiver dentro desse dessa API,
  • 2:02 - 2:05
    se você clicar aqui já está estilizado.
  • 2:05 - 2:08
    Utilizamos a aqui contém o índice
    e se clicarmos aqui
  • 2:08 - 2:10
    recebemos a API
  • 2:10 - 2:14
    já estilizada com o título de cada item.
  • 2:14 - 2:18
    Então essa é uma forma rápida de usar o S
    ou consumindo dados
  • 2:18 - 2:23
    de uma API de forma assíncrona,
    utilizando técnicas de SSR.
Title:
WEB CAP17 2025 VA07 NEXT.JS SERVER-SIDE-RENDERING
Video Language:
Portuguese, Brazilian
Duration:
02:26

Portuguese, Brazilian subtitles

Incomplete

Revisions Compare revisions

Our website uses cookies for analysis purposes.