-
SEO é 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 a 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 chamada "getData",
-
que está sendo executada
de forma assíncrona,
-
está buscando nessa URL,
-
que é uma API desenvolvida
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,
-
ao invés de executar aqui no navegador,
-
a executar no servidor
que está executando a 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.
