{"id":60387,"date":"2023-10-11T04:38:36","date_gmt":"2023-10-11T07:38:36","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=60387&#038;preview=true&#038;preview_id=60387"},"modified":"2023-10-31T05:49:24","modified_gmt":"2023-10-31T08:49:24","slug":"astro-js","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/astro-js\/","title":{"rendered":"O Que \u00e9 Astro? Uma Introdu\u00e7\u00e3o ao Popular Gerador de Sites Est\u00e1ticos"},"content":{"rendered":"<p>O desenvolvimento web evoluiu significativamente desde os primeiros dias dos simples sites pessoais de p\u00e1gina \u00fanica. Hoje, temos \u00e0 disposi\u00e7\u00e3o uma variedade de linguagens, frameworks e\u00a0<a href=\"https:\/\/kinsta.com\/pt\/blog\/sistema-de-gerenciamento-de-conteudo\/\">sistemas de gerenciamento de conte\u00fado<\/a>, cada um projetado para atender a uma infinidade de necessidades espec\u00edficas.<\/p>\n<p>\u00c9 neste cen\u00e1rio que o Astro se destaca, sendo um dos mais recentes e empolgantes frameworks JavaScript.<\/p>\n<p>Criado por Fred K. Schott e um grupo de outros colaboradores, o Astro rapidamente se tornou um favorito na comunidade de desenvolvimento. \u00c9 um framework completo que funciona muito como um gerador de sites est\u00e1ticos.<\/p>\n<p>Neste artigo, exploraremos por que tantos desenvolvedores est\u00e3o optando pelo Astro em vez de outras alternativas e mostraremos como criar um blog baseado em markdown usando este framework.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>O que \u00e9 o Astro?<\/h2>\n<figure style=\"width: 600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/05\/astro-logo.png\" alt=\"Astro\" width=\"600\" height=\"157\"><figcaption class=\"wp-caption-text\">Astro<\/figcaption><\/figure>\n<p>O <a href=\"https:\/\/kinsta.com\/pt\/blog\/gerador-de-site-estatico-svelte\/#2-astro\">Astro<\/a>, ou Astro.js, \u00e9 um <a href=\"https:\/\/kinsta.com\/pt\/blog\/geradores-de-site-estatico\/\">gerador de sites est\u00e1ticos<\/a> popular, concebido para quem deseja criar sites ricos em conte\u00fado, que sejam executados de forma r\u00e1pida e suave. Sua natureza leve, estrutura intuitiva e curva de aprendizado suave o tornam atraente para desenvolvedores de todos os n\u00edveis de experi\u00eancia.<\/p>\n<p>Apesar de seu pequeno tamanho, o Astro vem com ferramentas poderosas que aumentam drasticamente a flexibilidade do seu site, economizando horas em gerenciamento de conte\u00fado e temas. Al\u00e9m disso, ele oferece aos desenvolvedores a op\u00e7\u00e3o de trabalhar com seus frameworks preferidos em conjunto com o Astro \u2014 uma perspectiva atraente para programadores experientes que j\u00e1 t\u00eam uma s\u00e9rie de favoritos.<\/p>\n<p>Aqui est\u00e3o alguns dos motivos pelas quais o Astro se destaca dos demais:<\/p>\n<ul>\n<li><strong>Arquitetura de ilhas<\/strong>: O Astro extrai sua interface de usu\u00e1rio (UI) em componentes menores e isolados, conhecidos como &#8220;Astro Islands&#8221;, que podem ser usados em qualquer p\u00e1gina. O JavaScript n\u00e3o utilizado \u00e9 substitu\u00eddo por HTML leve.<\/li>\n<li><strong>Zero JavaScript (por padr\u00e3o)<\/strong>: Embora voc\u00ea possa usar todo o JavaScript que quiser para criar seus sites, o Astro tentar\u00e1 implementar zero JavaScript na produ\u00e7\u00e3o, transcrevendo o c\u00f3digo para voc\u00ea. Essa \u00e9 uma abordagem perfeita se voc\u00ea se concentrar na velocidade do site.<\/li>\n<li><strong>SSG e SSR inclu\u00eddos<\/strong>: O Astro come\u00e7ou como um gerador de sites est\u00e1ticos, mas, ao longo do caminho, tornou-se um framework que usa tanto a gera\u00e7\u00e3o de sites est\u00e1ticos (SSG) quanto a <a href=\"https:\/\/kinsta.com\/pt\/blog\/arquitetura-aplicativos-web\/#serversiderendered-architecture\">renderiza\u00e7\u00e3o do lado do servidor (SSR)<\/a>. E voc\u00ea pode escolher quais p\u00e1ginas usar\u00e3o cada abordagem.<\/li>\n<li><strong>Agn\u00f3stico em rela\u00e7\u00e3o ao framework<\/strong>: Ao usar o Astro, voc\u00ea pode usar qualquer <a href=\"https:\/\/kinsta.com\/pt\/blog\/bibliotecas-javascript\/\">framework JavaScript<\/a> que desejar, at\u00e9 mesmo v\u00e1rios frameworks ao mesmo tempo. (Falaremos sobre isso com mais detalhes mais tarde neste artigo.)<\/li>\n<\/ul>\n<p>Al\u00e9m disso, o Astro est\u00e1 pronto para o Edge, o que significa que ele pode ser implantado em qualquer lugar, a qualquer momento, com facilidade.<\/p>\n<p>Voc\u00ea est\u00e1 pronto para saber mais? Vamos nos aprofundar em como o Astro funciona.<\/p>\n<h2>Estrutura do Astro<\/h2>\n<p>Antes de avan\u00e7armos, \u00e9 importante entender como o Astro \u00e9 configurado para que voc\u00ea possa us\u00e1-lo de forma eficaz. Vamos dar uma olhada na estrutura de arquivos principal do Astro:<\/p>\n<pre><code>\u251c\u2500\u2500 dist\/\n\u251c\u2500\u2500 src\/\n\u2502   \u251c\u2500\u2500 components\/\n\u2502   \u251c\u2500\u2500 layouts\/\n\u2502   \u2514\u2500\u2500 pages\/\n\u2502       \u2514\u2500\u2500 index.astro\n\u251c\u2500\u2500 public\/\n\u2514\u2500\u2500 package.json<\/code><\/pre>\n<p>Como voc\u00ea pode ver, a estrutura em si \u00e9 bastante simples. No entanto, existem alguns pontos-chave que voc\u00ea deve lembrar:<\/p>\n<ul>\n<li>A maior parte do nosso projeto est\u00e1 na pasta <strong>src<\/strong>. Voc\u00ea pode organizar seus componentes, layouts e p\u00e1ginas em subpastas. Voc\u00ea pode adicionar outras pastas para facilitar a navega\u00e7\u00e3o no seu projeto.<\/li>\n<li>A pasta <strong>public<\/strong> \u00e9 para todos os arquivos que ficam fora do processo de build, como fontes, imagens ou um arquivo <strong>robots.txt<\/strong>.<\/li>\n<li>A pasta <strong>dist<\/strong> conter\u00e1 todo o conte\u00fado que voc\u00ea deseja implementar no servidor de produ\u00e7\u00e3o.<\/li>\n<\/ul>\n<p>A seguir, vamos nos aprofundar nos principais componentes do Astro: componentes, layouts e p\u00e1ginas.<\/p>\n<h3>Componentes<\/h3>\n<p>Os componentes s\u00e3o partes reutiliz\u00e1veis de c\u00f3digo que podem ser inclu\u00eddas em todo o site, de forma semelhante aos <a href=\"https:\/\/kinsta.com\/pt\/blog\/codigo-curto-wordpress\/\">c\u00f3digos de acesso no WordPress<\/a>. Por padr\u00e3o, eles t\u00eam a extens\u00e3o de arquivo <strong>.astro<\/strong>, mas voc\u00ea tamb\u00e9m pode usar componentes n\u00e3o Astro criados com <a href=\"https:\/\/kinsta.com\/pt\/blog\/vue-js\/\">Vue<\/a>, <a href=\"https:\/\/kinsta.com\/pt\/blog\/sites-estaticos-react\/#4-astro\">React<\/a>, Preact ou <a href=\"https:\/\/kinsta.com\/pt\/blog\/gerador-de-site-estatico-svelte\/#2-astro\">Svelte<\/a>.<\/p>\n<p>A seguir, voc\u00ea ver\u00e1 um exemplo da apar\u00eancia de um componente simples &#8211; nesse caso, uma tag classificada <code>div<\/code> contendo <code>h2<\/code>:<\/p>\n<pre><code class=\"language-html\">&lt;!-- src\/components\/Kinsta.astro --&gt;\n&lt;div class=\"kinsta_component\"&gt;\n    &lt;h2&gt;Hello, Kinsta!&lt;\/h2&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>E aqui est\u00e1 como podemos incorporar esse componente em nosso site:<\/p>\n<pre><code class=\"language-jsx\">---\nimport KinstaComponent from ..\/components\/Kinsta.astro\n---\n&lt;div&gt;\n    &lt;KinstaComponent \/&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Conforme demonstrado acima, primeiro voc\u00ea precisa importar o componente. S\u00f3 ent\u00e3o ele poder\u00e1 ser inclu\u00eddo na p\u00e1gina.<\/p>\n<p>Agora \u00e9 hora de adicionar algumas propriedades ao nosso componente. Vamos come\u00e7ar com uma propriedade <code>{title}<\/code>:<\/p>\n<pre><code class=\"language-jsx\">---\nconst { title = 'Hello' } = Astro.props\n---\n\n&lt;div class=\"kinsta_component\"&gt;\n    &lt;h2&gt;{title}&lt;\/h2&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>E aqui est\u00e1 como nossa propriedade seria implementada:<\/p>\n<pre><code class=\"language-jsx\">---\nimport KinstaComponent from ..\/components\/Kinsta.astro\n---\n\n&lt;div&gt;\n    &lt;!-- This shows \"Good day\" --&gt;<!-- This shows \"Good day\" -->\n    &lt;KinstaComponent title=\"Good day\"\/&gt;\n\n    &lt;!-- This shows \"Hello\" --&gt;\n    &lt;KinstaComponent \/&gt;\n &lt;\/div&gt;<\/code><\/pre>\n<p>Simples, certo?<\/p>\n<p>Como voc\u00ea provavelmente j\u00e1 percebeu, o verdadeiro poder dos componentes do Astro est\u00e1 em sua natureza global e reutiliz\u00e1vel. Eles permitem que voc\u00ea fa\u00e7a altera\u00e7\u00f5es radicais em todo o seu site editando apenas algumas linhas de c\u00f3digo, o que pode economizar in\u00fameras horas que, de outra forma, seriam gastas em substitui\u00e7\u00f5es de texto tediosas e meticulosas.<\/p>\n<h3>Layouts<\/h3>\n<p>Agora, vamos falar sobre layouts. Al\u00e9m de sua fun\u00e7\u00e3o de tema familiar, os layouts no Astro tamb\u00e9m s\u00e3o componentes reutiliz\u00e1veis, mas s\u00e3o usados como inv\u00f3lucros de c\u00f3digo.<\/p>\n<p>D\u00ea uma olhada neste exemplo:<\/p>\n<pre><code class=\"language-jsx\">---\n\/\/ src\/layouts\/Base.astro\nconst { pageTitle = 'Hello world' } = Astro.props\n---\n\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width\"&gt;\n    &lt;title&gt;{pageTitle}&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;main&gt;\n        &lt;slot \/&gt;\n    &lt;\/main&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>Observe a tag <code>&lt;slot \/&gt;<\/code> aqui. O elemento <code>&lt;slot \/&gt;<\/code> no Astro funciona como um espa\u00e7o reservado para tags e conte\u00fado HTML reais.<\/p>\n<p>Vamos ver isso em a\u00e7\u00e3o.<\/p>\n<p>O c\u00f3digo abaixo mostra nossa tag <code>&lt;slot \/&gt;<\/code> sendo substitu\u00edda pelo c\u00f3digo desejado, tudo isso envolvido pelo nosso layout <strong>Base.astro<\/strong>:<\/p>\n<pre><code class=\"language-jsx\">---\nimport Base from '..\/layouts\/Base.astro';\n---\n\n&lt;Base title=\"Hello world\"&gt;\n    &lt;div&gt;\n        &lt;p&gt;Some example text.&lt;\/p&gt;\n    &lt;\/div&gt;\n&lt;\/Base&gt;<\/code><\/pre>\n<p>Como voc\u00ea pode ver, nossa tag <code>&lt;slot \/&gt;<\/code> foi substitu\u00edda pelo HTML que ela representa, que \u00e9:<\/p>\n<pre><code class=\"language-html\">&lt;div&gt;\n    &lt;p&gt;Some example text.&lt;\/p&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Como voc\u00ea pode ver, os layouts, assim como os componentes, permitem que voc\u00ea reutilize partes do c\u00f3digo em todo o site, simplificando o desafio de atualizar o conte\u00fado e o design global.<\/p>\n<h3>P\u00e1ginas<\/h3>\n<p>As p\u00e1ginas s\u00e3o um tipo especial de componente respons\u00e1vel pelo roteamento, carregamento de dados e cria\u00e7\u00e3o de templates.<\/p>\n<p>O Astro usa roteamento baseado em arquivos para gerar p\u00e1ginas, em vez de roteamento din\u00e2mico. O m\u00e9todo baseado em arquivos n\u00e3o apenas consome menos largura de banda, mas tamb\u00e9m evita que voc\u00ea tenha de importar os componentes manualmente.<\/p>\n<p>Aqui est\u00e1 um exemplo de rotas definidas:<\/p>\n<pre><code class=\"language-html\">src\/pages\/index.astro =&gt; yourdomain.com\nsrc\/pages\/test.astro =&gt; domain.com\/test\nsrc\/pages\/test\/subpage =&gt; domain.com\/test\/subpage<\/code><\/pre>\n<p>Com essas rotas, nossa p\u00e1gina inicial resultante seria renderizada da seguinte forma:<\/p>\n<pre><code class=\"language-html\">&lt;!-- src\/pages\/index.astro --&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width\"&gt;\n    &lt;title&gt;Hello World&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;h1&gt;Hello, Kinsta&lt;\/h1&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>Mas j\u00e1 sabemos como usar layouts, ent\u00e3o vamos converter isso em algo que seja acess\u00edvel globalmente:<\/p>\n<pre><code class=\"language-jsx\">---\nimport Base from '..\/layouts\/Base.astro';\n---\n\n&lt;Base&gt;\n    &lt;h1&gt;Hello, Kinsta&lt;\/h1&gt;\n&lt;\/Base&gt;<\/code><\/pre>\n<p>Pronto, ficou muito mais limpo.<\/p>\n<p>Discutiremos o roteamento no Astro com mais detalhes mais adiante neste artigo, mas por agora, vamos seguir para a parte divertida: constru\u00e7\u00e3o e personaliza\u00e7\u00e3o do site.<\/p>\n<h2>Personaliza\u00e7\u00e3o e extens\u00e3o do Astro<\/h2>\n<p>Chegou a hora de voc\u00ea aprender a personalizar seu site do Astro! Vamos usar cole\u00e7\u00f5es Markdown, roteamento, manipula\u00e7\u00e3o de imagens e uma integra\u00e7\u00e3o com o React para criar e personalizar nosso site est\u00e1tico.<\/p>\n<h3>Cole\u00e7\u00f5es Markdown<\/h3>\n<p>Com a vers\u00e3o 2.0, o Astro <a href=\"https:\/\/astro.build\/blog\/astro-2\/#automatic-type-safety-for-markdown--mdx\" target=\"_blank\" rel=\"noopener noreferrer\">introduziu<\/a> uma maneira muito melhor de manter o conte\u00fado Markdown do que antes. Gra\u00e7as \u00e0s cole\u00e7\u00f5es, podemos ter certeza de que todos os nossos dados de frontmatter est\u00e3o inclu\u00eddos e t\u00eam o tipo correto de associa\u00e7\u00e3o.<\/p>\n<p>Recentemente, na vers\u00e3o 2.5, eles <a href=\"https:\/\/astro.build\/blog\/astro-250\/\" target=\"_blank\" rel=\"noopener noreferrer\">adicionaram a possibilidade de gerenciar tamb\u00e9m arquivos JSON e YAML<\/a> como cole\u00e7\u00f5es.<\/p>\n<p>Pronto para colocar a m\u00e3o na massa?<\/p>\n<p>Primeiro, coloque todos os seus artigos Markdown na pasta <strong>src\/content\/collection_name<\/strong>. Vamos criar uma cole\u00e7\u00e3o de blogs para este projeto, portanto, em nossa demonstra\u00e7\u00e3o, a pasta ser\u00e1 <strong>src\/content\/blog<\/strong>.<\/p>\n<p>Agora \u00e9 hora de definir todos os campos necess\u00e1rios do frontmatter em nosso arquivo <strong>src\/content\/config.ts<\/strong>. Nosso blog precisar\u00e1 do seguinte:<\/p>\n<ul>\n<li><code>title<\/code> (string)<\/li>\n<li><code>tags<\/code> (array)<\/li>\n<li><code>publishDate<\/code> (hora)<\/li>\n<li><code>image<\/code> (string, opcional)<\/li>\n<\/ul>\n<p>Resultado:<\/p>\n<pre><code class=\"language-jsx\">import { z, defineCollection } from 'astro:content';\n\nconst blogCollection = defineCollection({ \n    schema: z.object({\n        title: z.string(),\n        tags: z.array(z.string()),\n        image: z.string().optional(),\n        publishDate: z.date(),\n    }),\n});\n\nexport const collections = {\n    'blog': blogCollection,\n};<\/code><\/pre>\n<p>E \u00e9 isso que o nosso arquivo Markdown <strong>article-about-astro.md<\/strong> cont\u00e9m:<\/p>\n<pre><code class=\"language-markdown\">---\ntitle: Article about Astro\ntags: [tag1, tag3]\npublishDate: 2023-03-01\n---\n## Tamen risit\n\nLorem *markdownum flumina*, laceraret quodcumque Pachyne, **alter** enim\ncadavera choro.<\/code><\/pre>\n<p>\u00c9 verdade, n\u00e3o h\u00e1 nada de especial em nosso arquivo Markdown. Mas h\u00e1 uma m\u00e1gica oculta aqui que se manifestar\u00e1 se cometermos um erro de digita\u00e7\u00e3o.<\/p>\n<p>Digamos, por exemplo, que em vez de digitar <code>publishDate<\/code>, digitamos acidentalmente <code>publishData<\/code>. No caso de um erro de digita\u00e7\u00e3o como esse, o Astro lan\u00e7ar\u00e1 um erro:<\/p>\n<pre><code class=\"language-bash\">blog \u2192 article-about-astro.md frontmatter does not match collection schema.\n  \"publishDate\" is required.<\/code><\/pre>\n<p>Incr\u00edvel, n\u00e3o \u00e9? Esse recurso pode nos ajudar a encontrar erros relacionados ao frontmatter em quest\u00e3o de segundos.<\/p>\n<p>A \u00faltima coisa que precisamos adicionar \u00e9 uma p\u00e1gina que mostre nossos dados. Vamos criar um arquivo em <strong>src\/page\/blog\/[slug].astro<\/strong> com o seguinte c\u00f3digo:<\/p>\n<pre><code class=\"language-jsx\">---\nimport Base from '..\/..\/layouts\/Base.astro';\nimport { getCollection } from 'astro:content';\nexport async function getStaticPaths() {\n    const blogEntries = await getCollection('blog');\n    return blogEntries.map(entry =&gt; ({\n        params: { slug: entry.slug }, props: { entry },\n  }));\n}\nconst { entry } = Astro.props;\nconst { Content } = await entry.render();\n---\n&lt;Base&gt;\n    &lt;h1&gt;{entry.data.title} &lt;\/h1&gt;\n    &lt;Content \/&gt;\n&lt;\/Base&gt;<\/code><\/pre>\n<p>Gra\u00e7as ao <code>getStaticPaths<\/code>, o Astro criar\u00e1 todas as p\u00e1ginas est\u00e1ticas para cada artigo na cole\u00e7\u00e3o de blogs.<\/p>\n<p>A \u00fanica coisa que est\u00e1 faltando agora \u00e9 uma listagem de todos os nossos artigos:<\/p>\n<pre><code class=\"language-jsx\">---\nimport Base from '..\/..\/layouts\/Base.astro';\n\nimport { getCollection } from 'astro:content';\nconst blogEntries = await getCollection('blog');\n---\n&lt;Base&gt;\n&lt;ul&gt;\n    {blogEntries.map(item =&gt; &lt;li&gt; &lt;strong&gt;&lt;a href={'\/blog\/' + item.slug}&gt;{item.data.title}&lt;\/a&gt;&lt;\/strong&gt;&lt;\/li&gt;)}\n&lt;\/ul&gt;\n&lt;\/Base&gt;<\/code><\/pre>\n<p>Como voc\u00ea pode ver, o uso de cole\u00e7\u00f5es torna essa tarefa extremamente simples.<\/p>\n<p>Agora, vamos criar uma cole\u00e7\u00e3o de tipos de dados. Primeiro, precisamos abrir o arquivo <strong>src\/content\/config.ts <\/strong>novamente e adicionar uma nova cole\u00e7\u00e3o de dados:<\/p>\n<pre><code class=\"language-jsx\">import { z, defineCollection, referenece } from 'astro:content';\n\nconst blogCollection = defineCollection({ \n\ttype: 'content',\n    schema: z.object({\n        title: z.string(),\n        tags: z.array(z.string()),\n        image: z.string().optional(),\n        publishDate: z.date(),\n\t    author: reference('authors')\n    }),\n});\n\nconst authorsCollection = defineCollection({ \n\ttype: 'data',\n    schema: z.object({\n        fullName: z.string(),\n        country: z.string()\n    }),\n});\n\n\nexport const collections = {\n    'blog': blogCollection,\n'authors': authorsCollection,\n};<\/code><\/pre>\n<p>Al\u00e9m de criar uma nova cole\u00e7\u00e3o, tamb\u00e9m adicionamos a refer\u00eancia ao <strong>autor<\/strong> na <strong>blogCollection<\/strong>.<\/p>\n<p>\u00c9 hora de criar um novo autor. Devemos criar um arquivo chamado <strong>maciek-palmowski.json<\/strong> em content\/authors.json:<\/p>\n<pre><code class=\"language-jsx\">{\n    \"fullName\": \"Maciek Palmowski\",\n    \"country\": \"Poland\"\n}<\/code><\/pre>\n<p>A \u00faltima coisa que falta \u00e9 pegar esses dados em nosso artigo. Para isso, precisaremos usar <a href=\"https:\/\/docs.astro.build\/en\/reference\/api-reference\/#getentry\" target=\"_blank\" rel=\"noopener noreferrer\">getEntry<\/a>:<\/p>\n<pre><code class=\"language-jsx\">---\nimport Base from '..\/..\/layouts\/Base.astro';\nimport { getCollection, getEntry } from 'astro:content';\nexport async function getStaticPaths() {\n  const blogEntries = await getCollection('blog');\n  return blogEntries.map(entry =&gt; ({\n    params: { slug: entry.slug }, props: { entry },\n  }));\n}\nconst { entry } = Astro.props;\nconst author = await getEntry(entry.data.author);\nconst { Content } = await entry.render();\n---\n&lt;Base&gt;\n&lt;h1&gt;{entry.data.title}&lt;\/h1&gt;\n&lt;h2&gt;Author: {author.data.fullName}&lt;\/h2&gt;\n&lt;Content \/&gt;\n&lt;\/Base&gt;<\/code><\/pre>\n<h3>Roteamento<\/h3>\n<p>O Astro tem dois modos de roteamento diferentes. J\u00e1 aprendemos sobre o primeiro &#8211; roteamento est\u00e1tico (baseado em arquivos) &#8211; quando abordamos as p\u00e1ginas anteriormente.<\/p>\n<p>Agora vamos mudar nosso foco para o roteamento din\u00e2mico.<\/p>\n<p>Usando par\u00e2metros de rota din\u00e2mica, voc\u00ea pode instruir um arquivo de p\u00e1gina do Astro para automatizar a cria\u00e7\u00e3o de v\u00e1rias p\u00e1ginas com a mesma estrutura. Isso \u00e9 \u00fatil quando voc\u00ea tem uma grande quantidade de um tipo espec\u00edfico de p\u00e1gina (pense em biografias de autores, perfis de usu\u00e1rios, artigos de documenta\u00e7\u00e3o e assim por diante).<\/p>\n<p>No pr\u00f3ximo exemplo, trabalharemos na gera\u00e7\u00e3o de p\u00e1ginas de biografia para nossos autores.<\/p>\n<p>No modo de sa\u00edda est\u00e1tico padr\u00e3o do Astro, essas p\u00e1ginas s\u00e3o geradas no momento da build, o que significa que voc\u00ea deve predeterminar a lista de autores que recebem um arquivo correspondente. No modo din\u00e2mico, por outro lado, as p\u00e1ginas s\u00e3o geradas mediante solicita\u00e7\u00e3o para qualquer caminho que corresponda.<\/p>\n<p>Se voc\u00ea quiser passar uma vari\u00e1vel como nome de arquivo, adicione colchetes ao redor dela:<\/p>\n<pre><code class=\"language-html\">pages\/blog\/[slug].astro -&gt; blog\/test, blog\/about-me <\/code><\/pre>\n<p>Vamos nos aprofundar nisso usando o c\u00f3digo do nosso arquivo <strong>src\/page\/blog\/[slug]<\/strong>:<\/p>\n<pre><code class=\"language-jsx\">---\nimport Base from '..\/..\/layouts\/Base.astro';\nimport { getCollection } from 'astro:content';\nexport async function getStaticPaths() {\n    const blogEntries = await getCollection('blog');\n    return blogEntries.map(entry =&gt; ({\n        params: { slug: entry.slug }, props: { entry },\n  }));\n}\nconst { entry } = Astro.props;\nconst { Content } = await entry.render();\n---\n&lt;Base&gt;\n    &lt;h1&gt;{entry.data.title}&lt;\/h1&gt;\n    &lt;Content \/&gt;\n&lt;\/Base&gt;<\/code><\/pre>\n<p>O caminho <code>getStaticPaths<\/code> \u00e9 respons\u00e1vel por gerar todas as p\u00e1ginas est\u00e1ticas. Ela retorna dois objetos:<\/p>\n<ul>\n<li><strong><code>params<\/code><\/strong><strong>:<\/strong> Usado para preencher os colchetes em nossas URLs<\/li>\n<li><strong><code>props<\/code><\/strong><strong>:<\/strong> Todos os valores que estamos passando para a p\u00e1gina<\/li>\n<\/ul>\n<p>E com isso, a cria\u00e7\u00e3o da sua p\u00e1gina est\u00e1 resolvida.<\/p>\n<h3>Manuseio de imagens<\/h3>\n<p>N\u00e3o podemos falar de sites de alto desempenho sem mencionar <a href=\"https:\/\/kinsta.com\/pt\/blog\/tipos-arquivo-imagem\/\">formatos de imagem modernos<\/a>, m\u00e9todos de redimensionamento corretos e carregamento lento.<\/p>\n<p>Felizmente, o Astro tamb\u00e9m nos d\u00e1 cobertura nesse ponto. Gra\u00e7as ao pacote <code>@astrojs\/image<\/code>, podemos introduzir todos os itens acima em quest\u00e3o de minutos.<\/p>\n<p>Ap\u00f3s <a href=\"https:\/\/docs.astro.build\/en\/guides\/integrations-guide\/image\/\">instalar o pacote<\/a>, voc\u00ea ter\u00e1 acesso a dois componentes: <code>Image<\/code> e <code>Picture<\/code>.<\/p>\n<p>O componente <code>Image<\/code> \u00e9 usado para criar uma tag <code>&lt;img \/&gt;<\/code> otimizada. Aqui est\u00e1 um exemplo:<\/p>\n<pre><code class=\"language-jsx\">---\nimport { Image } from '@astrojs\/image\/components';\nimport heroImage from '..\/assets\/hero.png';\n---\n\n&lt;Image src={heroImage} format=\"avif\" alt=\"descriptive text\" \/&gt;\n&lt;Image src={heroImage} width={300} alt=\"descriptive text\" \/&gt;\n&lt;Image src={heroImage} width={300} height={600} alt=\"descriptive text\" \/&gt;<\/code><\/pre>\n<p>Da mesma forma, o componente <code>Picture<\/code> cria um componente <code>&lt;picture\/&gt;<\/code> otimizado:<\/p>\n<pre><code class=\"language-jsx\">---\nimport { Picture } from '@astrojs\/image\/components';\nimport hero from '..\/assets\/hero.png';\n---\n&lt;Picture src={hero} widths={[200, 400, 800]} sizes=\"(max-width: 800px) 100vw, 800px\" alt=\"descriptive text\" \/&gt;<\/code><\/pre>\n<h3>SSG vs SSR<\/h3>\n<p>Por padr\u00e3o, o Astro \u00e9 executado como um gerador de site est\u00e1tico. Isso significa que todo o conte\u00fado \u00e9 convertido em p\u00e1ginas HTML est\u00e1ticas.<\/p>\n<p>Embora essa seja uma abordagem perfeita em muitas perspectivas (especialmente relacionadas \u00e0 velocidade), \u00e0s vezes voc\u00ea pode preferir uma abordagem mais din\u00e2mica. Se voc\u00ea quiser uma p\u00e1gina de perfil separada para cada usu\u00e1rio, por exemplo, ou se tiver milhares de artigos em seu site, renderizar tudo novamente a cada vez consumiria muito tempo.<\/p>\n<p>Felizmente, o Astro tamb\u00e9m pode funcionar como um framework totalmente renderizado no lado do servidor ou em um modo h\u00edbrido entre os dois.<\/p>\n<p>Para ativar o SSR lateral, precisamos adicionar o seguinte c\u00f3digo ao <strong>astro.config.mjs<\/strong>:<\/p>\n<pre><code class=\"language-jsx\">import { defineConfig } from 'astro\/config';\n\nexport default defineConfig({\n    output: 'server'\n});<\/code><\/pre>\n<p>Essa \u00e9 a abordagem padr\u00e3o.<\/p>\n<p>A abordagem h\u00edbrida significa que, por padr\u00e3o, tudo \u00e9 gerado dinamicamente, exceto as p\u00e1ginas com <code>export const prerender = true<\/code> adicionado.<\/p>\n<p>Com o Astro 2.5, voc\u00ea tamb\u00e9m pode <a href=\"https:\/\/astro.build\/blog\/astro-250\/#static-by-default-hybrid-rendering-experimental\" target=\"_blank\" rel=\"noopener noreferrer\">definir a renderiza\u00e7\u00e3o est\u00e1tica como padr\u00e3o e selecionar rotas din\u00e2micas manualmente<\/a>.<\/p>\n<p>Gra\u00e7as a isso, podemos, por exemplo, criar um site totalmente gerado estaticamente com p\u00e1ginas din\u00e2micas de login e perfil.<\/p>\n<p>Voc\u00ea pode ler mais sobre isso na <a href=\"https:\/\/docs.astro.build\/en\/guides\/server-side-rendering\/\" target=\"_blank\" rel=\"noopener noreferrer\">documenta\u00e7\u00e3o oficial<\/a>.<\/p>\n<h3>Integra\u00e7\u00e3o de outros frameworks JavaScript<\/h3>\n<p>Outro recurso incr\u00edvel do Astro permite que voc\u00ea traga seu framework favorito e o use em conjunto com o Astro. Voc\u00ea pode misturar o Astro com React, Preact, Svelte, Vue, Solid ou Alpine (para todas as integra\u00e7\u00f5es, consulte a <a href=\"https:\/\/docs.astro.build\/en\/guides\/integrations-guide\/\" target=\"_blank\" rel=\"noopener noreferrer\">documenta\u00e7\u00e3o &#8220;Adicionar integra\u00e7\u00f5es&#8221; do Astro<\/a>).<\/p>\n<p>Digamos que voc\u00ea queira usar o React. Primeiro, precisamos instalar a integra\u00e7\u00e3o executando o seguinte no <a href=\"https:\/\/kinsta.com\/pt\/blog\/npm-gerenciador-pacotes-node\/\">npm<\/a>:<\/p>\n<pre><code class=\"language-jsx\">npx astro add react<\/code><\/pre>\n<p>Agora que o React foi integrado, podemos criar um componente React. No nosso caso, ele ser\u00e1 o componente contador em <strong>src\/components\/ReactCounter.tsx<\/strong>:<\/p>\n<pre><code class=\"language-jsx\">import { useState } from 'react';\n\n\/** A counter written with React *\/\nexport function Counter({ children }) {\n    const [count, setCount] = useState(0);\n    const add = () =&gt; setCount((i) =&gt; i + 1);\n    const subtract = () =&gt; setCount((i) =&gt; i - 1);\n\n    return (\n        &lt;&gt;\n            &lt;div className=\"counter\"&gt;\n                &lt;button onClick={subtract}&gt;-&lt;\/button&gt;\n                &lt;pre&gt;{count}&lt;\/pre&gt;\n                &lt;button onClick={add}&gt;+&lt;\/button&gt;\n                &lt;\/div&gt;\n            &lt;div className=\"counter-message\"&gt;{children}&lt;\/div&gt;\n        &lt;\/&gt;\n    );\n}<\/code><\/pre>\n<p>Por \u00faltimo, mas n\u00e3o menos importante, precisamos colocar o contador em nossa p\u00e1gina com o seguinte c\u00f3digo:<\/p>\n<pre><code class=\"language-jsx\">---\nimport * as react from '..\/components\/ReactCounter';\n---\n&lt;main&gt;\n    &lt;react.Counter client:visible \/&gt;\n&lt;\/main&gt;<\/code><\/pre>\n<p>E pronto: seu componente React foi integrado perfeitamente ao site.<\/p>\n<h2>Como implantar o Astro usando a Kinsta<\/h2>\n<p>Agora \u00e9 hora de colocar nosso site Astro na web. Felizmente, a Kinsta \u00e9 a hospedagem perfeita para uma <a href=\"https:\/\/sevalla.com\/static-site-hosting\/\">Hospedagem de Site Est\u00e1tico<\/a> r\u00e1pida e sem complica\u00e7\u00f5es.<\/p>\n<p>Comece criando um reposit\u00f3rio GitHub para os arquivos do seu site. Se n\u00e3o estiver pronto para usar seus pr\u00f3prios arquivos, voc\u00ea pode clonar este <a href=\"https:\/\/github.com\/kinsta\/hello-world-astro\" target=\"_blank\" rel=\"noopener noreferrer\">template de site inicial do Astro<\/a> que nossa equipe criou.<\/p>\n<p>Uma vez que seu reposit\u00f3rio esteja pronto, siga estes passos para implantar seu site est\u00e1tico na Kinsta:<\/p>\n<ol>\n<li style=\"list-style-type: none\">\n<ol>\n<li>Fa\u00e7a login ou crie uma conta para visualizar o painel do <a href=\"https:\/\/my.kinsta.com\/?lang=pt\">MyKinsta<\/a>.<\/li>\n<li>Autorize a Kinsta com o seu provedor Git.<\/li>\n<li>Clique em <strong>Sites Est\u00e1ticos<\/strong> na barra lateral \u00e0 esquerda, e depois clique em <strong>Adicionar site<\/strong>.<\/li>\n<li>Selecione o reposit\u00f3rio e o branch do qual deseja fazer a implanta\u00e7\u00e3o.<\/li>\n<li>Atribua um nome \u00fanico ao seu site.<\/li>\n<li>Adicione as configura\u00e7\u00f5es de build no seguinte formato:\n<ul>\n<li><strong>Comando build:<\/strong> <code>npm run build<\/code><\/li>\n<li><strong>Vers\u00e3o do Node:<\/strong>\u00a0<code>18.16.0<\/code><\/li>\n<li><strong>Diret\u00f3rio de publica\u00e7\u00e3o:<\/strong>\u00a0<code>dist<\/code><\/li>\n<\/ul>\n<\/li>\n<li>Por fim, clique em <strong>Criar site<\/strong>.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<p>E \u00e9 isso! Agora voc\u00ea tem um site est\u00e1tico ativo e totalmente funcional criado com o framework do Astro.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/05\/astro-starter-homepage.png\" alt=\"A dark page with the Kinsta logo in white in the center above the words \"Welcome to Your New Astro Site\", followed by two rows of cards with labels \"Official Astro Website\", \"Astro Documentation\", \"Download Starter\", and \"Kinsta GitHub\".\" width=\"1600\" height=\"1266\"><figcaption class=\"wp-caption-text\">Nossa p\u00e1gina inicial do Astro em a\u00e7\u00e3o.<\/figcaption><\/figure>\n<p>Voc\u00ea pode encontrar a URL em tempo real e outros detalhes da implanta\u00e7\u00e3o na aba <strong>Implanta\u00e7\u00f5es<\/strong>.<\/p>\n<p>Como alternativa \u00e0 Hospedagem de Site Est\u00e1tico, voc\u00ea pode optar por implantar seu site est\u00e1tico com a <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Hospedagem de Aplicativos<\/a> da Kinsta, que oferece maior flexibilidade de hospedagem, uma gama mais ampla de benef\u00edcios e acesso a recursos mais robustos. Por exemplo, escalonamento, implanta\u00e7\u00e3o personalizada usando um Dockerfile e <a href=\"https:\/\/docs.sevalla.com\/applications\/analytics\">an\u00e1lises abrangentes<\/a> que incluem dados em tempo real e hist\u00f3ricos.<\/p>\n<h2>Resumo<\/h2>\n<p>A estrutura clara, a sintaxe simples e os componentes globais do Astro tornam a cria\u00e7\u00e3o e a execu\u00e7\u00e3o de um aplicativo realmente f\u00e1cil. Sua natureza leve e o uso duplo de roteamento est\u00e1tico e din\u00e2mico aumentam drasticamente a capacidade de resposta do site, enquanto sua capacidade de cooperar com e ao lado de outras frameworks de JavaScript\u00a0o torna ainda mais atraente para programadores experientes.<\/p>\n<p>Se o seu objetivo \u00e9 criar um site rico em conte\u00fado que carregue rapidamente, conceda funcionalidade modular e forne\u00e7a gera\u00e7\u00e3o est\u00e1tica e din\u00e2mica, ent\u00e3o o Astro pode ser a escolha certa para voc\u00ea.<\/p>\n<p>Voc\u00ea pode hospedar seu site est\u00e1tico com a <a href=\"https:\/\/sevalla.com\/static-site-hosting\/\">Hospedagem de Site Est\u00e1tico da Kinsta<\/a> gratuitamente.<\/p>\n<p><em>O que voc\u00ea acha do gerador de sites est\u00e1ticos Astro? Voc\u00ea j\u00e1 o usou em algum projeto seu? Conte-nos na se\u00e7\u00e3o de coment\u00e1rios abaixo.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>O desenvolvimento web evoluiu significativamente desde os primeiros dias dos simples sites pessoais de p\u00e1gina \u00fanica. Hoje, temos \u00e0 disposi\u00e7\u00e3o uma variedade de linguagens, frameworks e\u00a0sistemas &#8230;<\/p>\n","protected":false},"author":283,"featured_media":60388,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1018,977,1009,971],"class_list":["post-60387","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-ferramentas-desenvolvimento-web","topic-frameworks-javascript","topic-geradores-sites-estaticos","topic-headless-cms"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>O Que \u00e9 Astro? Uma Introdu\u00e7\u00e3o ao Popular Gerador de Sites Est\u00e1ticos<\/title>\n<meta name=\"description\" content=\"Saiba tudo sobre o Astro, o popular gerador de sites est\u00e1ticos que permite criar sites ricos em conte\u00fado que funcionam rapidamente e sem problemas.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/pt\/blog\/astro-js\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"O Que \u00e9 Astro? Uma Introdu\u00e7\u00e3o ao Popular Gerador de Sites Est\u00e1ticos\" \/>\n<meta property=\"og:description\" content=\"Saiba tudo sobre o Astro, o popular gerador de sites est\u00e1ticos que permite criar sites ricos em conte\u00fado que funcionam rapidamente e sem problemas.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/astro-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-10-11T07:38:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-31T08:49:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/introduction-to-astro.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"3042\" \/>\n\t<meta property=\"og:image:height\" content=\"1521\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Maciek Palmowski\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Saiba tudo sobre o Astro, o popular gerador de sites est\u00e1ticos que permite criar sites ricos em conte\u00fado que funcionam rapidamente e sem problemas.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/introduction-to-astro.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Maciek Palmowski\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/astro-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/astro-js\/\"},\"author\":{\"name\":\"Maciek Palmowski\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/0cf8d8dc768875c83e582e95abbdd072\"},\"headline\":\"O Que \u00e9 Astro? Uma Introdu\u00e7\u00e3o ao Popular Gerador de Sites Est\u00e1ticos\",\"datePublished\":\"2023-10-11T07:38:36+00:00\",\"dateModified\":\"2023-10-31T08:49:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/astro-js\/\"},\"wordCount\":2649,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/astro-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/introduction-to-astro.jpg\",\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/astro-js\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/astro-js\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/astro-js\/\",\"name\":\"O Que \u00e9 Astro? Uma Introdu\u00e7\u00e3o ao Popular Gerador de Sites Est\u00e1ticos\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/astro-js\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/astro-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/introduction-to-astro.jpg\",\"datePublished\":\"2023-10-11T07:38:36+00:00\",\"dateModified\":\"2023-10-31T08:49:24+00:00\",\"description\":\"Saiba tudo sobre o Astro, o popular gerador de sites est\u00e1ticos que permite criar sites ricos em conte\u00fado que funcionam rapidamente e sem problemas.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/astro-js\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/astro-js\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/astro-js\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/introduction-to-astro.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/introduction-to-astro.jpg\",\"width\":3042,\"height\":1521},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/astro-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frameworks JavaScript\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/frameworks-javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"O Que \u00e9 Astro? Uma Introdu\u00e7\u00e3o ao Popular Gerador de Sites Est\u00e1ticos\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/pt\/#website\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/0cf8d8dc768875c83e582e95abbdd072\",\"name\":\"Maciek Palmowski\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/38664c477eb1e9b4ab2b97f4b0c81c8a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/38664c477eb1e9b4ab2b97f4b0c81c8a?s=96&d=mm&r=g\",\"caption\":\"Maciek Palmowski\"},\"description\":\"Maciek is a web developer working at Kinsta as a Development Advocate Analyst. After hours, he spends most of his time coding, trying to find interesting news for his newsletters, or drinking coffee.\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/author\/maciekpalmowski\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"O Que \u00e9 Astro? Uma Introdu\u00e7\u00e3o ao Popular Gerador de Sites Est\u00e1ticos","description":"Saiba tudo sobre o Astro, o popular gerador de sites est\u00e1ticos que permite criar sites ricos em conte\u00fado que funcionam rapidamente e sem problemas.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/pt\/blog\/astro-js\/","og_locale":"pt_PT","og_type":"article","og_title":"O Que \u00e9 Astro? Uma Introdu\u00e7\u00e3o ao Popular Gerador de Sites Est\u00e1ticos","og_description":"Saiba tudo sobre o Astro, o popular gerador de sites est\u00e1ticos que permite criar sites ricos em conte\u00fado que funcionam rapidamente e sem problemas.","og_url":"https:\/\/kinsta.com\/pt\/blog\/astro-js\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2023-10-11T07:38:36+00:00","article_modified_time":"2023-10-31T08:49:24+00:00","og_image":[{"width":3042,"height":1521,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/introduction-to-astro.jpg","type":"image\/jpeg"}],"author":"Maciek Palmowski","twitter_card":"summary_large_image","twitter_description":"Saiba tudo sobre o Astro, o popular gerador de sites est\u00e1ticos que permite criar sites ricos em conte\u00fado que funcionam rapidamente e sem problemas.","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/introduction-to-astro.jpg","twitter_creator":"@kinsta_pt","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Maciek Palmowski","Tempo estimado de leitura":"15 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/astro-js\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/astro-js\/"},"author":{"name":"Maciek Palmowski","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/0cf8d8dc768875c83e582e95abbdd072"},"headline":"O Que \u00e9 Astro? Uma Introdu\u00e7\u00e3o ao Popular Gerador de Sites Est\u00e1ticos","datePublished":"2023-10-11T07:38:36+00:00","dateModified":"2023-10-31T08:49:24+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/astro-js\/"},"wordCount":2649,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/astro-js\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/introduction-to-astro.jpg","inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/astro-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/astro-js\/","url":"https:\/\/kinsta.com\/pt\/blog\/astro-js\/","name":"O Que \u00e9 Astro? Uma Introdu\u00e7\u00e3o ao Popular Gerador de Sites Est\u00e1ticos","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/astro-js\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/astro-js\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/introduction-to-astro.jpg","datePublished":"2023-10-11T07:38:36+00:00","dateModified":"2023-10-31T08:49:24+00:00","description":"Saiba tudo sobre o Astro, o popular gerador de sites est\u00e1ticos que permite criar sites ricos em conte\u00fado que funcionam rapidamente e sem problemas.","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/astro-js\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/astro-js\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/astro-js\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/introduction-to-astro.jpg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/06\/introduction-to-astro.jpg","width":3042,"height":1521},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/astro-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Frameworks JavaScript","item":"https:\/\/kinsta.com\/pt\/topicos\/frameworks-javascript\/"},{"@type":"ListItem","position":3,"name":"O Que \u00e9 Astro? Uma Introdu\u00e7\u00e3o ao Popular Gerador de Sites Est\u00e1ticos"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/pt\/#website","url":"https:\/\/kinsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/0cf8d8dc768875c83e582e95abbdd072","name":"Maciek Palmowski","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/38664c477eb1e9b4ab2b97f4b0c81c8a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/38664c477eb1e9b4ab2b97f4b0c81c8a?s=96&d=mm&r=g","caption":"Maciek Palmowski"},"description":"Maciek is a web developer working at Kinsta as a Development Advocate Analyst. After hours, he spends most of his time coding, trying to find interesting news for his newsletters, or drinking coffee.","url":"https:\/\/kinsta.com\/pt\/blog\/author\/maciekpalmowski\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/60387","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/users\/283"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=60387"}],"version-history":[{"count":15,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/60387\/revisions"}],"predecessor-version":[{"id":64463,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/60387\/revisions\/64463"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/60387\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/60387\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/60387\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/60387\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/60387\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/60387\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/60387\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/60387\/translations\/es"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/60387\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/60388"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=60387"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=60387"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=60387"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}