-
SO é o mecanismo de busca otimizado
e uma forma de utilizá lo com SSR
-
que renderiza páginas web no servidor,
ao invés do navegador,
-
tornando a aplicação
muito mais rápida,
-
principalmente ao consumir API.
-
Aqui no código vamos ter que fazer
algumas modificações,
-
como por exemplo,
em "app" adicionar mais uma pasta
-
"exemploapi" com sua "page.jsx".
-
E no "Nav" vamos criar
mais um link chamando a rota
-
"exemploapi" e colocando
"exemplo Consumo de API com SSR".
-
Como vocês podem ver aqui na tela.
-
Nós temos o "home",
"sobre", 'contato"
-
e o "exemplo consumo API com SSR".
-
No "page.jsx"
nós temos a seguinte estrutura.
-
Essa função chamado "getData",
-
que está sendo executada
de forma assíncrona e está buscando
-
nessa URL ele que é uma API desenvolvida
e pelo "jsonplaceholder".
-
Então ele vai lá buscar
todos os dados que estão nessa API
-
e se tiver tudo certo,
ele retorna um json,
-
se não ele apresenta uma falha.
-
Essa forma de você criar essa função
ajuda exatamente a executar,
-
de executar aqui no seu navegador
e executar no servidor
-
que está executando sua aplicação.
-
Isso é uma forma de um server
side render, um SSR.
-
E aqui embaixo é onde será apresentado
o resultado dos dados
-
que vão ser consumidos dessa API.
-
Então, estou retornando aqui o meu "Nav",
-
um "h1" que vai ter dados
do servidor com SSR
-
e aqui fazendo uma função
usando "map"
-
listando por "title", "ID"
e "title".
-
Na verdade, tudo o que estiver
dentro dessa API.
-
Se você clicar aqui já está estilizado.
-
Estilizamos aqui com tailwind
e se clicarmos aqui
-
recebemos a API já estilizada
com o título de cada item.
-
Então essa é uma forma rápida
de usar o SO
-
consumindo dados de uma API
de forma assíncrona,
-
utilizando técnicas de SSR.
