Por sus siglas (SPA<\/strong>) es una aplicaci\u00f3n de una s\u00f3la p\u00e1gina<\/strong>, lo que significa que todos los recursos y las dependencias de nuestra aplicaci\u00f3n van a cargar a la hora que solicitemos al servidor ese archivo<\/strong>, que generalmente ser\u00e1 un archivo .html<\/strong><\/em>, se vendr\u00e1n descargando todas las tipograf\u00edas<\/strong>, las im\u00e1genes<\/strong>, los estilos<\/strong>, los archivos de programaci\u00f3n Javascript<\/strong> que nuestra aplicaci\u00f3n<\/strong> necesite para funcionar, a diferencia de aplicaciones que est\u00e9n construidas con diferentes secciones<\/strong> o p\u00e1ginas<\/strong>, donde cada vez que cambiamos de una secci\u00f3n<\/strong> a otra, vamos al servidor<\/strong> a solicitar otro archivo<\/strong>, otro recurso<\/strong>, otra ruta al servidor<\/strong>, con lo cual hay que descargar todos los recursos<\/strong> (ll\u00e1mense tipograf\u00edas<\/strong>, archivos de estilo<\/strong>, de im\u00e1genes<\/strong>, de programaci\u00f3n<\/strong>…).<\/p>\n\n\n\n\n\n\n\n Una SPA<\/strong> carga todo el contenido en una s\u00f3la vez. Dependiendo de la complejidad y el nivel de robustez de nuestra SPA<\/strong> puede ser que la primera vez demore algo m\u00e1s en cargar, ya que est\u00e1 trayendo todo el contenido, aunque tambi\u00e9n lo que se espera es que cargue \u00fanicamente el contenido necesario y a partir de las interacciones del usuario<\/strong>, cuando vaya cargando cada una de las secciones, ir\u00e1 solicitando de manera as\u00edncrona y din\u00e1mica<\/strong> el contenido.<\/p>\n\n\n\n Por lo tanto, las SPA<\/strong> trabajan con peticiones as\u00edncronas<\/strong> con tecnolog\u00edas AJAX<\/strong>.<\/p>\n\n\n\n En una SPA<\/strong> lo que tenemos son vistas, <\/strong>no p\u00e1ginas, <\/strong>no tenemos diferentes secciones<\/strong>, cargamos un s\u00f3lo 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\u00f3n cambiar la URL<\/strong> de nuestra SPA<\/strong> ya que de esta manera se ayuda al usuario a saber en todo momento en que p\u00e1gina est\u00e1 navegando.<\/p>\n\n\n\n El cambio se consigue gracias a dos elementos de la URL<\/strong>, que pertenecen al objeto Location<\/em><\/strong>, el cual guarda todas las partes que se van formando de la URL<\/strong>. En dicho objeto Location<\/em> <\/strong>hay dos maneras de cambiar la URL<\/strong> sin necesidad de cambiar hacia una nueva ruta, y es a trav\u00e9s de la almohadilla<\/strong> (#<\/strong><\/em>). Otra manera de hacer los cambios es mediante el paso de variables o par\u00e1metros a trav\u00e9s de la URL<\/strong>. Estas son las dos maneras en que podemos modificar la URL<\/strong> en una SPA<\/strong>.<\/p>\n\n\n\n Hay dos alternativas que son t\u00e9cnicas de las SPA<\/strong>, las cuales nos ayudan a que nuestras aplicaciones sean m\u00e1s amigables con el SEO<\/strong>, la primera estrategia es usar generadores de sitios web est\u00e1ticos<\/strong>, lo que se conoce como SSG<\/strong> (Static Site Generator<\/strong>). Ejemplos de estas tecnolog\u00edas son Gatsby<\/strong> <\/a>o Next<\/strong><\/a>… La segunda t\u00e9cnica ser\u00eda el Server Site Rendering<\/strong> (SSR<\/strong>), o en espa\u00f1ol, el renderizado del lado del servidor<\/strong>, lo que significa que, herramientas como por ejm Nuxt<\/strong> <\/a>para Vue<\/strong>, o Next<\/strong> para React<\/strong>, lo que hacen es din\u00e1micamente servir el contenido desde el servidor<\/strong>, por lo que se genera una URL<\/strong> nueva, pero seguimos trabajando con el mismo esquema de las SPA<\/strong>.<\/p>\n\n\n\n Si el objetivo de nuestra aplicaci\u00f3n es generar contenido, no es muy buena opci\u00f3n que nuestro blog t\u00e9cnico crearlo en una SPA<\/strong>, ya que esta no se lleva tambi\u00e9n con el SEO<\/strong>, pero si estamos pensando en desarrollar una aplicaci\u00f3n web para llevar el sistema que lleva las solicitudes de vacaciones de nuestra empresa por ejm, o una intranet privada, de entrada, el SEO<\/strong> no es importante, por lo que en este caso podemos ayudarnos de un SPA<\/strong> para construir nuestra aplicaci\u00f3n.<\/p>\n\n\n\n Las SPA<\/strong> se desarrollan en Javascript<\/strong>. Las SPA<\/strong> son 100% frontend<\/strong>. A las SPA<\/strong> no les interesa en que tecnolog\u00eda est\u00e1 desarrollado el backend<\/strong> con los datos que se cargar\u00e1n en la misma porque, y es una de las caracter\u00edsticas de la SPA<\/strong>, al ser s\u00f3lo c\u00f3digo frontend<\/strong>, permite tener separado el c\u00f3digo frontend<\/strong> del c\u00f3digo backend<\/strong> que provee los datos. Esto significa que en el caso, por ejm, de las vacaciones de los empleados de nuestra empresa, el frontend<\/strong> puede ser una SPA<\/strong>, y el backend<\/strong> puede ser un proyecto independiente, que lo \u00fanico que necesita la SPA<\/strong> es que el backend<\/strong> en que est\u00e9 desarrollado, que puede ser cualquier lenguaje de programaci\u00f3n (PHP<\/strong>, Ruby<\/strong>, Phyton<\/strong>…) es que este le exponga una API<\/strong>, generalmente en formato JSON<\/strong> para que las SPA<\/strong> pueda consumir dichos datos y generar su frontend din\u00e1mico<\/strong>. De esta manera pueden estar desacoplados el frontend<\/strong> de nuestra<\/strong> SPA del backend<\/strong> que provee los datos.<\/p>\n\n\n\n A diferencia del patr\u00f3n de arquitectura de desarrollo MVC<\/strong>, muy popular a inicios de la web en la d\u00e9cada de los 90 y comienzos del 2000, en un sistema MVC<\/strong>, la responsabilidad estaba del lado del servidor, en las SPA<\/strong> el frontend<\/strong> es totalmente independiente del backend<\/strong>, no dependiendo de \u00e9l.<\/p>\n\n\n\n Desde el a\u00f1o 2010 con es surgimiento de Angular.js<\/strong><\/a>, Backbone.js<\/strong><\/a> y Ember.js<\/strong><\/a>, estos frameworks<\/strong> son la primera generaci\u00f3n de librer\u00edas<\/strong> y frameworks<\/strong> para desarrollar SPAs<\/strong>. Posteriormente con el surgimiento de React<\/strong>, Angular<\/strong>, Polimer<\/strong>, Vue<\/strong>… se pueden considerar como librer\u00edas <\/strong>o frameworks de segunda generaci\u00f3n<\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":" Qu\u00e9 es una Single Page Application (SPA) Por sus siglas (SPA) es una aplicaci\u00f3n de una s\u00f3la p\u00e1gina, lo que significa que…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1646,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-1648","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"Qu\u00e9 es una Single Page Application (SPA) Por sus siglas (SPA) es una aplicaci\u00f3n de una s\u00f3la p\u00e1gina, lo que significa que...","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1648","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=1648"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1648\/revisions"}],"predecessor-version":[{"id":1650,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1648\/revisions\/1650"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1646"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1648"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Rutas de una SPA<\/h2>\n\n\n\n
SEO en una SPA<\/h2>\n\n\n\n
Objetivo de nuestra aplicaci\u00f3n<\/h2>\n\n\n\n
En qu\u00e9 se programa<\/h2>\n\n\n\n
Librer\u00edas para desarrollar nuestras SPA<\/h2>\n\n\n\n