{"id":67133,"date":"2023-06-22T09:38:20","date_gmt":"2023-06-22T07:38:20","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=67133&#038;preview=true&#038;preview_id=67133"},"modified":"2023-08-23T17:31:19","modified_gmt":"2023-08-23T15:31:19","slug":"astro-js","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/astro-js\/","title":{"rendered":"\u00bfQu\u00e9 es Astro? Introducci\u00f3n al Popular Generador de Sitios Est\u00e1ticos"},"content":{"rendered":"<p>El desarrollo web ha avanzado mucho desde los primeros d\u00edas de los sitios web personales est\u00e1ticos de una sola p\u00e1gina. Ahora tenemos una gran cantidad de lenguajes, frameworks y <a href=\"https:\/\/kinsta.com\/es\/blog\/sitema-de-gestion-de-contenido\/\">sistemas de gesti\u00f3n de contenidos<\/a> entre los que elegir, creados para satisfacer todos los nichos imaginables.<\/p>\n<p>Ah\u00ed es donde entra Astro, uno de los \u00faltimos chicos guays del bloque de frameworks de JavaScript.<\/p>\n<p>Creado por Fred K. Schott y un grupo de colaboradores, Astro se ha convertido r\u00e1pidamente en uno de los favoritos de la comunidad de desarrolladores. Es un framework todo en uno que funciona como un generador de sitios est\u00e1ticos.<\/p>\n<p>En este art\u00edculo, explicaremos por qu\u00e9 a tantos desarrolladores les gusta Astro y lo eligen frente a otras soluciones. Tambi\u00e9n te explicaremos c\u00f3mo crear un blog basado en markdown utilizando el 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>\u00bfQu\u00e9 Es 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=\"El logotipo de Astro en negro, que muestra \"astro\" en min\u00fasculas precedido de una \"A\" may\u00fascula estilizada con una peque\u00f1a llama debajo.\" width=\"600\" height=\"157\"><figcaption class=\"wp-caption-text\">Astro<\/figcaption><\/figure>\n<p><a href=\"https:\/\/kinsta.com\/es\/blog\/svelte-generador-de-sitios-estaticos\/#2-astro\">Astro<\/a>, o Astro.js, es un popular <a href=\"https:\/\/kinsta.com\/es\/blog\/generadores-de-sitios-estaticos\/\">generador de sitios est\u00e1ticos<\/a> concebido para quienes desean crear sitios web ricos en contenido que funcionen con rapidez y fluidez. Su naturaleza ligera, estructura intuitiva y suave curva de aprendizaje lo hacen atractivo para desarrolladores de todos los niveles de experiencia.<\/p>\n<p>A pesar de su peque\u00f1o tama\u00f1o, Astro viene con potentes herramientas que aumentan dr\u00e1sticamente la flexibilidad de tu sitio, ahorr\u00e1ndote horas en la gesti\u00f3n de contenidos y temas. Adem\u00e1s, ofrece a los desarrolladores la opci\u00f3n de trabajar con sus frameworks preferidos a la vez que con Astro \u2014 una perspectiva atractiva para los programadores experimentados que ya cuentan con un gran n\u00famero de favoritos.<\/p>\n<p>\u00c9stas son s\u00f3lo algunas de las formas en que Astro destaca entre la multitud:<\/p>\n<ul>\n<li><strong>Arquitectura en isla:<\/strong> Astro extrae tu interfaz de usuario (IU) en componentes m\u00e1s peque\u00f1os y aislados, conocidos como \u00abIslas Astro\u00bb, que pueden utilizarse en cualquier p\u00e1gina. El JavaScript no utilizado se sustituye por HTML ligero.<\/li>\n<li><strong>Cero JavaScript (por defecto):<\/strong> Aunque puedes utilizar todo el JavaScript que quieras para crear tus sitios web, Astro intentar\u00e1 desplegar cero JavaScript en producci\u00f3n transcribiendo tu c\u00f3digo por ti. Es un enfoque perfecto si lo que te interesa es la velocidad del sitio.<\/li>\n<li><strong>SSG y SSR incluidos:<\/strong> Astro comenz\u00f3 como un generador de sitios est\u00e1ticos, pero en el camino se convirti\u00f3 en un framework que utiliza tanto la generaci\u00f3n de sitios est\u00e1ticos (SSG) como la <a href=\"https:\/\/kinsta.com\/es\/blog\/arquitectura-aplicaciones-web\/#serversiderendered-architecture\">renderizaci\u00f3n del lado del servidor (SSR, Server-Side Rendering)<\/a>. Y puedes elegir qu\u00e9 p\u00e1ginas utilizar\u00e1n cada enfoque.<\/li>\n<li><strong>Agn\u00f3stico en cuanto a frameworks: <\/strong>Al utilizar Astro, puedes utilizar cualquier <a href=\"https:\/\/kinsta.com\/es\/blog\/bibliotecas-javascript\/\">framework JavaScript<\/a> que desees, incluso varios frameworks a la vez. (Hablaremos de esto con m\u00e1s detalle m\u00e1s adelante en este art\u00edculo)<\/li>\n<\/ul>\n<p>Adem\u00e1s, Astro est\u00e1 preparada para la tecnolog\u00eda edge, lo que significa que puede desplegarse en cualquier lugar, en cualquier momento y con facilidad.<\/p>\n<p>\u00bfEst\u00e1s listo para saber m\u00e1s? Entonces profundicemos en c\u00f3mo funciona Astro.<\/p>\n<h2>Estructura de Astro<\/h2>\n<p>Antes de seguir adelante, es importante entender c\u00f3mo est\u00e1 configurado Astro para que puedas utilizarlo con eficacia. Echemos un vistazo a la estructura b\u00e1sica de archivos de 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 puedes ver, la estructura en s\u00ed es bastante sencilla. Sin embargo, hay algunos puntos clave que debes recordar:<\/p>\n<ul>\n<li>La mayor parte de nuestro proyecto vive en la carpeta <strong>src<\/strong>. Puedes organizar tus componentes, dise\u00f1os y p\u00e1ginas en subcarpetas. Puedes a\u00f1adir carpetas adicionales para que tu proyecto sea m\u00e1s f\u00e1cil de navegar.<\/li>\n<li>La carpeta <strong>public<\/strong> es para todos los archivos que viven fuera del proceso de construcci\u00f3n, como fuentes, im\u00e1genes o un archivo <strong>robots.txt<\/strong>.<\/li>\n<li>La carpeta <strong>dist<\/strong> contendr\u00e1 todo el contenido que quieras desplegar en tu servidor de producci\u00f3n.<\/li>\n<\/ul>\n<p>A continuaci\u00f3n, vamos a profundizar en los principales componentes de Astro: componentes, dise\u00f1os y p\u00e1ginas.<\/p>\n<h3>Componentes<\/h3>\n<p>Los componentes son trozos de c\u00f3digo reutilizables que pueden incluirse en todo tu sitio web, de forma similar a <a href=\"https:\/\/kinsta.com\/es\/blog\/codigos-cortos-wordpress\/\">los shortcodes de WordPress<\/a>. Por defecto, tienen la extensi\u00f3n de archivo <strong>.astro<\/strong>, pero tambi\u00e9n puedes utilizar componentes que no sean de Astro creados con <a href=\"https:\/\/kinsta.com\/es\/blog\/vue-js\/\">Vue<\/a>, <a href=\"https:\/\/kinsta.com\/es\/blog\/generadores-de-sitios-estaticos-react\/#4-astro\">React<\/a>, Preact o <a href=\"https:\/\/kinsta.com\/es\/blog\/svelte-generador-de-sitios-estaticos\/#2-astro\">Svelte<\/a>.<\/p>\n<p>A continuaci\u00f3n se muestra un ejemplo del aspecto de un componente sencillo: en este caso, una etiqueta <code>div<\/code> con una clase que contiene un <code>h2<\/code>:<\/p>\n<pre><code class=\"language-html\"><!-- src\/components\/Kinsta.astro -->\n&lt;div class=\"kinsta_component\"&gt;\n    &lt;h2&gt;Hello, Kinsta!&lt;\/h2&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Y as\u00ed es como podemos incorporar ese componente a nuestro sitio:<\/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>Como se ha demostrado anteriormente, primero tienes que importar el componente. S\u00f3lo entonces podr\u00e1s incluirlo en la p\u00e1gina.<\/p>\n<p>Ahora es el momento de a\u00f1adir algunas propiedades a nuestro componente. Empecemos con una propiedad <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>Y as\u00ed es como se implementar\u00eda nuestra propiedad:<\/p>\n<pre><code class=\"language-jsx\">---\nimport KinstaComponent from ..\/components\/Kinsta.astro\n---\n\n&lt;div&gt;\n    <!-- This shows \"Good day\" -->\n    &lt;KinstaComponent title=\"Good day\"\/&gt;\n\n    <!-- This shows \"Hello\" -->\n    &lt;KinstaComponent \/&gt;\n &lt;\/div&gt;<\/code><\/pre>\n<p>Sencillo, \u00bfverdad?<\/p>\n<p>Como probablemente ya te habr\u00e1s dado cuenta, el verdadero poder de los componentes de Astro reside en su naturaleza global y reutilizable. Te permiten hacer cambios radicales en todo tu sitio editando solo unas pocas l\u00edneas de c\u00f3digo, lo que puede ahorrarte incontables horas que de otra forma emplear\u00edas en realizar tediosas y laboriosas sustituciones de texto.<\/p>\n<h3>Dise\u00f1os<\/h3>\n<p>Hablemos ahora de los dise\u00f1os. Adem\u00e1s de su funci\u00f3n habitual como estructura de la p\u00e1gina, los layouts en Astro tambi\u00e9n son componentes reutilizables, pero se utilizan como envoltorios de c\u00f3digo.<\/p>\n<p>Echa un vistazo a este ejemplo:<\/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>Observa la etiqueta <code>&lt;slot \/&gt;<\/code> aqu\u00ed. El elemento <code>&lt;slot \/&gt;<\/code> en Astro act\u00faa como marcador de posici\u00f3n para etiquetas y contenido HTML reales.<\/p>\n<p>Ve\u00e1moslo en acci\u00f3n.<\/p>\n<p>El siguiente c\u00f3digo muestra nuestra etiqueta <code>&lt;slot \/&gt;<\/code> sustituida por el c\u00f3digo que deseamos, todo ello envuelto por nuestro dise\u00f1o <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 puedes ver, nuestra etiqueta <code>&lt;slot \/&gt;<\/code> fue sustituida por el HTML que representa, que es:<\/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>Los dise\u00f1os, al igual que los componentes, te permiten reutilizar trozos de c\u00f3digo en todo tu sitio, simplificando el reto de actualizar tu contenido y dise\u00f1o globales.<\/p>\n<h3>P\u00e1ginas<\/h3>\n<p>Las p\u00e1ginas son un tipo especial de componente que se encarga del enrutamiento, la carga de datos y la creaci\u00f3n de plantillas.<\/p>\n<p>Astro utiliza enrutamiento basado en archivos para generar p\u00e1ginas, en lugar de enrutamiento din\u00e1mico. El m\u00e9todo basado en archivos no s\u00f3lo consume menos ancho de banda, sino que tambi\u00e9n te evita tener que importar tus componentes manualmente.<\/p>\n<p>Aqu\u00ed tienes un ejemplo de rutas 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>Con estas rutas, nuestra p\u00e1gina de inicio resultante se mostrar\u00eda como sigue:<\/p>\n<pre><code class=\"language-html\"><!-- src\/pages\/index.astro -->\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>Pero ya sabemos c\u00f3mo utilizar los dise\u00f1os, as\u00ed que vamos a convertir esto en algo que sea accesible 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>Ya est\u00e1, mucho m\u00e1s limpio.<\/p>\n<p>Hablaremos del enrutamiento en Astro con m\u00e1s detalle m\u00e1s adelante en este art\u00edculo, pero por ahora, pasemos a lo divertido: la construcci\u00f3n y personalizaci\u00f3n del sitio.<\/p>\n<h2>Personalizar y Ampliar Astro<\/h2>\n<p>\u00a1Es hora de aprender a personalizar tu sitio Astro! Vamos a utilizar colecciones Markdown, enrutamiento, manejo de im\u00e1genes y una integraci\u00f3n con React para construir y personalizar nuestro sitio est\u00e1tico.<\/p>\n<h3>Colecciones Markdown<\/h3>\n<p>Con la versi\u00f3n 2.0, Astro <a href=\"https:\/\/astro.build\/blog\/astro-2\/#automatic-type-safety-for-markdown--mdx\" target=\"_blank\" rel=\"noopener noreferrer\">introdujo<\/a> una forma de mantener el contenido Markdown mucho mejor que antes. Gracias a las colecciones, podemos estar seguros de que todos nuestros datos frontmatter est\u00e1n incluidos y tienen el tipo de asociaci\u00f3n correcto.<\/p>\n<p>\u00daltimamente, en la versi\u00f3n 2.5, han <a href=\"https:\/\/astro.build\/blog\/astro-250\/\" target=\"_blank\" rel=\"noopener noreferrer\">a\u00f1adido la posibilidad de gestionar tambi\u00e9n archivos JSON y YAML<\/a> como colecciones.<\/p>\n<p>\u00bfListo para ensuciarte las manos?<\/p>\n<p>En primer lugar, coloca todos tus art\u00edculos Markdown en la carpeta <strong>src\/content\/collection_name<\/strong>. Vamos a crear una colecci\u00f3n blog para este proyecto, as\u00ed que en nuestra demostraci\u00f3n, la carpeta ser\u00e1 <strong>src\/content\/blog<\/strong>.<\/p>\n<p>Ahora es el momento de definir todos los campos frontmatter necesarios en nuestro archivo <strong>src\/content\/config.ts<\/strong>. Nuestro blog necesitar\u00e1 lo siguiente:<\/p>\n<ul>\n<li><code>title<\/code> (cadena)<\/li>\n<li><code>tags<\/code> (array)<\/li>\n<li><code>publishDate<\/code> (hora)<\/li>\n<li><code>image<\/code> (cadena, opcional)<\/li>\n<\/ul>\n<p>As\u00ed es como se ve todo junto:<\/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>Y esto es lo que contiene nuestro archivo Markdown <strong>article-about-astro.md<\/strong>:<\/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>Es cierto que nuestro archivo Markdown no tiene nada de especial. Pero hay algo de magia oculta aqu\u00ed que se manifestar\u00e1 si cometemos un error tipogr\u00e1fico.<\/p>\n<p>Digamos, por ejemplo, que en lugar de escribir <code>publishDate<\/code>, escribimos accidentalmente <code>publishData<\/code>. En caso de un error ortogr\u00e1fico como \u00e9ste, Astro arrojar\u00e1 un error:<\/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>Sorprendente, \u00bfverdad? Esta ingeniosa funci\u00f3n puede ayudarnos a encontrar errores relacionados con el frontmatter en cuesti\u00f3n de segundos.<\/p>\n<p>Lo \u00faltimo que tenemos que a\u00f1adir es una p\u00e1gina que muestre nuestros datos. Vamos a crear un archivo en <strong>src\/page\/blog\/[slug].astro<\/strong> con el siguiente 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>Gracias a <code>getStaticPaths<\/code>, Astro crear\u00e1 todas las p\u00e1ginas est\u00e1ticas para cada entrada de la colecci\u00f3n de blogs.<\/p>\n<p>Lo \u00fanico que nos falta ahora es un listado de todos nuestros art\u00edculos:<\/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 puedes ver, el uso de colecciones simplifica notablemente esta tarea.<\/p>\n<p>Ahora, vamos a crear una colecci\u00f3n de tipos de datos. En primer lugar, debemos abrir de nuevo el archivo <strong>src\/content\/config.ts <\/strong>y a\u00f1adir una nueva colecci\u00f3n de datos:<\/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>Adem\u00e1s de crear una nueva colecci\u00f3n, tambi\u00e9n a\u00f1adimos la referencia al<strong> autor<\/strong> en la <strong>blogCollection<\/strong>.<\/p>\n<p>Es hora de crear un nuevo autor. Debemos crear un archivo llamado <strong>maciek-palmowski.json<\/strong> en el contenido\/autores.json:<\/p>\n<pre><code class=\"language-jsx\">{\n    \"fullName\": \"Maciek Palmowski\",\n    \"country\": \"Poland\"\n}<\/code><\/pre>\n<p>Lo \u00faltimo que nos queda es coger estos datos en nuestro Post. Para ello, tendremos que utilizar <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>Enrutamiento<\/h3>\n<p>Astro tiene dos modos de enrutamiento diferentes. Ya conocimos el primero \u2014enrutamiento est\u00e1tico (basado en archivos) \u2014 cuando tratamos anteriormente el tema de las p\u00e1ginas.<\/p>\n<p>Ahora vamos a centrarnos en el enrutamiento din\u00e1mico.<\/p>\n<p>Utilizando par\u00e1metros de ruta din\u00e1mica, puedes ordenar a un archivo de p\u00e1gina Astro que automatice la creaci\u00f3n de varias p\u00e1ginas con la misma estructura. Esto es \u00fatil cuando tienes muchas p\u00e1ginas de un tipo concreto (piensa en biograf\u00edas de autores, perfiles de usuarios, art\u00edculos de documentaci\u00f3n, etc.).<\/p>\n<p>En el siguiente ejemplo, trabajaremos en la generaci\u00f3n de p\u00e1ginas biogr\u00e1ficas para nuestros autores.<\/p>\n<p>En el modo de salida est\u00e1tico por defecto de Astro, estas p\u00e1ginas se generan en el momento de la construcci\u00f3n, lo que significa que debes predeterminar la lista de autores que obtienen un archivo correspondiente. En cambio, en el modo din\u00e1mico, las p\u00e1ginas se generan a petici\u00f3n de cualquier ruta que coincida.<\/p>\n<p>Si quieres pasar una variable como nombre de archivo, ponla entre corchetes:<\/p>\n<pre><code class=\"language-html\">pages\/blog\/[slug].astro -&gt; blog\/test, blog\/about-me <\/code><\/pre>\n<p>Vamos a profundizar en esto utilizando el c\u00f3digo de nuestro archivo <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>La ruta <code>getStaticPaths<\/code> es la responsable de generar todas las p\u00e1ginas est\u00e1ticas. Devuelve dos objetos:<\/p>\n<ul>\n<li><strong><code>params<\/code><\/strong><strong>:<\/strong> Se utiliza para rellenar los corchetes de nuestras URLs<\/li>\n<li><strong><code>props<\/code><\/strong><strong>:<\/strong> Todos los valores que pasamos a la p\u00e1gina<\/li>\n<\/ul>\n<p>Y con esto, la generaci\u00f3n de tu p\u00e1gina est\u00e1 solucionada.<\/p>\n<h3>Tratamiento de Im\u00e1genes<\/h3>\n<p>No podemos hablar de sitios web eficaces sin mencionar los <a href=\"https:\/\/kinsta.com\/es\/blog\/tipos-de-archivos-de-imagen\/\">formatos de imagen modernos<\/a>, los m\u00e9todos correctos de cambio de tama\u00f1o y la carga lenta.<\/p>\n<p>Por suerte, Astro tambi\u00e9n nos asiste en este aspecto. Gracias al paquete <code>@astrojs\/image<\/code>, podemos introducir todo lo anterior en cuesti\u00f3n de minutos.<\/p>\n<p>Tras <a href=\"https:\/\/docs.astro.build\/en\/guides\/integrations-guide\/image\/\">instalar el paquete<\/a>, accedemos a dos componentes: <code>Image<\/code> y <code>Picture<\/code>.<\/p>\n<p>El componente <code>Image<\/code> se utiliza para crear una etiqueta <code>&lt;img \/&gt;<\/code> optimizada. Aqu\u00ed tienes un ejemplo:<\/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>Del mismo modo, el componente <code>Picture<\/code> crea un componente <code>&lt;picture\/&gt;<\/code> optimizado:<\/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 defecto, Astro se ejecuta como un generador de sitios est\u00e1ticos. Esto significa que todo el contenido se convierte en p\u00e1ginas HTML est\u00e1ticas.<\/p>\n<p>Aunque \u00e9ste es un enfoque perfecto desde muchos puntos de vista (especialmente relacionados con la velocidad), a veces podemos preferir un enfoque m\u00e1s din\u00e1mico. Si quieres una p\u00e1gina de perfil distinta para cada usuario, por ejemplo, o si tienes miles de art\u00edculos en tu sitio, volver a renderizarlo todo cada vez llevar\u00eda demasiado tiempo.<\/p>\n<p>Por suerte, Astro tambi\u00e9n puede funcionar como un framework completamente renderizado en el lado del servidor, o en un modo h\u00edbrido entre ambos.<\/p>\n<p>Para activar el SSR en todo el sitio, tenemos que a\u00f1adir el siguiente c\u00f3digo a <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>Este es el enfoque est\u00e1ndar.<\/p>\n<p>El enfoque h\u00edbrido significa que, por defecto, todo se genera din\u00e1micamente, excepto las p\u00e1ginas con <code>export const prerender = true<\/code> a\u00f1adido.<\/p>\n<p>Con Astro 2.5, tambi\u00e9n existe la posibilidad de <a href=\"https:\/\/astro.build\/blog\/astro-250\/#static-by-default-hybrid-rendering-experimental\" target=\"_blank\" rel=\"noopener noreferrer\">establecer la renderizaci\u00f3n est\u00e1tica por defecto y seleccionar las rutas din\u00e1micas manualmente<\/a>.<\/p>\n<p>Gracias a ellas, podemos, por ejemplo, crear un sitio web totalmente generado est\u00e1ticamente con p\u00e1ginas din\u00e1micas de inicio de sesi\u00f3n y perfil. Genial, \u00bfverdad?<\/p>\n<p>Puedes leer m\u00e1s sobre esto en la <a href=\"https:\/\/docs.astro.build\/en\/guides\/server-side-rendering\/\" target=\"_blank\" rel=\"noopener noreferrer\">documentaci\u00f3n oficial<\/a>.<\/p>\n<h3>Integrar Otros Frameworks JavaScript<\/h3>\n<p>Otra caracter\u00edstica asombrosa de Astro te permite llevar contigo tu framework favorito y utilizarlo conjuntamente con Astro. Puedes mezclar Astro con React, Preact, Svelte, Vue, Solid o Alpine (para todas las integraciones, consulta la <a href=\"https:\/\/docs.astro.build\/en\/guides\/integrations-guide\/\" target=\"_blank\" rel=\"noopener noreferrer\">documentaci\u00f3n \u00abA\u00f1adir integraciones\u00bb de Astro<\/a>).<\/p>\n<p>Supongamos que queremos utilizar React. En primer lugar, tenemos que instalar la integraci\u00f3n ejecutando lo siguiente en <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-npm\/\">npm<\/a>:<\/p>\n<pre><code class=\"language-jsx\">npx astro add react<\/code><\/pre>\n<p>Ahora que React se ha integrado, podemos crear un componente React. En nuestro caso, ser\u00e1 el componente contador en <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, pero no menos importante, tenemos que colocar el contador en nuestra p\u00e1gina con el siguiente 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>Y voil\u00e0: Tu componente React se ha integrado perfectamente en tu sitio.<\/p>\n<h2>C\u00f3mo Desplegar Astro con Kinsta<\/h2>\n<p>Ahora es el momento de llevar nuestro sitio Astro a la web. Por suerte, Kinsta es el <a href=\"https:\/\/sevalla.com\/application-hosting\/\">alojamiento perfecto para un despliegue r\u00e1pido y sin complicaciones<\/a>.<\/p>\n<p>Empieza por crear un repositorio GitHub para los archivos de tu sitio. Si no est\u00e1s listo para usar tus propios archivos, puedes clonar esta <a href=\"https:\/\/github.com\/kinsta\/hello-world-astro\">plantilla Astro para sitios de inicio<\/a> que cre\u00f3 nuestro equipo.<\/p>\n<figure style=\"width: 1400px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/05\/kinsta-astro-starter-repo.png\" alt=\"Una parte del repositorio de GitHub para el sitio de inicio Astro de Kinsta, que muestra una imagen del logotipo blanco \"A\" de Astro flotando sobre un fondo rosa y morado, seguido de \"Kinsta - Hello World - Static Site With Astro\".\" width=\"1400\" height=\"1144\"><figcaption class=\"wp-caption-text\">Repo de GitHub de la plantilla Astro de Kinsta<\/figcaption><\/figure>\n<p>Una vez que tu repositorio est\u00e9 listo, <a href=\"https:\/\/my.kinsta.com\/?lang=es\">inicia sesi\u00f3n en MyKinsta<\/a>, selecciona <strong>Aplicaciones<\/strong> a la izquierda y, a continuaci\u00f3n, elige <strong>Aplicaci\u00f3n<\/strong> en el desplegable morado <strong>A\u00f1adir servicio<\/strong>.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/05\/mykinsta-application-add-service.png\" alt=\"El panel de MyKinsta se abri\u00f3 en la secci\u00f3n \"Aplicaciones\", que muestra un desplegable morado \"A\u00f1adir servicio\" con dos opciones: \"Aplicaci\u00f3n\" y \"Base de datos\".\" width=\"1600\" height=\"770\"><figcaption class=\"wp-caption-text\">A\u00f1adir una aplicaci\u00f3n en MyKinsta<\/figcaption><\/figure>\n<p>El \u00faltimo paso consiste en proporcionar a Kinsta los detalles de tu creaci\u00f3n y despliegue.<\/p>\n<p>La mayor\u00eda de lo que se te preguntar\u00e1, como el<strong> Nombre del proceso<\/strong> y el <strong>M\u00e9todo de pago<\/strong>, tendr\u00e1 respuestas obvias o sencillas. Ten en cuenta que puedes dejar vac\u00edo el campo <strong>Comando de inicio<\/strong> si lo deseas; Kinsta asignar\u00e1 autom\u00e1ticamente <code>npm start<\/code> como comando.<\/p>\n<p>Si no est\u00e1s seguro de c\u00f3mo responder a cualquier otra pregunta, consulta la documentaci\u00f3n de Kinsta para obtener <a href=\"https:\/\/docs.sevalla.com\/applications\/get-started\/add-an-application\">orientaci\u00f3n espec\u00edfica para cada campo<\/a> y <a href=\"https:\/\/docs.sevalla.com\/templates\/overview\">ejemplos de despliegue de Astro<\/a>. Tambi\u00e9n puedes consultar la <a href=\"https:\/\/docs.astro.build\/en\/guides\/deploy\/kinsta\/\">gu\u00eda de despliegue de Astro en Kinsta<\/a>.<\/p>\n<p>Cuando hayas terminado de introducir los detalles de tu construcci\u00f3n, haz clic en el bot\u00f3n <strong>Confirmar m\u00e9todo de pago<\/strong> para inicializar tu construcci\u00f3n.<\/p>\n<p>\u00a1Y ya est\u00e1! Ya tienes un sitio est\u00e1tico en producci\u00f3n y en pleno funcionamiento creado con el framework 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=\"Una p\u00e1gina oscura con el logotipo de Kinsta en blanco en el centro sobre las palabras \"Bienvenido a tu nuevo sitio Astro\", seguida de dos filas de tarjetas con las etiquetas \"Sitio web oficial de Astro\", \"Documentaci\u00f3n de Astro\", \"Download Starter\" y \"Kinsta GitHub\".\" width=\"1600\" height=\"1266\"><figcaption class=\"wp-caption-text\">Nuestra p\u00e1gina de inicio Astro en vivo<\/figcaption><\/figure>\n<p>Puedes encontrar tu URL en producci\u00f3n y otros detalles del despliegue en <strong>Despliegues<\/strong> en tu cuenta MyKinsta.<\/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-deployment-mykinsta.png\" alt=\"La pantalla \"Despliegues\" de MyKinsta muestra los detalles y el historial del despliegue de nuestro sitio Astro.\" width=\"1600\" height=\"987\"><figcaption class=\"wp-caption-text\">Un despliegue Astro con \u00e9xito<\/figcaption><\/figure>\n<h2>Resumen<\/h2>\n<p>La estructura clara, la sintaxis sencilla y los componentes globales de Astro hacen que crear y ejecutar una aplicaci\u00f3n sea realmente f\u00e1cil. Su naturaleza ligera y el uso dual de enrutamiento est\u00e1tico y din\u00e1mico aumentan dr\u00e1sticamente la capacidad de respuesta del sitio, mientras que su capacidad para cooperar con y junto a otros frameworks JavaScript lo hace a\u00fan m\u00e1s atractivo para los programadores experimentados.<\/p>\n<p>Si tu objetivo es crear un sitio rico en contenidos que cargue r\u00e1pidamente, garantice una funcionalidad modular y proporcione una generaci\u00f3n tanto est\u00e1tica como din\u00e1mica, Astro podr\u00eda ser la opci\u00f3n adecuada para ti.<\/p>\n<p>Puedes alojar tu sitio web est\u00e1tico con el <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Alojamiento de Aplicaciones de Kinsta de forma gratuita<\/a>, y si te gusta, pasa a nuestro plan <a href=\"https:\/\/sevalla.com\/pricing\/\">Nivel Hobby<\/a>.<\/p>\n<p>\u00bfQu\u00e9 opinas del generador de sitios est\u00e1ticos Astro? \u00bfLo has utilizado en alg\u00fan proyecto? H\u00e1znoslo saber en la secci\u00f3n de comentarios.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>El desarrollo web ha avanzado mucho desde los primeros d\u00edas de los sitios web personales est\u00e1ticos de una sola p\u00e1gina. Ahora tenemos una gran cantidad de &#8230;<\/p>\n","protected":false},"author":283,"featured_media":67134,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1296,1328,1290],"class_list":["post-67133","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-frameworks-javascript","topic-generadores-sitios-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>\u00bfQu\u00e9 es Astro? Introducci\u00f3n al Popular Generador de Sitios Est\u00e1ticos - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Aprende todo sobre Astro, el popular generador de sitios est\u00e1ticos que te permite crear sitios web ricos en contenido que funcionan de forma r\u00e1pida y fluida.\" \/>\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\/es\/blog\/astro-js\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u00bfQu\u00e9 es Astro? Introducci\u00f3n al Popular Generador de Sitios Est\u00e1ticos\" \/>\n<meta property=\"og:description\" content=\"Aprende todo sobre Astro, el popular generador de sitios est\u00e1ticos que te permite crear sitios web ricos en contenido que funcionan de forma r\u00e1pida y fluida.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/astro-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-22T07:38:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-23T15:31:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/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=\"Aprende todo sobre Astro, el popular generador de sitios est\u00e1ticos que te permite crear sitios web ricos en contenido que funcionan de forma r\u00e1pida y fluida.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/introduction-to-astro.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Maciek Palmowski\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\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\/es\/blog\/astro-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/astro-js\/\"},\"author\":{\"name\":\"Maciek Palmowski\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/0cf8d8dc768875c83e582e95abbdd072\"},\"headline\":\"\u00bfQu\u00e9 es Astro? Introducci\u00f3n al Popular Generador de Sitios Est\u00e1ticos\",\"datePublished\":\"2023-06-22T07:38:20+00:00\",\"dateModified\":\"2023-08-23T15:31:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/astro-js\/\"},\"wordCount\":2724,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/astro-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/introduction-to-astro.jpg\",\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/astro-js\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/astro-js\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/astro-js\/\",\"name\":\"\u00bfQu\u00e9 es Astro? Introducci\u00f3n al Popular Generador de Sitios Est\u00e1ticos - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/astro-js\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/astro-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/introduction-to-astro.jpg\",\"datePublished\":\"2023-06-22T07:38:20+00:00\",\"dateModified\":\"2023-08-23T15:31:19+00:00\",\"description\":\"Aprende todo sobre Astro, el popular generador de sitios est\u00e1ticos que te permite crear sitios web ricos en contenido que funcionan de forma r\u00e1pida y fluida.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/astro-js\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/astro-js\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/astro-js\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/introduction-to-astro.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/introduction-to-astro.jpg\",\"width\":3042,\"height\":1521},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/astro-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Headless CMS\",\"item\":\"https:\/\/kinsta.com\/es\/secciones\/headless-cms\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"\u00bfQu\u00e9 es Astro? Introducci\u00f3n al Popular Generador de Sitios Est\u00e1ticos\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/es\/#website\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"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\/es\/#\/schema\/person\/0cf8d8dc768875c83e582e95abbdd072\",\"name\":\"Maciek Palmowski\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/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\/es\/blog\/author\/maciekpalmowski\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u00bfQu\u00e9 es Astro? Introducci\u00f3n al Popular Generador de Sitios Est\u00e1ticos - Kinsta\u00ae","description":"Aprende todo sobre Astro, el popular generador de sitios est\u00e1ticos que te permite crear sitios web ricos en contenido que funcionan de forma r\u00e1pida y fluida.","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\/es\/blog\/astro-js\/","og_locale":"es_ES","og_type":"article","og_title":"\u00bfQu\u00e9 es Astro? Introducci\u00f3n al Popular Generador de Sitios Est\u00e1ticos","og_description":"Aprende todo sobre Astro, el popular generador de sitios est\u00e1ticos que te permite crear sitios web ricos en contenido que funcionan de forma r\u00e1pida y fluida.","og_url":"https:\/\/kinsta.com\/es\/blog\/astro-js\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2023-06-22T07:38:20+00:00","article_modified_time":"2023-08-23T15:31:19+00:00","og_image":[{"width":3042,"height":1521,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/introduction-to-astro.jpg","type":"image\/jpeg"}],"author":"Maciek Palmowski","twitter_card":"summary_large_image","twitter_description":"Aprende todo sobre Astro, el popular generador de sitios est\u00e1ticos que te permite crear sitios web ricos en contenido que funcionan de forma r\u00e1pida y fluida.","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/introduction-to-astro.jpg","twitter_creator":"@Kinsta_ES","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Maciek Palmowski","Tiempo de lectura":"15 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/astro-js\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/astro-js\/"},"author":{"name":"Maciek Palmowski","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/0cf8d8dc768875c83e582e95abbdd072"},"headline":"\u00bfQu\u00e9 es Astro? Introducci\u00f3n al Popular Generador de Sitios Est\u00e1ticos","datePublished":"2023-06-22T07:38:20+00:00","dateModified":"2023-08-23T15:31:19+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/astro-js\/"},"wordCount":2724,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/astro-js\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/introduction-to-astro.jpg","inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/es\/blog\/astro-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/astro-js\/","url":"https:\/\/kinsta.com\/es\/blog\/astro-js\/","name":"\u00bfQu\u00e9 es Astro? Introducci\u00f3n al Popular Generador de Sitios Est\u00e1ticos - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/astro-js\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/astro-js\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/introduction-to-astro.jpg","datePublished":"2023-06-22T07:38:20+00:00","dateModified":"2023-08-23T15:31:19+00:00","description":"Aprende todo sobre Astro, el popular generador de sitios est\u00e1ticos que te permite crear sitios web ricos en contenido que funcionan de forma r\u00e1pida y fluida.","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/astro-js\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/astro-js\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/astro-js\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/introduction-to-astro.jpg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/06\/introduction-to-astro.jpg","width":3042,"height":1521},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/astro-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Headless CMS","item":"https:\/\/kinsta.com\/es\/secciones\/headless-cms\/"},{"@type":"ListItem","position":3,"name":"\u00bfQu\u00e9 es Astro? Introducci\u00f3n al Popular Generador de Sitios Est\u00e1ticos"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/es\/#website","url":"https:\/\/kinsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","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\/es\/#\/schema\/person\/0cf8d8dc768875c83e582e95abbdd072","name":"Maciek Palmowski","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/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\/es\/blog\/author\/maciekpalmowski\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/67133","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/users\/283"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/comments?post=67133"}],"version-history":[{"count":8,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/67133\/revisions"}],"predecessor-version":[{"id":67650,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/67133\/revisions\/67650"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/67133\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/67133\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/67133\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/67133\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/67133\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/67133\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/67133\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/67133\/translations\/es"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/67133\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/67134"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=67133"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=67133"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=67133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}