< 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 "app" adicionar mais uma pasta
  • 0:29 - 0:32
    "exemploapi" com sua "page.jsx".
  • 0:32 - 0:37
    E no "Nav" vamos criar
    mais um link chamando a rota
  • 0:37 - 0:41
    "exemploapi" e colocando
    "exemplo Consumo de API com SSR".
  • 0:41 - 0:44
    Como vocês podem ver aqui na tela.
  • 0:44 - 0:47
    Nós temos o "home",
    "sobre", 'contato"
  • 0:47 - 0:50
    e o "exemplo consumo API com SSR".
  • 0:50 - 0:54
    No "page.jsx"
    nós temos a seguinte estrutura.
  • 0:54 - 0:58
    Essa função chamado "getData",
  • 0:58 - 1:04
    que está sendo executada
    de forma assíncrona e está buscando
  • 1:04 - 1:11
    nessa URL ele que é uma API desenvolvida
    e pelo "jsonplaceholder".
  • 1:11 - 1:13
    Então ele vai lá buscar
    todos os dados que estão nessa API
  • 1:13 - 1:16
    e se tiver tudo certo,
    ele retorna um json,
  • 1:16 - 1:19
    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
    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.