Cómo ejecutar una aplicación de página única (SPA) en un alojamiento compartido

Crear sitios web modernos con Vue o React se ha convertido en una práctica habitual en el desarrollo web. Sin embargo, al implementar una aplicación de página única (SPA) en un entorno de alojamiento compartido, puede encontrarse con un problema común: solo la página de inicio carga correctamente, mientras que todas las rutas internas (páginas) devuelven un error 404. Esto se debe a que el servidor de alojamiento no comprende el enrutamiento del lado del cliente y busca archivos o directorios inexistentes.

Para que su SPA funcione correctamente en un servidor de alojamiento compartido, debe configurar el servidor para que sepa cómo gestionar las rutas. Hay varias maneras de solucionar este problema, cada una con sus ventajas y desventajas.

1. Usar enrutamiento basado en hash.

La solución más sencilla y rápida es usar enrutamiento hash; por ejemplo, URLs como /#/about en lugar de /about. En este caso, el enrutamiento se realiza completamente en el lado del cliente, por lo que el servidor no necesita ninguna configuración especial. La desventaja es que los motores de búsqueda no indexan estas páginas correctamente, ya que técnicamente toda la aplicación sigue siendo una sola página. Por lo tanto, esta opción no es ideal si el SEO es importante para su proyecto.

2. Definir rutas en el lado del servidor.

Otro método es duplicar las rutas en el backend. Por ejemplo, si su hosting es compatible con PHP, puede escribir una lógica de enrutamiento simple que indique al servidor qué archivos servir para URLs específicas. Este enfoque garantiza que todas las páginas, incluida la página 404, funcionen correctamente. La desventaja, sin embargo, es que mantener rutas tanto en el código frontend como en el backend aumenta la complejidad y hace que el mantenimiento continuo sea más difícil.

3. Configure el servidor para que siempre muestre index.html cuando falte una ruta.

La solución más común y universal es configurar el servidor web para que, cuando no encuentre el archivo solicitado, muestre automáticamente index.html. Esto permite que la SPA gestione todo el enrutamiento a través del framework del lado del cliente. Esta configuración se puede realizar mediante reglas .htaccess en Apache o archivos de configuración similares para otros servidores.

Este método ofrece el mejor equilibrio entre simplicidad y funcionalidad. Los motores de búsqueda pueden indexar las páginas porque el contenido se renderiza dinámicamente una vez que se carga la SPA. La única desventaja es que el servidor devolverá un código de estado 200 incluso para páginas inexistentes, lo que significa que la página 404 debe gestionarse manualmente dentro de la aplicación.

.htaccess

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
</IfModule>

En general, ejecutar una SPA en un hosting compartido es totalmente posible. La clave está en comprender cómo procesa las rutas tu servidor y elegir el enfoque adecuado para tus necesidades específicas. Para aplicaciones sencillas que no dependen del SEO, el enrutamiento hash es perfectamente adecuado. Pero si quieres que tu sitio sea indexable y gestione correctamente todas las rutas, la configuración del servidor o un pequeño enrutador basado en PHP es la mejor opción.