¿Qué es una web SPA? - Single Page Application

Logo de Cuarzo.dev
Cuarzo.dev

Recibe cada lunes y jueves un correo para ayudarte a impulsar tus habilidades de programación. Ofreciéndote consejos, tutoriales, recursos gratuitos, noticias relevantes y una comunidad comprometida. También tenemos memes 😏

Suscríbete Gratis

Si tienes alguna duda con el curso o te quedas en algún punto donde no sepas avanzar te puedes unir gratis a nuestra comunidad de discord y preguntar tus dudas, que la comunidad estará encantada de ayudarte.

Únete al discord

Una web SPA (Single Page Application) es una página web la cual está todo el contenido en una sola página, es decir, carga tan solo un archivo HTML y todo se produce dentro de este único archivo. De esta manera se puede ofrecer una experiencia más fluida, más rápida.

Es decir, todo el código HTML, JavaScript y CSS se carga una sola vez, puedes navegar entre los diferentes apartados de la página y el contenido ya estará precargado de antemano, es por esto que es tan rápido. En algunos casos también lo que se hace es cargar estos contenidos dinámicamente si se requieren, pero no tiene que cargar toda la página de nuevo, tan solo los nuevos contenidos.

En una SPA tenemos varias vistas, no varias páginas

Aunque solo tenemos una página, sí que podemos tener varias vistas, es decir los diferentes apartados que podría tener nuestra web. A ojos del usuario es como si tuviese varias páginas que cargan muy rápido, pero en realidad son vistas en la misma página.

Entonces, si todo está en la misma página, ¿quiere decir esto que no cambia la URL del navegador?

No, no quiere decir eso, es más, lo más normal es que vaya cambiando según nos movemos entre vistas. Pero la clave aquí, es que en realidad no estás cargando una página, tan solo sustituyendo el contenido de la misma.

Entonces, para qué cambiar la URL, ¿que más da?

Podrías no cambiarla si, pero es una buena práctica ya que el navegador va guardando el historial de las URL y le permite al usuario navegar con el botón de atrás y adelante del navegador. Además de que el usuario podría acceder a un contenido concreto directamente si usa la URL en vez de navegar por la web hasta llegar a él.

¿En que lenguaje de programación se hacen las SPA?

Esto es fácil, las SPA siempre están hechas con JavaScript. No hay otro lenguaje en que las puedas hacer, ya que este tipo de webs se ejecutan en el lado del cliente, es decir, en el navegador, y ahí solo podemos ejecutar JavaScript.

Como es obvio también tenemos HTML y CSS, pero esto no son lenguajes de programación, si tienes dudas al respecto te recuerdo que tenemos videos en el diccionario del programador donde hablamos de esto

Por otro lado también tenemos muchos frameworks o librerías que nos ayudan hacer estas SPA, como son angular, react, ember.js, polymer, etc… hay muchas, aquí cada uno elige la que más le guste.

Y, ¿qué pasa con el backend?

Aquí nos da igual el backend, a la web SPA le da igual si haces el backend en php, en Java, usando frameworks o no, da igual, las SPA tan solo necesitan de una API que les proporcione el contenido y ya está, lo demás da igual. Es decir, en este caso el frontend y el backend son dos proyectos totalmente separados uno de otro.

El gran problema con el SEO

La compatibilidad del SEO con las páginas SPA no es muy buena, ya que al ser solo una página, y los contenido se cargan dinámicamente, los bots de los buscadores que leen el html de la página, no encuentran nada, ya que hay que ejecutar JavaScript para cargar esos contenidos, y esto no lo hacen esos bots.

Así que si necesitas o es muy importante la indexación de esa página en los buscadores como Google, no deberías de usar una SPA y tirar a la página web más convencional.

Aunque si estas encabezonado en que sea una SPA y tener un buen SEO, no es imposible

Existe lo que se llama el Server Side Rendering, con esto solucionamos el tema del SEO además de darle una mayor velocidad a la carga inicial de la página.

Pero de este tema, ya hablaremos en otro articulo.

Al suscribirte estás aceptando los términos de uso y la política de privacidad. Puedes darte de baja en cualquier momento.

Libro No todo es programar de Kiko Palomares
Koding Beats