Gatsby puede crear sitios estáticos a partir de API’s, archivos, vistas en la carpeta pages, pero ¿se puede tener una SPA (single page application) en mi sitio de Gatsby? Por supuesto.
En este articulo el equipo de Gatsby nos platica que el concepto ellos lo denominan “apps hibridas”, lo cual indica que podemos tener componentes que renderizan un sitio estático y a la vez poder tener una ruta que sirva como contenedor a una single page application (SPA) donde podemos meter redux y demás lógica que solo estaría disponible del lado del cliente.
¿Cómo se hace?
Conceptualmente y cómo el equipo lo platica es necesario que el router de Gatsby reconozca el patrón “/app/*” donde el asterisco indicaría que cualquier ruta que empieze por app y siga en lo que sea nos renderizaría el mismo archivo, ejemplo, las rutas:
Esas rutas deberían mostrar siempre el mismo componente que tenga un router interno para manejar las rutas.
En ese articulo del equipo de Gatsby nos muestran como hacer la configuración a mano, pero también mencionan que por comodidad podemos usar un plugin llamado Create Client Paths
Para usarlo solo debemos agregar en nuestro archivo gatsby-config.js lo siguiente:
{
resolve: `gatsby-plugin-create-client-paths`,
options: { prefixes: [`/app/*`] },
}
Esto incica que buscará en nuestro directorio “Pages” un componente llamado App y el asterisco indica que todas las rutas después del prefijo “/app/” seran administradas por nuestro componente App.
Así tenemos lo mejor de dos mundos, un sitio estático con una o varias single pages applications.
