{"id":28813,"date":"2023-05-30T11:00:19","date_gmt":"2023-05-30T09:00:19","guid":{"rendered":"https:\/\/www.hiberus.com\/crecemos-contigo\/?p=28813"},"modified":"2024-01-25T10:34:30","modified_gmt":"2024-01-25T09:34:30","slug":"spartacus-para-reducir-la-carga-de-peticiones-a-servidores","status":"publish","type":"post","link":"https:\/\/www.hiberus.com\/crecemos-contigo\/spartacus-para-reducir-la-carga-de-peticiones-a-servidores\/","title":{"rendered":"Spartacus para reducir la carga de peticiones a servidores"},"content":{"rendered":"

SAP Commerce Cloud y Spartacus<\/a> ofrecen numerosas ventajas frente a otras tecnolog\u00edas en el desarrollo de frontales desacoplados basados en Angular<\/strong>. SAP Commerce recomienda el uso de esta librer\u00eda hasta el punto de apostar por ella y ofrecerla como una soluci\u00f3n oficial, renombr\u00e1ndola a partir de su quinta versi\u00f3n como SAP Composable Storefront<\/strong>. Adem\u00e1s puedes emplear Spartacus para reducir la carga de peticiones a servidores.<\/p>\n

Todo desarrollador de p\u00e1ginas web experimentado conoce los beneficios de reducir la carga de peticiones<\/strong>, ya sea para disminuir los tiempos de carga<\/strong> (y por tanto incrementar la retenci\u00f3n de usuarios en la p\u00e1gina) o para aumentar el posicionamiento SEO<\/a><\/strong> y ascender en el listado de resultados de los motores de b\u00fasqueda. Algunos de los m\u00e9todos habituales, como la minificaci\u00f3n de JS y CSS, la compresi\u00f3n de im\u00e1genes y la implementaci\u00f3n de una cach\u00e9, intentan reducir el tama\u00f1o de los datos o distribuir la carga para ser capaces de responder en el menor tiempo posible. Estos m\u00e9todos permiten responder m\u00e1s r\u00e1pido, pero no reducen la carga que el servidor tendr\u00e1 que procesar. En este sentido, Spartacus<\/strong> va un paso m\u00e1s all\u00e1 y usa una estrategia para reducir la informaci\u00f3n que se solicita a los servidores.<\/p>\n

NGRX y Field Level Optimization<\/strong><\/h2>\n

Antes de explicar la estrategia de Spartacus, es necesario mencionar NGRX<\/strong>, es decir, la implementaci\u00f3n de Redux en Angular. Esta librer\u00eda permite la creaci\u00f3n de un objeto JavaScript llamado \u2018Store\u2019 que est\u00e1 disponible en toda la aplicaci\u00f3n, y que proporciona un patr\u00f3n de dise\u00f1o para acceder a \u00e9l. Este objeto tiene una vida muy corta, dado que se crea cuando se carga la p\u00e1gina y se borra cuando se cierra o cuando se refresca<\/strong>. Adem\u00e1s, su valor es diferente en cada pesta\u00f1a del navegador.<\/p>\n

Spartacus trata la Store como una cach\u00e9 almacenada en el propio frontal. As\u00ed, en un primer lugar, puede parecer que a\u00f1adir una segunda cach\u00e9 no sea de mucha utilidad. Sin embargo, si se combina con el uso del \u2018Field level customization\u2019 de SAP Commerce, permite reducir al m\u00ednimo la carga sobre el servidor<\/strong>.<\/p>\n

En lugar de llamar a un endpoint que recupera toda la informaci\u00f3n de un componente o un pedido, SAP Commerce env\u00eda un par\u00e1metro \u2018fields\u2019 en el que se especifican los campos que se desean recuperar. Del mismo modo, Spartacus define varios \u2018scopes\u2019 al hacer peticiones, lo que permite atacar al mismo endpoint variando la lista de par\u00e1metros que solicita seg\u00fan el uso que se le vaya a dar a la informaci\u00f3n.<\/p>\n

Por ejemplo, en el caso de la p\u00e1gina de detalles de producto (PDP), Spartacus realiza una carga completa de la informaci\u00f3n del producto, pero puede recuperar \u00fanicamente el stock o el precio cuando sea necesario. Una vez que se ha recuperado la informaci\u00f3n, \u00e9sta se almacena en la Store. En cuanto a la caducidad de los datos, desde la propia configuraci\u00f3n se puede definir por cu\u00e1nto tiempo se considera v\u00e1lida la informaci\u00f3n. Si se supera ese tiempo, se lanzar\u00e1 una petici\u00f3n, aunque ya se hubiese hecho anteriormente.<\/p>\n

Adem\u00e1s de los beneficios mencionados, agregar una cach\u00e9 en el lado del cliente implica que, si una pieza de informaci\u00f3n ya ha sido almacenada, no ser\u00e1 necesario hacer una solicitud al servidor para recuperarla, reduciendo significativamente el tiempo de espera y haciendo la carga de la informaci\u00f3n m\u00e1s r\u00e1pida<\/strong>. De hecho, en algunos casos es pr\u00e1cticamente instant\u00e1nea.<\/p>\n

\u00bfC\u00f3mo funciona la estrategia de Spartacus para reducir la carga de peticiones a servidores?<\/strong><\/h2>\n

En las aplicaciones de Angular<\/a>, con o sin Spartacus, se usan los servicios para acceder a los datos, normalmente a trav\u00e9s de peticiones. Para explicar todo el flujo tomaremos como ejemplo una petici\u00f3n de detalle de producto, pero antes de continuar debemos comprender las piezas de la Store:<\/p>\n