GITHUB BLOG

Nos últimos anos, a construção de páginas estáticas tornou-se uma abordagem popular no desenvolvimento web. Essas páginas oferecem uma série de vantagens, desde tempos de carregamento mais rápidos até melhor SEO e menor custo de hospedagem. Com o advento de ferramentas como Next.js, essa prática tornou-se ainda mais acessível e poderosa.

O que são Páginas Estáticas?

Páginas estáticas são aquelas cujo conteúdo não muda com base na interação do usuário ou em dados dinâmicos. Em vez de serem geradas a cada solicitação do navegador, como é o caso das páginas dinâmicas, elas são pré-renderizadas durante o processo de desenvolvimento. Isso significa que o HTML, CSS e JavaScript são gerados uma vez e depois servidos diretamente aos usuários, resultando em tempos de carregamento mais rápidos e uma experiência mais fluida.

Construção com Next.js

Next.js, um framework baseado em React, simplifica a criação eficiente e intuitiva de páginas estáticas. Ele suporta geração estática, permitindo pré-renderizar páginas no momento da construção do aplicativo para servir conteúdo instantaneamente aos usuários.

Além disso, o Next.js oferece Incremental Static Regeneration (ISR) para atualizar páginas estáticas conforme necessário sem reconstruir todo o site, suporte para pré-busca de dados e um sistema de roteamento dinâmico que facilita a navegação.

Essas características tornam as páginas estáticas SEO-friendly, pois podem incluir metadados otimizados diretamente no HTML gerado, melhorando o desempenho geral para mecanismos de busca.

Saiba mais sobre este framework com a documentação sobre a introdução ao Next.js e os passos iniais. Também há mais detalhes e exemplos sobre Incremental Static Regeneration (ISR).

Exemplo Prático

Usarei o meu recente blog pessoal que integra a api do github e renderiza a interface no lado do servidor. Com Next.js, eu pré-renderizei todas as páginas durante o build do site. Dessa forma, quando uma pessoa acessar uma das páginas, ela será servida instantaneamente com todas as informações necessárias, proporcionando uma experiência rápida e responsiva. O arquivo completo do trecho a seguir está disponível publicamente no meu github na página que renderiza todas as issues através dos parâmetros de rota.

Realizando as importações necessárias

As importações em projetos Next.js são essenciais para organizar o código, facilitar a reutilização de componentes e funções, evitar a poluição do arquivo com código em excesso, e garantir uma estrutura escalável de fácil mantenção. Elas ajudam na localização rápida de recursos, melhoram a integração com ferramentas de desenvolvimento e permitem uma gestão eficiente de dependências, contribuindo para um desenvolvimento mais eficiente e organizado.

Copiado
import { Metadata } from 'next'
import { notFound } from 'next/navigation'

import { GitHubReposIssuesResponse } from '@/api/github/@types/issues-request'
import { Issue } from '@/api/github/classes/issues'
import { ServerProps } from '@/app/page'
import { Header } from '@/components/header'
import { IssueComponent } from '@/components/issue'
import { envBackend } from '@/env-backend'
import { formatMarkdownToText } from '@/lib/format-markdown-to-text'
import { formatNameFromSlug } from '@/lib/format-name-from-slug'

Adicionando revalidação para esta página

A revalidação é o processo de limpar o cache de dados e buscar novamente os dados mais recentes. Isso é útil quando seus dados mudam e você deseja garantir a exibição das informações mais recentes.

Neste caso usarei a revalidação baseada em tempo, que revalida automaticamente os dados após um determinado período de tempo. Isso é útil para dados que mudam com pouca frequência e a atualização não é tão crítica.

Para revalidar dados em um intervalo de tempo, você pode exportar uma const revalidate passando o número de segundos para revalidar todas as solicitações de busca em um segmento de rota toda vez que o tempo estipulado passar.

Saiba mais sobre o assunto com a documentação sobre a revalidação do Next.js.

Copiado
export const revalidate = 60 * 10 // 10 minutes

Gerando os metadados dinamicamente

Metadados HTML são elementos cruciais no <head> do documento que fornecem informações essenciais sem serem visíveis na página. Eles incluem tags como charset para codificação, viewport para layout responsivo, descrição e palavras-chave para SEO, autor, robots para controle de indexação, og (opengraph images) para redes sociais, e outros para melhorar a acessibilidade e funcionalidade do site. Esses metadados são fundamentais para otimizar a visibilidade e a experiência do usuário na web.

Com Next.js é possível gerar os metadados de cada página dinamicamente, e o melhor é que tudo é feito pelo lado do servidor que faz o html já vir pronto para o cliente em vez de ser renderizado em tempo de execussão. No Next.js, isso pode ser feitoao exportar uma função assíncrona chamada generateMetadata.

Confira a documentação do Next.js sobre geração de metadados para mais exemplos.

Copiado
export async function generateMetadata(props: ServerProps) {
  const user = 'bruno-valero'
  const { name: repo, issueId } = props.params

  if (!repo) {
    notFound()
  }

  const resp = await fetch(
    `https://api.github.com/repos/${user}/${repo}/issues/${issueId}`,
    {
      next: {
        revalidate: 60 * 10, // 10 minutes
      },
      headers: [['Authorization', `Bearer ${envBackend.GITHUB_AUTH_TOKEN}`]],
    },
  )
  const issueData = (await resp.json()) as GitHubReposIssuesResponse[number]

  if (!issueData) {
    notFound()
  }

  const issue = new Issue(issueData)

  if (!issue.content) {
    notFound()
  }
  console.log(
    'metadataBase',
    `${envBackend.BASE_URL}/repos/${repo}/issues/${issueId}`,
  )

  const metadata: Metadata = {
    metadataBase: new URL(`${envBackend.BASE_URL}`),
    title: issue.data.title,
    description: formatMarkdownToText(issue.content)
      .slice(0, 150)
      .concat(' ...'),
    authors: [
      {
        name: formatNameFromSlug(issue.data.user.login),
        url: issue.data.user.html_url,
      },
    ],
    creator: formatNameFromSlug(issue.data.user.login),
    keywords: [formatNameFromSlug(issue.data.title)],
    openGraph: {
      description: formatMarkdownToText(issue.content)
        .slice(0, 150)
        .concat(' ...'),
      title: `${issue.data.title} - Issue do repositório ${formatNameFromSlug(repo)}`,
    },
  }
  return metadata
}

Criando o Server Component

O Next.js permite que você escreva UI que pode ser renderizada e armazenada em cache no servidor através dos Server Components. Renderizar no servidor oferece benefícios significativos, como melhorar a eficiência na busca de dados, aumentar a segurança ao manter informações sensíveis no servidor, possibilitar o armazenamento em cache para melhorar o desempenho, reduzir a carga de JavaScript no cliente para dispositivos mais lentos, acelerar o carregamento inicial da página exibindo conteúdo imediato, melhorar a indexação em motores de busca e facilitar o compartilhamento em redes sociais, além de permitir o streaming gradual do conteúdo para uma experiência de usuário mais fluida.

A documentação do Next.j sobre Server Components oferece mais detalhes.

Copiado
export default async function IssuePage(props: ServerProps) {
  const user = 'bruno-valero'
  const { name: repo, issueId } = props.params

  const resp = await fetch(
    `https://api.github.com/repos/${user}/${repo}/issues/${issueId}`,
    {
      next: {
        revalidate: 60 * 10, // 10 minutes
      },
      headers: [['Authorization', `Bearer ${envBackend.GITHUB_AUTH_TOKEN}`]],
    },
  )
  const issueData = (await resp.json()) as GitHubReposIssuesResponse[number]

  if (!issueData) {
    notFound()
  }

  const issue = new Issue(issueData)

  if (!issue.content) {
    notFound()
  }

  return (
    <main className="flex min-h-screen w-full max-w-[100vw] flex-col items-start justify-start">
      <Header />
      <IssueComponent issue={issue} />
    </main>
  )
}

O que você aprendeu?

Com isso você teve uma base sólida sobre do que se tratam as páginas estáticas, e como construí-las com Next.js com a técnica de renderização sob demanda através das revalidações que não só as mantém estáticas, mas também as atualiza em períodos pré-definidos de tempo. Além disso viu sobre a geração de metadados dinamicamente e a criação de server components.

Este conteúdo foi útil? Deixe seu comentário.