src/pages y el enrutado por ficheros
El corazón del routing de Astro: cada fichero en src/pages es una ruta. Cómo index marca la raíz de cada carpeta, cómo las subcarpetas construyen los segmentos de la URL y por qué la estructura del sistema de ficheros es, literalmente, el mapa de tu sitio.
En casi todos los frameworks tradicionales las rutas se declaran en una tabla: un fichero central que asocia URLs a manejadores. Astro elimina esa tabla. En su lugar, el sistema de ficheros es la tabla de rutas: cada archivo que colocas en src/pages se convierte, sin más ceremonia, en una URL navegable. Entender esta equivalencia —fichero igual a ruta— es entender el eje entero sobre el que gira la navegación de un proyecto.
- Comprender la equivalencia entre la ruta de un fichero en
src/pagesy su URL pública. - Usar los ficheros
indexpara representar la raíz de cada carpeta. - Construir jerarquías de URL anidando subcarpetas dentro de
src/pages. - Reconocer el determinismo del enrutado por ficheros y sus implicaciones de diseño.
El sistema de ficheros como tabla de rutas
En un framework de enrutado imperativo declaras cada ruta a mano: un array de objetos, un fichero de configuración, una llamada por endpoint. Astro invierte el planteamiento. No hay tabla de rutas que mantener porque la carpeta src/pages es la tabla: Astro la recorre en el build y, por cada fichero que encuentra, deriva una URL a partir de su ruta relativa. La correspondencia es directa y mecánica —quita el prefijo src/pages, quita la extensión, y lo que queda es la URL—.
src/pages/index.astroproduce la ruta raíz,/.src/pages/about.astroproduce/about.src/pages/contacto.astroproduce/contacto.
Esta equivalencia tiene una consecuencia liberadora: para saber qué URL sirve un fichero no consultas ninguna configuración, solo miras dónde vive. Y a la inversa, para saber qué fichero atiende una URL reconstruyes la ruta en tu cabeza. El mapa y el territorio coinciden.
Bajo el capó, Astro recorre src/pages durante el build y compila un manifiesto de rutas: la lista de todas las URLs que tu sitio conoce, derivada del árbol de ficheros. No lo escribes ni lo mantienes tú; se regenera en cada compilación a partir de la única fuente de verdad que hay, la carpeta. Por eso no existe el clásico desajuste entre la ruta declarada y el fichero que la sirve: la declaración es el fichero. Cuando en la próxima lección veas los distintos tipos de página, recuerda que todos alimentan este mismo manifiesto.
Conviene repetir la regla porque es la fuente de la mayoría de sorpresas: únicamente los ficheros bajo src/pages generan rutas. Un componente en src/components o una utilidad en src/lib jamás tendrán URL, por muy completos que sean. Se importan; no se visitan. La carpeta src/pages es la frontera exacta entre lo navegable y lo interno.
index: la raíz de cada carpeta
El nombre index recibe un trato especial, heredado de la web clásica: representa la raíz de la carpeta que lo contiene, no un segmento propio. Por eso src/pages/index.astro no sirve /index sino /. Esta regla se propaga a cualquier profundidad.
src/pages/blog/index.astrosirve/blog, no/blog/index.src/pages/docs/guia/index.astrosirve/docs/guia.
Aquí aparece una de las decisiones de diseño más frecuentes: para la portada de una sección, ¿usas blog.astro o blog/index.astro? Ambas sirven /blog, pero comunican intenciones distintas. blog/index.astro anuncia que habrá hermanos —blog/[slug].astro, blog/archivo.astro— y agrupa la sección en su propia carpeta. blog.astro sugiere una página aislada sin descendencia. Elegir bien no cambia la URL, pero sí la legibilidad del árbol.
src/pages/
├─ index.astro -> /
├─ about.astro -> /about
└─ blog/
├─ index.astro -> /blog
├─ primero.astro -> /blog/primero
└─ segundo.astro -> /blog/segundo
El anidamiento no tiene un límite práctico: src/pages/docs/api/v2/index.astro sirve /docs/api/v2 sin que Astro pestañee. La profundidad del árbol es la profundidad de tus URLs, así que conviene que ambas reflejen la jerarquía real del contenido y no accidentes de organización. Una URL profunda cuenta una historia —dónde encaja esta página dentro del todo— y esa historia debería ser cierta.
El trato especial de index no lo inventó Astro: viene de los servidores web clásicos, donde index.html era el fichero servido por defecto al pedir una carpeta. Astro conserva esa convención porque es familiar y expresiva. Reconocer que es herencia de la web, y no magia del framework, te ayuda a predecir el comportamiento sin memorizar reglas nuevas: si algo te suena de cómo funcionan los servidores de siempre, probablemente funcione igual aquí.
Subcarpetas y la jerarquía de URLs
Si index marca la raíz de una carpeta, las subcarpetas construyen los segmentos intermedios de la dirección. Cada nivel de anidamiento en src/pages añade un tramo separado por barras en la URL final. La jerarquía del sistema de ficheros se proyecta, tramo a tramo, sobre la jerarquía de la URL.
flowchart TD P[src pages] --> I[index] P --> A[about] P --> B[blog] B --> BI[blog index] B --> BP[blog post] I --> IU[URL raiz] A --> AU[URL about] BI --> BIU[URL blog] BP --> BPU[URL blog post] style P fill:#89b4fa,color:#11111b style IU fill:#a6e3a1,color:#11111b style AU fill:#a6e3a1,color:#11111b style BIU fill:#a6e3a1,color:#11111b style BPU fill:#a6e3a1,color:#11111b
Esta proyección es un isomorfismo: a cada árbol de ficheros le corresponde exactamente un árbol de URLs, y viceversa. No hay reescrituras ocultas ni alias silenciosos entre lo que ves en el editor y lo que teclea el visitante. Esa transparencia es el gran valor del enrutado por ficheros: la estructura del proyecto se autodocumenta, y cualquiera que abra src/pages entiende el mapa del sitio sin leer una línea de configuración.
Compáralo con un router imperativo, donde la ruta y el fichero que la sirve viven en lugares distintos y se enlazan por una cadena que hay que mantener a mano. Ahí caben tres estados de error: una ruta sin fichero, un fichero sin ruta y una ruta que apunta al fichero equivocado. En el enrutado por ficheros esos tres estados sencillamente no pueden existir, porque no hay dos cosas separadas que sincronizar. Eliminar categorías enteras de error —y no solo reducir su frecuencia— es la marca de una abstracción bien elegida.
Carpeta es segmento
Cada subcarpeta de src/pages añade un tramo a la URL. Anidar carpetas es construir la jerarquía de direcciones.
index es raíz
Un index representa la raíz de su carpeta, sin aportar segmento propio. Es la portada de esa sección.
Fichero es hoja
Un fichero con nombre propio es una hoja del árbol: aporta el último segmento de su URL.
Sin tabla central
No existe un fichero de rutas que mantener. Mover un archivo es, literalmente, cambiar su URL.
Hay un corolario práctico que conviene interiorizar pronto: mover un fichero es cambiar su URL. Renombrar contacto.astro a hablemos.astro reescribe la dirección pública y rompe cualquier enlace que apuntara a la anterior. En el enrutado por ficheros no existe una capa de indirección que te proteja de esto; la ruta física y la ruta pública están soldadas. Es el precio —justo— de eliminar la tabla de rutas.
Por eso, en un proyecto que madura, conviene tratar las URLs con el mismo cuidado que una API pública: son un contrato con quien enlaza, marca o comparte tus páginas. No se renombran a la ligera, y cuando hay que hacerlo, la mudanza se acompaña de una redirección desde la dirección antigua. El enrutado por ficheros vuelve ese contrato muy tangible —la dirección es el fichero— y precisamente por eso merece respeto.
Astro admite además segmentos dinámicos con corchetes —[slug].astro, [...ruta].astro— que generan familias enteras de URLs a partir de datos. Son la extensión natural de todo lo anterior y merecen su propio tratamiento; por ahora basta con saber que conviven en la misma carpeta y siguen la misma lógica de proyección.
El reverso de la comodidad: cualquier .astro que aterrice en src/pages se publica como URL, la quisieras o no. Un borrador, una página de pruebas o un componente colocado ahí por error acaban expuestos. Antes de guardar un fichero en src/pages, pregúntate si de verdad quieres que el mundo pueda visitarlo.
La disciplina que exige el enrutado por ficheros
La comodidad de que el sistema de ficheros sea el router tiene una contrapartida: te impone una disciplina que ningún linter vigila por ti. La primera regla es de higiene —mantén src/pages habitado solo por páginas—. Todo lo auxiliar vive fuera: los componentes en src/components, la lógica en src/lib, las plantillas en src/layouts. Un fichero mal ubicado no da error; simplemente aparece como una URL que nadie quería publicar.
La segunda es de nomenclatura. Como el nombre del fichero es el segmento de la URL, elígelo pensando en el visitante, no en ti: minúsculas, sin espacios ni acentos, con guiones en lugar de guiones bajos. Un Mi Página.astro produce una URL fea y frágil; un mi-pagina.astro produce /mi-pagina, limpia y estable. Y cuidado con las mayúsculas: algunos sistemas de ficheros las distinguen y otros no, así que dos ficheros que solo difieran en la caja son una trampa esperando al despliegue.
La tercera es aceptar el acoplamiento físico. Como la ubicación es la URL, no hay una capa que te permita reorganizar carpetas sin mover direcciones. Reestructurar src/pages es reestructurar tu sitio de cara al público, con todo lo que eso implica para enlaces externos y buscadores. No es un defecto: es la misma transparencia que te da el modelo, vista desde su lado exigente.
Una buena página de Astro es delgada: orquesta, no implementa. Carga sus datos, elige un layout y compone unos cuantos componentes; el grueso de la lógica y del marcado vive en piezas importadas de src/components. Así src/pages se lee como un índice del sitio —una URL por fichero, cada una anunciando qué muestra— y no como un vertedero donde se mezclan rutas y detalles de implementación.
El enrutado por ficheros parece una simple comodidad —ahorrarte escribir una tabla de rutas— pero encierra una tesis más profunda sobre cómo domar la complejidad: haz que la estructura visible coincida con el significado real, y elimina toda capa de traducción entre ambas. En un router imperativo hay dos verdades que mantener sincronizadas a mano: dónde vive el código y qué URL lo expone. Cada vez que divergen —un fichero movido, una ruta olvidada— nace un bug silencioso. Astro colapsa esas dos verdades en una sola: la posición del fichero es su URL, sin intermediario que pueda mentir. Esta idea —que la representación y lo representado no deben poder desincronizarse— es uno de los principios más potentes del diseño de sistemas, y reaparece muy lejos de aquí: en las bases de datos normalizadas que evitan duplicar un dato, en las fuentes de verdad únicas de la infraestructura como código, en cualquier arquitectura que prefiera derivar antes que declarar. El coste es real y honesto: si la ubicación es la URL, mover un fichero rompe enlaces, y no hay red de seguridad. Pero a cambio ganas algo escaso: un proyecto que no puede mentirte sobre su propia forma. Abrir src/pages y ver el mapa entero del sitio, sin consultar nada más, es la recompensa de haber renunciado a la indirección.
- Crea
src/pages/index.astroysrc/pages/about.astro; visita/y/abouty verifica la correspondencia fichero-URL. - Crea
src/pages/blog/index.astroy comprueba que sirve/blogy no/blog/index. - Añade
src/pages/blog/primero.astroysrc/pages/blog/segundo.astro; observa cómo la subcarpeta se convierte en un segmento común de la URL. - Renombra un fichero y confirma que su dirección cambia; razona qué enlaces se romperían y por qué no hay indirección que lo evite.