O Impacto da Computação de Borda na Geração de Sites Estáticos
Explorando como a computação de borda melhora sites estáticos e seu hospedagem.
― 12 min ler
Índice
A geração de sites estáticos (SSG) é uma forma popular de criar sites rápidos e fáceis de hospedar. Existem várias ferramentas para SSG, e novos métodos como Jamstack estão tornando isso ainda mais útil. A Computação de Borda é uma opção nova que torna o SSG ainda melhor, permitindo a criação de sites mais dinâmicos em uma base estática, aproximando os recursos dos usuários. Este texto explora como as mudanças recentes na computação de borda afetam o SSG.
Historicamente, os sites hospedavam conteúdo estático em servidores. Com o surgimento dos sistemas de gerenciamento de conteúdo (CMSs), os sites se tornaram mais dinâmicos, permitindo alterações através de editores online. Isso trouxe complexidade, já que os servidores passaram a precisar fazer mais trabalho, incluindo a renderização do lado do servidor (SSR). Para reduzir a dependência do SSR, foram criados geradores de sites estáticos. Essas ferramentas constroem arquivos estáticos a partir do conteúdo editado pelo usuário, tornando possível servir sites usando servidores de arquivos estáticos simples, sem muita funcionalidade dinâmica. A demanda por tempos de carregamento rápidos contribuiu para o crescimento das Redes de Entrega de Conteúdo (CDNs), que usam uma rede de servidores para entregar conteúdo rapidamente com base na localização do usuário.
Com o crescimento de provedores de servidores comerciais e uma diminuição na auto-hospedagem, surgiram fazendas de servidores. Isso levou a novas maneiras de negociar poder computacional, dando origem à computação em nuvem. Hoje, você pode pagar por serviços em nuvem com base no quanto usa, ao invés de pagar por um servidor físico inteiro. Isso permite uma melhor escalabilidade de recursos e incentiva o desenvolvimento de hardware único.
Combinar CDNs com os novos métodos de cobrança por recursos computacionais tornou a computação de borda uma opção atraente para desenvolvedores web. Diferente das CDNs, a computação de borda permite capacidades de programação, permitindo que os desenvolvedores personalizem como as solicitações dos usuários e as respostas dos servidores funcionam. Isso resulta em tempos de resposta mais rápidos. A transição para a computação de borda também gerou novas ferramentas, como bancos de dados amigáveis à borda, e ajuda a eliminar "inicializações frias", que se referem a atrasos quando um serviço em nuvem é acessado pela primeira vez.
Nesse contexto, faz sentido olhar para as implicações da computação de borda para hospedagem de sites estáticos. Este artigo busca responder à pergunta: Quais são as oportunidades e desafios técnicos da computação de borda para hospedagem de sites estáticos? Discussões anteriores sobre SSG destacaram os desafios de atualizar o conteúdo do site, sugerindo um formato intermediário para os dados do site, e essa análise se baseia nisso.
Para explorar essa questão, vamos olhar para as mudanças recentes na renderização e hospedagem de sites, fornecendo contexto para nossas descobertas. Também vamos avaliar a eficácia de renderizar uma plataforma de blog usando diferentes métodos e provedores de serviços em borda. Os resultados e o potencial da computação de borda para SSG serão discutidos mais adiante.
Evolução das Técnicas de Renderização de Sites
As técnicas de renderização de sites mudaram significativamente à medida que as tecnologias web evoluíram. À medida que a web passou de servir sites simples a aplicativos complexos, novas técnicas de renderização surgiram para enfrentar os desafios do desenvolvimento de sites.
Renderização do Lado do Servidor
Nos anos 1990, os sites eram principalmente estáticos, construídos a partir de páginas HTML servidas diretamente aos usuários. Sites estáticos são simplesmente lidos pelos servidores do armazenamento e enviados aos usuários sem qualquer mudança ou interatividade. Com a crescente demanda por conteúdo dinâmico, os servidores tiveram que se adaptar, permitindo que processassem solicitações, realizassem ações e gerassem respostas personalizadas-isso é conhecido como renderização do lado do servidor (SSR).
Renderização do Lado do Cliente e Aplicativos de Página Única
A SSR foi a principal abordagem por mais de uma década até que a renderização do lado do cliente (CSR) ganhou popularidade no final dos anos 2000 e início dos anos 2010. A CSR melhorou a usabilidade ao permitir que as páginas fossem atualizadas sem recarregar todo o site novamente, usando tecnologias como JavaScript. Isso levou ao desenvolvimento de aplicativos de página única (SPAs) que adaptam o conteúdo com base nas interações do usuário.
Geração de Sites Estáticos
A geração de sites estáticos (SSG) atua como uma ponte entre a SSR e a CSR. O SSG compila os ativos do site em um formato adequado para servidores de arquivos estáticos, enquanto oferece benefícios como segurança, tempos de carregamento rápidos, escalabilidade e gerenciamento eficiente de recursos. Os SSGs são particularmente eficazes para sites menores focados em conteúdo, embora as implementações iniciais exigissem recompilar o site inteiro quando ocorriam mudanças. Técnicas de compilação incremental agora permitem que os SSGs apenas atualizem as partes afetadas por mudanças do usuário.
Há uma ampla gama de ferramentas SSG disponíveis, com inúmeras opções para os desenvolvedores escolherem, aumentando sua capacidade de criar sites estáticos eficazes.
O Jamstack, introduzido em 2016, aborda as limitações nos modelos tradicionais de SSG ao desacoplar o conteúdo do layout. Funciona bem com CMSs headless, onde o conteúdo está disponível via APIs para outras aplicações consumirem. Sites Jamstack ainda podem ser hospedados em servidores estáticos, beneficiando-se de vantagens semelhantes às dos SSGs, enquanto dependem de serviços externos para funções dinâmicas adicionais, como autenticação.
Regeneração Estática Incremental e Renderização Persistente Distribuída
Frameworks modernos como o Next.js combinam SSR, CSR e SSG, permitindo uma mistura de métodos de renderização para atender a necessidades específicas. O Next.js introduziu a regeneração estática incremental (ISR), que permite que o SSG atualize partes do conteúdo sem reconstruir o site inteiro. Essa abordagem sob demanda fornece um equilíbrio entre geração estática e conteúdo dinâmico.
Outra abordagem, a renderização persistente distribuída (DPR), foi introduzida para enfrentar algumas limitações da ISR, garantindo consistência e reduzindo as chances de os usuários verem conteúdo desatualizado.
Evolução da Hospedagem de Sites
Assim como as técnicas de renderização, a hospedagem de sites também evoluiu. Essa evolução complementa as técnicas de renderização, já que as duas devem trabalhar juntas para um desenvolvimento eficaz de sites.
Servidores Alugados e Máquinas Virtuais
Nos primórdios da web, a hospedagem exigia que indivíduos e empresas mantivessem seus próprios servidores. Um mercado de hospedagem se desenvolveu para simplificar o processo. Inicialmente, as empresas ofereciam espaço para sites estáticos e servidores dedicados para aluguel. Isso eventualmente levou a máquinas virtuais (VMs) que permitiam o compartilhamento de recursos entre os usuários, liberando os desenvolvedores da necessidade de gerenciar hardware específico.
Redes de Entrega de Conteúdo
Com o aumento do tráfego na web e a percepção de que grande parte do conteúdo servido permanecia estático, surgiram as CDNs para distribuir solicitações por uma quantidade maior de servidores, melhorando os tempos de carregamento e reduzindo a latência para os usuários.
Computação em Nuvem e Sem Servidor
A computação em nuvem representou um grande avanço na oferta de recursos, separando o hardware físico dos serviços. Essa transição abriu caminho para a computação sem servidor, onde os desenvolvedores podem definir pontos de entrada em vez de gerenciar servidores diretamente. Funções são acionadas sob demanda e podem acessar bancos de dados de forma integrada.
Computação de Borda
A computação de borda baseia-se no conceito de CDN, permitindo que a computação ocorra mais perto dos usuários. Em vez de apenas entregar conteúdo, a computação de borda oferece a capacidade de executar código onde é necessário, melhorando o desempenho e se adaptando às condições da rede. Essa abordagem apresenta novos desafios, especialmente para o gerenciamento de bancos de dados, e provoca discussões sobre otimização da entrega de conteúdo com base na experiência do usuário.
Bancos de Dados em Borda
A natureza distribuída da computação de borda levou ao surgimento de bancos de dados em borda projetados especificamente para esse ambiente. Esses bancos de dados abordam os desafios dos sistemas tradicionais, oferecendo soluções como o Cloudflare D1, um banco de dados relacional baseado em SQLite, e várias lojas de chave-valor (KV) otimizadas para velocidade e baixa latência.
Os desenvolvedores se beneficiam das interações simplificadas que os bancos de dados em borda proporcionam, mas também devem considerar opções de backup para evitar a dependência de um único fornecedor, já que esses bancos de dados costumam estar intimamente ligados às plataformas de computação de borda.
Oportunidades e Desafios Técnicos da Computação de Borda para Hospedagem de Sites Estáticos
Os últimos avanços nas técnicas de renderização e na computação de borda permitem que as limitações tradicionais do SSG sejam abordadas, preservando suas vantagens. A computação de borda possibilita a interceptação de solicitações de usuários, além da opção de permitir que a rede de borda atue de forma independente e gere respostas adequadas.
A computação de borda suporta websites híbridos que combinam elementos estáticos e dinâmicos. A arquitetura de ilhas representa uma forma de implementar esse conceito, aprimorando a capacidade dos SSGs em fornecer experiências ricas aos usuários.
Entretanto, preocupações sobre a dependência de fornecedores permanecem, já que as plataformas de borda têm requisitos únicos que podem dificultar a troca. Iniciativas de colaboração entre diferentes plataformas podem ajudar a resolver problemas de compatibilidade, permitindo que os desenvolvedores tenham mais flexibilidade no uso de sua tecnologia.
Para examinar essas implicações, comparamos um site estático com um hospedado em uma plataforma de borda. Esperávamos que seu desempenho fosse bastante semelhante, mas antecipávamos alguns custos de latência dependendo das estratégias de cache. Também investigamos o método ISR como uma abordagem híbrida entre SSG e SSR.
Medição de Desempenho
As medições de desempenho para as várias implementações foram realizadas usando ferramentas de teste bem conhecidas para avaliar a eficácia de cada variante do site. O objetivo era capturar indicadores-chave de desempenho enquanto mantínhamos o foco nas interações do usuário.
Nossos procedimentos de teste envolveram a criação de uma versão simplificada de uma plataforma de blog com diferentes restrições de atualização, permitindo comparações entre geração estática, SSR e ISR. Medimos métricas como o Primeiro Pintar de Conteúdo (FCP) e o tempo de resposta do servidor para entender como os diversos métodos se comportaram.
Resumo dos Resultados
Nossa comparação revelou que o SSG consistentemente superou o SSR. No entanto, as versões hospedadas em borda tiveram desempenho comparável aos sites estáticos depois que um cache foi estabelecido. As descobertas também mostraram que, enquanto as solicitações iniciais enfrentaram alguns atrasos, as solicitações subsequentes se beneficiaram dos mecanismos de cache, alcançando resultados semelhantes ao SSG.
Além disso, observamos variações no desempenho com base nos detalhes da implementação e no número total de postagens de blog ou dados sendo processados. Notavelmente, enquanto a variante SSR teve um desempenho semelhante ao ISR na primeira solicitação, o cache ajudou o ISR a alcançar o SSG nas solicitações posteriores.
Expandindo os Testes com Comentários de Usuários
Para ampliar o potencial de nosso estudo, consideramos opções para adicionar comentários de usuários ao blog. Vários métodos foram identificados, incluindo o uso de serviços de terceiros, renderização estática com trabalhadores de borda ou tratar a seção de comentários como uma ilha.
Cada opção tem suas vantagens e desvantagens. Embora os serviços de terceiros simplifiquem a integração, eles apresentam problemas de confiabilidade e tamanho. Por outro lado, as últimas opções oferecem flexibilidade, mas requerem mais complexidade técnica.
Conclusão
Começamos nossa exploração com a questão: Quais são as oportunidades e desafios técnicos da computação de borda para hospedagem de sites estáticos? Nossas descobertas indicam que a computação de borda realmente expande a utilidade do SSG ao permitir maior dinamismo em aplicações web. Técnicas como a arquitetura de ilhas mostram potencial para entrega rica de conteúdo enquanto mantêm as vantagens de desempenho do SSG.
Nossa avaliação demonstra a compatibilidade entre SSG e computação de borda, destacando suas capacidades conjuntas em criar soluções web de alto desempenho. No entanto, ainda há questões que precisam ser respondidas sobre as técnicas, sua adequação em vários cenários e suas limitações.
À medida que o cenário continua a evoluir, será crucial aprofundar a compreensão de como essas tecnologias podem trabalhar juntas, incluindo entender as diferenças de custo entre o uso de plataformas de borda e métodos de hospedagem mais tradicionais. Explorar otimizações, estratégias de cache e a experiência do usuário fornecerá mais insights sobre como a web pode ser aprimorada.
Os resultados deste estudo convidam a uma exploração mais ampla em várias dimensões, incluindo os pontos ideais para diferentes técnicas de desenvolvimento e os efeitos de frameworks emergentes que se alinham com a computação de borda. À medida que a tecnologia avança, entender esses aspectos será fundamental para moldar o futuro da geração e hospedagem de sites estáticos.
Título: Implications of Edge Computing for Static Site Generation
Resumo: Static site generation (SSG) is a common technique in the web development space to create performant websites that are easy to host. Numerous SSG tools exist, and the approach has been complemented by newer approaches, such as Jamstack, that extend its usability. Edge computing represents a new option to extend the usefulness of SSG further by allowing the creation of dynamic sites on top of a static backdrop, providing dynamic resources close to the user. In this paper, we explore the impact of the recent developments in the edge computing space and consider its implications for SSG.
Autores: Juho Vepsäläinen, Arto Hellas, Petri Vuorimaa
Última atualização: 2023-09-08 00:00:00
Idioma: English
Fonte URL: https://arxiv.org/abs/2309.05669
Fonte PDF: https://arxiv.org/pdf/2309.05669
Licença: https://creativecommons.org/licenses/by-nc-sa/4.0/
Alterações: Este resumo foi elaborado com a assistência da AI e pode conter imprecisões. Para obter informações exactas, consulte os documentos originais ligados aqui.
Obrigado ao arxiv pela utilização da sua interoperabilidade de acesso aberto.
Ligações de referência
- https://www.gatsbyjs.com/docs/reference/release-notes/v3.0/
- https://jamstack.org/
- https://staticsitegenerators.net/
- https://astro.build/
- https://wintercg.org/
- https://arxiv-org.atlassian.net/servicedesk/customer/portal/1/article/68452354
- https://tex.stackexchange.com/questions/3033/forcing-linebreaks-in-url
- https://github.com/11ty/is-land
- https://www.11ty.dev/
- https://tex.stackexchange.com/questions/39864/pgfplots-axis-scaling
- https://www.latex4technics.com/?note=298B
- https://github.com/bebraw/ssg-benchmark
- https://anonymous.4open.science/r/ssg-benchmark-80E3/
- https://dev.to/thepassle/service-worker-side-rendering-swsr-cb1
- https://reego.dev/blog/achieving-isr-on-cloudflare-workers
- https://pages.cloudflare.com/
- https://www.netlify.com/
- https://developers.cloudflare.com/workers/
- https://playwright.dev/
- https://developer.chrome.com/docs/lighthouse/
- https://www.npmjs.com/package/autocannon
- https://github.com/GoogleChrome/lighthouse/blob/HEAD/docs/throttling.md
- https://developers.cloudflare.com/workers/wrangler/
- https://gustwind.js.org/breezewind/
- https://reactjs.org/
- https://www.npmjs.com/package/benny
- https://developer.chrome.com/docs/lighthouse/overview/