Qué es una Single Page Application (SPA)
Por sus siglas (SPA) es una aplicación de una sóla página, lo que significa que todos los recursos y las dependencias de nuestra aplicación van a cargar a la hora que solicitemos al servidor ese archivo, que generalmente será un archivo .html, se vendrán descargando todas las tipografías, las imágenes, los estilos, los archivos de programación Javascript que nuestra aplicación necesite para funcionar, a diferencia de aplicaciones que estén construidas con diferentes secciones o páginas, donde cada vez que cambiamos de una sección a otra, vamos al servidor a solicitar otro archivo, otro recurso, otra ruta al servidor, con lo cual hay que descargar todos los recursos (llámense tipografías, archivos de estilo, de imágenes, de programación…).
Una SPA carga todo el contenido en una sóla vez. Dependiendo de la complejidad y el nivel de robustez de nuestra SPA puede ser que la primera vez demore algo más en cargar, ya que está trayendo todo el contenido, aunque también lo que se espera es que cargue únicamente el contenido necesario y a partir de las interacciones del usuario, cuando vaya cargando cada una de las secciones, irá solicitando de manera asíncrona y dinámica el contenido.
Por lo tanto, las SPA trabajan con peticiones asíncronas con tecnologías AJAX.
Rutas de una SPA
En una SPA lo que tenemos son vistas, no páginas, no tenemos diferentes secciones, cargamos un sólo archivo, y a partir de las interacciones del usuario cambiamos el contenido, es decir, mostramos u ocultamos el contenido necesario. Por usabilidad es buena opción cambiar la URL de nuestra SPA ya que de esta manera se ayuda al usuario a saber en todo momento en que página está navegando.
El cambio se consigue gracias a dos elementos de la URL, que pertenecen al objeto Location, el cual guarda todas las partes que se van formando de la URL. En dicho objeto Location hay dos maneras de cambiar la URL sin necesidad de cambiar hacia una nueva ruta, y es a través de la almohadilla (#). Otra manera de hacer los cambios es mediante el paso de variables o parámetros a través de la URL. Estas son las dos maneras en que podemos modificar la URL en una SPA.
SEO en una SPA
Hay dos alternativas que son técnicas de las SPA, las cuales nos ayudan a que nuestras aplicaciones sean más amigables con el SEO, la primera estrategia es usar generadores de sitios web estáticos, lo que se conoce como SSG (Static Site Generator). Ejemplos de estas tecnologías son Gatsby o Next… La segunda técnica sería el Server Site Rendering (SSR), o en español, el renderizado del lado del servidor, lo que significa que, herramientas como por ejm Nuxt para Vue, o Next para React, lo que hacen es dinámicamente servir el contenido desde el servidor, por lo que se genera una URL nueva, pero seguimos trabajando con el mismo esquema de las SPA.
Objetivo de nuestra aplicación
Si el objetivo de nuestra aplicación es generar contenido, no es muy buena opción que nuestro blog técnico crearlo en una SPA, ya que esta no se lleva también con el SEO, pero si estamos pensando en desarrollar una aplicación web para llevar el sistema que lleva las solicitudes de vacaciones de nuestra empresa por ejm, o una intranet privada, de entrada, el SEO no es importante, por lo que en este caso podemos ayudarnos de un SPA para construir nuestra aplicación.
En qué se programa
Las SPA se desarrollan en Javascript. Las SPA son 100% frontend. A las SPA no les interesa en que tecnología está desarrollado el backend con los datos que se cargarán en la misma porque, y es una de las características de la SPA, al ser sólo código frontend, permite tener separado el código frontend del código backend que provee los datos. Esto significa que en el caso, por ejm, de las vacaciones de los empleados de nuestra empresa, el frontend puede ser una SPA, y el backend puede ser un proyecto independiente, que lo único que necesita la SPA es que el backend en que esté desarrollado, que puede ser cualquier lenguaje de programación (PHP, Ruby, Phyton…) es que este le exponga una API, generalmente en formato JSON para que las SPA pueda consumir dichos datos y generar su frontend dinámico. De esta manera pueden estar desacoplados el frontend de nuestra SPA del backend que provee los datos.
A diferencia del patrón de arquitectura de desarrollo MVC, muy popular a inicios de la web en la década de los 90 y comienzos del 2000, en un sistema MVC, la responsabilidad estaba del lado del servidor, en las SPA el frontend es totalmente independiente del backend, no dependiendo de él.
Librerías para desarrollar nuestras SPA
Desde el año 2010 con es surgimiento de Angular.js, Backbone.js y Ember.js, estos frameworks son la primera generación de librerías y frameworks para desarrollar SPAs. Posteriormente con el surgimiento de React, Angular, Polimer, Vue… se pueden considerar como librerías o frameworks de segunda generación.