{"id":16704,"date":"2021-12-14T10:34:03","date_gmt":"2021-12-14T09:34:03","guid":{"rendered":"https:\/\/www.makingscience.com\/?p=16704"},"modified":"2021-12-14T10:34:03","modified_gmt":"2021-12-14T09:34:03","slug":"single-page-app-vs-multi-page-app-cual-elegir-para-tu-web","status":"publish","type":"post","link":"https:\/\/www.makingscience.com\/es\/blog\/single-page-app-vs-multi-page-app-cual-elegir-para-tu-web\/","title":{"rendered":"Single Page App VS Multi Page App: \u00bfcu\u00e1l elegir para tu web?"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">En los \u00faltimos a\u00f1os, muchos sectores han digitalizado su negocio, y los que han alcanzado mejores resultados han sido, sin duda, aquellos que adem\u00e1s de su producto o servicio han ofrecido a sus usuarios una experiencia online f\u00e1cil, impecable, fluida, r\u00e1pida y segura.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">El mundo web es cada d\u00eda m\u00e1s user-centric, por lo que, tener \u00e9xito en digital depende mucho de la experiencia que ofrecemos a nuestros usuarios.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">En este sentido, muchas empresas han empezado a cambiar su estructura web (totalmente o parcialmente) usando una tecnolog\u00eda de web design \u201cnueva\u201d (existe desde hace mucho tiempo, pero su uso se ha difundido solo en los \u00faltimos a\u00f1os) conocida como SPA (Single-Page Application). Pero no solo eso, si no que muchas empresas y compa\u00f1\u00edas han tenido que decidir si una Single-Page Application (SPA) o una Multi-Page App (MPA) eran las estructuras adecuadas o no.<\/span><\/p>\n<p>Descubre en este art\u00edculo las caracter\u00edsticas y ventajas de cada tipo de estructura. \u00a1Comenzamos!<\/p>\n<p>&nbsp;<\/p>\n<h3>Single-Page App VS Multi-Page App: diferencias y ventajas<\/h3>\n<p><span style=\"font-weight: 400;\">Debemos hacer una premisa importante: cada web, seg\u00fan su dise\u00f1o y funcionalidad puede ser una Single-Page Application o Multi-Page Application.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Una <strong>Single Page Application (SPA)<\/strong> es, como dice la misma palabra, una \u00fanica p\u00e1gina que de manera din\u00e1mica, sobreescribe el contenido de la misma en lugar de cargar una nueva: as\u00ed es como funcionan, por ejemplo, Gmail, Twitter y Facebook. <\/span><span style=\"font-weight: 400;\">Esta manera din\u00e1mica de cargar el contenido de una p\u00e1gina ofrece una experiencia totalmente natural para el usuario, pudiendo prescindir de lo tiempos de carga.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Una <strong>Multi-Page Application (MPA)<\/strong> es el tradicional sitio web, donde cada p\u00e1gina representa una petici\u00f3n especifica a un servidor que nos devuelve, tanto en im\u00e1genes como en contenido, un HTML nuevo que corresponde a la p\u00e1gina que hemos pedido. Teniendo todo esto en cuenta,<\/span><span style=\"font-weight: 400;\"> podemos imaginar que el volumen de contenido que gestionan es considerable.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><strong>\u00bfCu\u00e1les son los beneficios de una SPA?<\/strong><\/h3>\n<ul>\n<li><b>Tiempos de carga r\u00e1pidos<\/b><span style=\"font-weight: 400;\">: unos tiempos de carga lentos pueden afectar negativamente tanto la experiencia de usuario, como las conversiones de un negocio online.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">En una SPA, los tiempos de son carga mucho m\u00e1s r\u00e1pido que una web tradicional, dado que carga una p\u00e1gina solo una vez (y luego solo \u201cactualiza\u201d el contenido pertinente). En una web tradicional, como hemos visto anteriormente, cada p\u00e1gina es un HTML nuevo, por lo que tardar\u00e1 mas tiempo en cargar.<\/span><\/p>\n<ul>\n<li><b>Experiencia de usuario mejorada<\/b><span style=\"font-weight: 400;\">: en una SPA la navegaci\u00f3n del usuario es fluida y linear (tanto en desktop, como en mobile), el usuario no nota que su navegaci\u00f3n ocurre siempre en una misma p\u00e1gina.<\/span><\/li>\n<li><b>Tiempos de desarrollo<\/b>: una SPA est\u00e1 formadas por \u201ccomponentes\u201d que se pueden re-usar mas veces (ahorrando tiempo y coste de desarrollo).<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">Sin embargo, una SPA tambi\u00e9n presenta algunos inconvenientes que debemos tener en consideraci\u00f3n:<\/span><\/p>\n<p><b>Problemas con SEO<\/b><span style=\"font-weight: 400;\">: una SPA se ejecuta en c\u00f3digo Javascript y sin recargar ninguna p\u00e1gina nueva. Eso implica que no hay urls especificas que podamos optimizar para el SEO, por lo que los motores de b\u00fasqueda no ven ning\u00fan contenido.<\/span><\/p>\n<p><b>Tracking de p\u00e1gina vista<\/b><span style=\"font-weight: 400;\">: al no recargar una nueva p\u00e1gina (ni una nueva url) es necesario una configuraci\u00f3n extra en c\u00f3digo para que podamos medir las p\u00e1ginas vistas (GTM ofrece una soluci\u00f3n al respecto, que puede dar problemas de cara a activaci\u00f3n de pixels, par\u00e1metros en las urls y atribuci\u00f3n).<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">Entre las dos tecnolog\u00edas no hay una mejor o peor que otra, <strong>elegir una SPA o MPA depende, sustancialmente, de lo que son los objetivo de cada negocio,<\/strong> tanto a nivel de experiencia de usuario, como a nivel de medici\u00f3n.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Si necesitas saber cu\u00e1l es la tecnolog\u00eda mas adecuada para tu web, \u00a1no dudes en contactarnos! Escr\u00edbenos a info@makingscience.com y te ayudaremos con tu caso concreto.<\/span><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En los \u00faltimos a\u00f1os, muchos sectores han digitalizado su negocio, y los que han alcanzado mejores resultados han sido, sin duda, aquellos que adem\u00e1s de su producto o servicio han ofrecido a sus usuarios una experiencia online f\u00e1cil, impecable, fluida, r\u00e1pida y segura. El mundo web es cada d\u00eda m\u00e1s user-centric, por lo que, tener [&hellip;]<\/p>\n","protected":false},"author":40,"featured_media":16712,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[871],"tags":[],"class_list":["post-16704","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-martech-adtech-es"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/posts\/16704","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/users\/40"}],"replies":[{"embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/comments?post=16704"}],"version-history":[{"count":0,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/posts\/16704\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/media\/16712"}],"wp:attachment":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/media?parent=16704"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/categories?post=16704"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/tags?post=16704"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}