Rutas Dinámicas en Astro: Creación y Configuración Paso a Paso

Clase 16 de 25 • Curso de Creación de Páginas Web con Astro

Resumen

¿Cómo integrar rutas dinámicas en Astro?

Incorporar rutas dinámicas en tu proyecto de Astro puede parecer complejo, pero es esencial para manejar contenido variable y ofrecer experiencias personalizadas a los usuarios. Aquí te guiaremos para que puedas implementar estas rutas exitosamente. ¡Acompáñanos en este aprendizaje!

¿Cómo crear un archivo de ruta dinámica?

El primer paso para manejar rutas dinámicas en Astro es crear un archivo especial en tu proyecto. Este archivo tendrá una estructura particular que le indicará al programa cómo manejar estas rutas.

Creación del archivo: Navega a la carpeta Pages dentro de Posts en tu proyecto y crea un nuevo archivo llamado [...Slug].astro.
```
/pages/posts/[...Slug].astro
```
Estructura del archivo: El uso de corchetes y el término Slug ayudan a identificar que tratarás rutas dinámicas. Este archivo te permitirá leer y renderizar contenido dinámico desde tu colección de datos.

¿Cómo maneja Astro las rutas dinámicas?

Astro, al estar diseñado para sitios web estáticos, no maneja rutas dinámicas por defecto. Necesitamos definirlas explícitamente usando algunas funciones especiales.

GetStaticPaths: Es una función clave que permite a Astro identificar qué rutas dinámicas existen. Esto se especifica en el archivo Slug que acabamos de crear.
Implementación de lógica: Importa Get Collection desde AstroContent para llamar a los datos que existen en tus colecciones.
```
import { GetCollection } from 'astro:content';
```
Creación de la función de rutas:
```
export async function GetStaticPaths() {
  const posts = await GetCollection('tips');
  return posts.map(post => ({
    params: { slug: post.slug },
    props: { post }
  }));
}
```
- Post: Array que contiene los datos obtenidos de la colección tips.
- Slug: Identificador único que, al hacer coincidir con las entradas de la colección, permitirá la visualización del contenido específico.

¿Cómo garantizar que el contenido se renderice correctamente?

Con la función y la lógica establecidas, ahora puedes asegurarte de que Astro renderice correctamente el contenido deseado.

Renderización del contenido:

const post = Astro.props.post;
const content = await post.render();

Mostrar contenido: Utiliza content dentro de tu lógica de componentes para que aparezca en la página.
Correcciones comunes: Verifica que no existan errores de tipado, como usar Content con mayúscula, que podrían impedir que el contenido se renderice adecuadamente.

Ejecución de pruebas

Después de guardar las modificaciones, es importante probar la aplicación recargando la página. Verifica que el error 404 desaparezca y que el contenido deseado se muestre correctamentemente.

Diseño del contenido presentado

Si bien ahora el contenido se renderiza, puede que no tenga el diseño esperado. Aún no hemos creado un template que le dé estilo al contenido presentado. Considera añadir un template para mejorar la presentación visual y crear una experiencia más coherente y atractiva para el usuario.

Astro permite grandes posibilidades al manejar rutas dinámicas, y estamos aquí para guiarte en cada paso del camino. ¡No te pierdas la próxima lección donde crearemos un elegante template para nuestro contenido! Aprende, experimenta y sigue adelante con astro.

Emmanuel Rodríguez

student•

Enrutamiento: rutas dinámicas

Para Astro, una ruta dinámica será de aquella posea por nombre un parámetro para generar varias páginas coincidentes. . Por ejemplo, ./src/pages/authors/[author].astro genera una ruta dinámica para cada autor. .

Modo estático SSG

✨ Concepto clave En la generación dinámica por rutas estáticas (Server-Site-Generation, SSG), se generan páginas al momento de compilación del proyecto basados en una lista de elementos.

. En este modo de despliegue, Astro requiere de una referencia para generar la rutas. Por ello, se requiere de una función getStaticPaths() para indicar que dicha página será procesada y resuelta en tiempo de compilación.

---
export function getStaticPaths() {
  return [
    {params: {dog: 'clifford'}},
    {params: {dog: 'rover'}},
    {params: {dog: 'spot'}},
  ];
}

const { dog } = Astro.params;
---
<div>Good dog, {dog}!</div>

En el ejemplo, vemos la función getStaticPaths() que tomará una lista como referencia para la generación de rutas a partir del directorio dogs . . [perro].astro define el parámetro dog dinámico por nombre del archivo, por lo que los objetos devueltos por getStaticPaths() deben incluir dog para resolver la ruta. . Adicionalmente, podemos acceder a este parámetro usando Astro.params como metadata a lo largo de la colección de la ruta. .

✨ Concepto clave Podemos generar mediante SSG, contenido por directorios al definir:

./src/pages/[lang]-[version]/info.astro - como ruta

Como código
---
export function getStaticPaths () {
 return [
    {params: {lang: 'en', version: 'v1'}},
    {params: {lang: 'fr', version: 'v2'}},
  ];
}

const { lang, version } = Astro.params;
---
...

Parámetros destructurados (Rest Parameters)

Con este modo de generación de rutas, podemos emplear una mayor flexibilidad al definir nuestras estructuras para mezclar por nombre o atributos un conjunto de metadata. . Por ejemplo:

---
export function getStaticPaths() {
  return [
		{
		  author: 'robert-martin',
		  tag: 'software',
		  title: 'clean-code/introduction',
		}
  ]
}

const { path } = Astro.params;
---
...

Generando una estructura de rutas de la siguiente forma: ./src/pages/robert-martin/software/clean-code/introduction.asto

✨ Concepto clave Es posible omitir la extensión para que dicha destructuración dicte dicho requerimiento:

./src/pages/[author]/[tag]/[...file] para la ruta

Como código
---
export function getStaticPaths() {
  return [
		{
		  author: 'robert-martin',
		  tag: 'software',
		  file: 'clean-code/introduction.astro',
		}
  ]
}

const { path } = Astro.params;
---
...

Ameth Ordoñez Erazo

student•

El parámetro [...slug] se conoce como Parámetro Rest, y ayuda a darle flexibilidad al enrutamiento en Astro. En el archivo [...slug].astro, que se renderiza de forma dinámica, siempre se debe devolver en la sección de JavaScript un objeto con las siguientes claves:

export async function getStaticPaths() {
/*
.
.
*/
return {
      params: { slug },
      props: { title, text }, <------ Aqui pueden ir todas las props que necesites
    };
}
//Fijense que aquí ya puedo sacar las props que retorna la función anterior.
const { title, text } = Astro.props;

Si estoy usando archivos Markdown, usaría el componente <Content /> como lo hizo el profesor en la clase. Si estoy usando archivos en HTML, podría usarlo de esta forma:

<html>
  <head>
    <title>{title}</title>
  </head>
  <body>
    <h2>{title}</h2>
    <p>{text}</p>
  </body>
</html>

Luis Herrera

student•

Para solucionar el problema del enrutamiento hay que colocar y corregir las siguientes líneas de código.

En el archivo Card.astro hay que colocar el slug en corchetes de array [], así <a href={/posts/${ \[slug] }}> dado que slug realiza un mapeo a un array o colección "tips"
En el archivo index.astro principal también hay que llamar a slug={item?.frontmatter?.slug} dado que también es una props de la card

Melissa Monroy Moreno

student•

Mil gracias, funcionó perfecto!!!!

Carlos Alberto Granada Vasquez

student•

---
import { type CollectionEntry, getCollection } from 'astro:content';


import { render } from 'astro:content';

interface Props {
	entry: CollectionEntry<'blog'>;
}

// This is a dynamic route that generates a page for every Markdown file in src/content/
// Read more about dynamic routes and this `getStaticPaths` function in the Astro docs:
// https://docs.astro.build/en/core-concepts/routing/#dynamic-routes
export async function getStaticPaths() {
	const blogs = await getCollection('blog');
	return blogs.map((entry) => ({
		params: { slug: entry.id },
		props: { entry },
	}));
}

const { entry } = Astro.props;
const { Content } = await render(entry);
---

<Content />

Ramon Najera

student•

Hola al final no he podido realizar la parte de las rutas dinámicas, me sigue apareciendo el error 404.

Ya descargué los Archivos de la clase y aun con estos archivos no me funciono.

¿A alguien le pasa lo mismo? ¿Sabrán por qué será?

Es que no me muestra ningún error, nada más no funciona.

Gracias de antemano.

Omar Daniel Centeno

student•

¿Pudiste resolver el problema? Me pasó algo similar y es cuestión de revisar algún typo que se esconde. Puedes compartirnos tú código para revisar.

Jesús Díaz

student•

en astro no hay manera de colocar loaders o skeleton como es en el caso de react usando useState?

Platzi

student•

No es posible colocar loaders o skeleton en Astro utilizando useState, ya que Astro no es un framework de JavaScript como React. Astro es un generador de sitios estáticos que utiliza componentes web y no tiene un estado interno como useState. Sin embargo, puedes utilizar CSS para crear animaciones o transiciones que simulen un loader o skeleton en Astro.

Brayan Lopez

student•

Aca yo obtuve un error

property 'render' does not exist on type never pero se arreglo después de reiniciar el proyecto.

Alvaro David Mora Sepúlveda

student•

Así me quedó al final el archivo [...slug].astro:

---
import { getCollection } from 'astro:content';
import { render } from 'astro:content';

export async function getStaticPaths() {
  const posts = await getCollection('tips');
  return posts.map((post: any) => ({
    params: { slug: post.slug},
    props: post ,
  }));
}

const post = Astro.props;
const { Content } = await render(post);
---

<Content />

Mario Adrián Chavez

student•

Una pregunta, entendí las rutas dinámicas para mostrar cierto contenido, en el caso del video se hace referencia a los archivos md, pero por ejemplo en las rutas estaticas me quedo la duda siguiente: ¿Por qué si tene que poner el mismo archivo en la carpeta post para hacer un link a otra página? No bastaría con una simple referencia como se hacer en html

Germán Arevalo Jerez

student•

Creo que es porque se quería que en la ruta quedara posts. Y no habría ninguna relación

Maximiliano Vera

student•

alguien sabe a que se debe esto. No puedo avanzar

Oscar Barajas Tavares

Team Platzi•

Hola Maximiliano, tienes un repositorio, no me deja ver el error completo o me compartes otra captura de pantalla.

Maximiliano Vera

student•

Aca le dejo el repositorio lo unico que he cambiado con respecto a lo que usted tiene es que no tengo el componente hero y cuando salta ese error en consola muestra un error 502

Carlos Rubén Díaz Gutiérrez

student•

Hay un problema con esta clase, ya que los slugs no funcionan. Estos se muestran como undefined.

Guillermo Prituluk

student•

Carlos Rubén Díaz Gutiérrez

student•

Hola Guillermo. Así es como lo tengo y nada.

Claudio Alexis Sepúlveda Valdebenito

student•

Hola a todos, así pude solucionar el problema de las rutas ya que no viene el slug:

Favor comentenme las suyas!

Carlos Eduardo Macias Garza

student•

Hola buen dia maestro, no me ha quedado lo suficiente claro, y sigo la actvidad como en el video pero no se si haya cambiado de version que no logre dar con la respuesta de este punto. Selecciono una ruta y aparce undefined

dejo un link de mi repositorio

https://github.com/maciasgCarlos/astrobuildcurso.git

Guillermo Prituluk

student•

Harold Braulio Chirinos Timoteo

student•

alguna sugerencia o solución al enrutamiento, ya que seguí los pasos y puse el código pero no siempre me arroja el error 404.

---import { getCollection } from "astro:content"; export async function getStaticPaths() { const posts = await getCollection("tips"); return posts.map((post) => ({ params: { slug: post.slug }, props: post, }));} const post = Astro.props;const { Content } = await post.render();--- <Content />

Guillermo Prituluk

student•

Guillermo Prituluk

student•

El problema de la ruta es por que estamos buscando en post.data.slug y esto nos regresa un undefined, ya que en data no existe slug, si no que esta por fuera. Esto se puede ver gracias al console.log(posts) que hicimos.

Dany R

student•

getStaticPaths()

Esta función debe retornar una lista de rutas que Astro pre-renderizará en el momento de la construcción del sitio.
Al implementar getStaticPaths, esta debe exportarse desde el archivo de la página dinámica [ejem].astro
Durante la fase de construcción, Astro invoca getStaticPaths para cada ruta dinámica, genera cada página estática basándose en los paths retornados y los parámetros correspondientes.
Esta función debe retornar un array de objetos, donde cada objeto tiene una propiedad params que define los parámetros de la ruta, tambien puede retornar props (metadatos)
Para desestrucutrar los parametros o props de la funcion getStaticPaths, se usa const { path } = Astro.params; paths, puede tomar cualquier otro nombre

Diego Andres Jimenez Quintero

student•

// Importa la función getCollection desde el módulo "astro:content"
import { getCollection } from "astro:content";

// Define una función asíncrona para obtener las rutas estáticas
export async function getStaticPaths() {
  // Obtiene una colección de datos llamada "tips"
  const posts = await getCollection("tips");

  // Mapea los datos y devuelve un array de objetos con propiedades "params" y "props"
  return posts.map((post) => ({
    params: { slug: post.slug }, // Cada objeto tiene un parámetro "slug"
    props: post, // Cada objeto tiene todas las propiedades del post
  }));
}

// Asigna el objeto "props" de Astro a la variable "post"
const post = Astro.props;

// Utiliza la función "render" del objeto "post" para obtener la propiedad "Content"
const { Content } = await post.render();

// Finalmente, renderiza el componente "Content"
<Content />