{"id":92547,"date":"2022-09-29T03:59:39","date_gmt":"2022-09-29T01:59:39","guid":{"rendered":"https:\/\/rmarketingdigital.com\/dev\/se-mejoro-el-rendimiento-de-carga-de-paginas-de-next-js-y-gatsby-con-fragmentacion-granular\/"},"modified":"2021-07-06T09:39:43","modified_gmt":"2021-07-06T07:39:43","slug":"se-mejoro-el-rendimiento-de-carga-de-paginas-de-next-js-y-gatsby-con-fragmentacion-granular","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/en\/dev\/se-mejoro-el-rendimiento-de-carga-de-paginas-de-next-js-y-gatsby-con-fragmentacion-granular\/","title":{"rendered":"Improved Next.js and Gatsby page loading performance with granular fragmentation"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Contenidos<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/se-mejoro-el-rendimiento-de-carga-de-paginas-de-next-js-y-gatsby-con-fragmentacion-granular\/#Introduccion\" >Introducci\u00f3n<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/se-mejoro-el-rendimiento-de-carga-de-paginas-de-next-js-y-gatsby-con-fragmentacion-granular\/#Fragmentacion-mejorada\" >Fragmentaci\u00f3n mejorada<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/se-mejoro-el-rendimiento-de-carga-de-paginas-de-next-js-y-gatsby-con-fragmentacion-granular\/#Mas-solicitudes-HTTP\" >M\u00e1s solicitudes HTTP<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/se-mejoro-el-rendimiento-de-carga-de-paginas-de-next-js-y-gatsby-con-fragmentacion-granular\/#Reducciones-de-tamano-con-trozos-granulares\" >Reducciones de tama\u00f1o con trozos granulares<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/se-mejoro-el-rendimiento-de-carga-de-paginas-de-next-js-y-gatsby-con-fragmentacion-granular\/#Gatsby\" >Gatsby<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/se-mejoro-el-rendimiento-de-carga-de-paginas-de-next-js-y-gatsby-con-fragmentacion-granular\/#Conclusion\" >Conclusi\u00f3n<\/a><\/li><\/ul><\/nav><\/div>\n<p><\/p>\n<div>\n<header class=\"w-article-header\">\n<p class=\"w-article-header__subhead w-mb--non\">\n<p>          Una nueva estrategia de fragmentaci\u00f3n de paquetes web en Next.js y Gatsby minimiza el c\u00f3digo duplicado para impulsar el rendimiento de carga de la p\u00e1gina.\n        <\/p>\n<p>\n          <time>29 de abril de 2020<\/time><\/p>\n<\/header>\n<p>Chrome est\u00e1 colaborando con herramientas y marcos en el ecosistema de c\u00f3digo abierto de JavaScript.  Recientemente se agregaron varias optimizaciones m\u00e1s nuevas para impulsar el rendimiento de carga de <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/nextjs.org\/\">Next.js<\/a> y<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.gatsbyjs.org\/\">Gatsby<\/a>.  Este post cubre una estrategia de fragmentaci\u00f3n granular mejorada que ahora se env\u00eda de forma predeterminada en ambos marcos.<\/p>\n<h2 id=\"introduction\"><span class=\"ez-toc-section\" id=\"Introduccion\"><\/span>Introducci\u00f3n <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Como muchos frameworks web, Next.js y Gatsby utilizan <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/webpack.js.org\/\">paquete web<\/a> como su agrupador principal.  webpack v3 ingresado<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/webpack.js.org\/plugins\/commons-chunk-plugin\/\"><code>CommonsChunkPlugin<\/code><\/a>  para hacer factible la salida de m\u00f3dulos compartidos entre diferentes puntos de entrada en un solo (o pocos) fragmentos (o fragmentos) \u00abcomunes\u00bb.  El c\u00f3digo compartido se puede descargar de forma separada y almacenar en la cach\u00e9 del navegador desde el principio, lo que puede resultar en un mejor rendimiento de carga.<\/p>\n<p>Este patr\u00f3n se hizo popular entre muchos marcos de aplicaciones de una sola p\u00e1gina que adoptaron una configuraci\u00f3n de punto de entrada y paquete que se ve\u00eda as\u00ed:<\/p>\n<p><img alt='commons-pattern-diagram-7854309' class=\"w-screenshot w-screenshot--filled\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/commons-pattern-diagram-7854309.png' alt=\"Configuraci\u00f3n com\u00fan de punto de entrada y paquete\"><\/p>\n<p>A\u00fan cuando es pr\u00e1ctico, el concepto de agrupar todo el c\u00f3digo del m\u00f3dulo compartido en un solo fragmento tiene sus limitaciones.  Los m\u00f3dulos no compartidos en cada punto de entrada se pueden descargar para rutas que no lo usan, lo que resulta en la descarga de m\u00e1s c\u00f3digo del necesario.  A modo de ejemplo, cuando <code>page1<\/code> carga el <code>common<\/code> fragmento, carga el c\u00f3digo para <code>moduleC<\/code> a\u00fan cuando <code>page1<\/code> no utiliza <code>moduleC<\/code>.  Por esta raz\u00f3n, junto con algunos otros, webpack v4 elimin\u00f3 el complemento a favor de uno nuevo: <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/webpack.js.org\/plugins\/split-chunks-plugin\/\"><code>SplitChunksPlugin<\/code><\/a>.<\/p>\n<h2 id=\"improved-chunking\"><span class=\"ez-toc-section\" id=\"Fragmentacion-mejorada\"><\/span>Fragmentaci\u00f3n mejorada <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>La configuraci\u00f3n predeterminada para <code>SplitChunksPlugin<\/code>  anda bastante bien para la mayor\u00eda de los usuarios.  Se crean varios fragmentos divididos en funci\u00f3n de una serie de <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/webpack.js.org\/plugins\/split-chunks-plugin\/#defaults\">condiciones<\/a><br \/>\npara evitar la consecuci\u00f3n de c\u00f3digo duplicado en varias rutas.<\/p>\n<p>A pesar de todo, muchos frameworks web que utilizan este complemento siguen un enfoque de \u00abcom\u00fan \u00fanico\u00bb para la divisi\u00f3n de fragmentos.  Next.js, a modo de ejemplo, generar\u00eda un <code>commons<\/code> paquete que conten\u00eda cualquier m\u00f3dulo que se usa en m\u00e1s del 50% de las p\u00e1ginas y todas las dependencias del marco (<code>react<\/code>, <code>react-dom<\/code>, y as\u00ed).<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"highlight-line\"><span class=\"token keyword\">const<\/span> splitChunksConfigs <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">  \u2026<\/span><br><span class=\"highlight-line\">  prod<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">    chunks<span class=\"token operator\">:<\/span> <span class=\"token string\">'all'<\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\">    cacheGroups<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">      <span class=\"token keyword\">default<\/span><span class=\"token operator\">:<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\">      vendors<span class=\"token operator\">:<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\">      commons<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">        name<span class=\"token operator\">:<\/span> <span class=\"token string\">'commons'<\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\">        chunks<span class=\"token operator\">:<\/span> <span class=\"token string\">'all'<\/span><span class=\"token punctuation\">,<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">        minChunks<span class=\"token operator\">:<\/span> totalPages <span class=\"token operator\">&gt;<\/span> <span class=\"token number\">2<\/span> <span class=\"token operator\">?<\/span> totalPages <span class=\"token operator\">*<\/span> <span class=\"token number\">0.5<\/span> <span class=\"token operator\">:<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">,<\/span><\/mark><br><span class=\"highlight-line\">      <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\">      react<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">use-subscription)[\/]\/<\/span><span class=\"token punctuation\">,<\/span><\/mark><br><span class=\"highlight-line\">      <span class=\"token punctuation\"><\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\">    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>A\u00fan cuando incluir c\u00f3digo dependiente del marco en un fragmento compartido significa que se puede descargar y almacenar en cach\u00e9 para cualquier punto de entrada, la heur\u00edstica basada en el uso de incluir m\u00f3dulos comunes utilizados en m\u00e1s de<br \/>\n<em>la mitad de las p\u00e1ginas<\/em> no es muy eficaz.  La modificaci\u00f3n de esta proporci\u00f3n solo dar\u00eda como consecuencia uno de dos resultados:<\/p>\n<ul>\n<li>Si reduce la proporci\u00f3n, se descarga m\u00e1s c\u00f3digo innecesario.<\/li>\n<li>Si aumenta la proporci\u00f3n, se duplicar\u00e1 m\u00e1s c\u00f3digo en varias rutas.<\/li>\n<\/ul>\n<p>Para solucionar este problema, Next.js adopt\u00f3 un <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/zeit\/next.js\/pull\/7696\">configuraci\u00f3n distinto<\/a> para<code>SplitChunksPlugin<\/code> que reduce el c\u00f3digo innecesario para cualquier ruta.<\/p>\n<ul>\n<li>Cualquier m\u00f3dulo de terceros suficientemente grande (m\u00e1s de 160 KB) se divide en su propio fragmento individual<\/li>\n<li>Una separacion <code>frameworks<\/code> se crea un fragmento para las dependencias del marco (<code>react<\/code>, <code>react-dom<\/code>, y as\u00ed)<\/li>\n<li>Se crean tantos fragmentos compartidos como sean necesarios (hasta 25)<\/li>\n<li>El tama\u00f1o m\u00ednimo para generar un fragmento se cambia a 20 KB<\/li>\n<\/ul>\n<p>Esta estrategia de fragmentaci\u00f3n granular proporciona los siguientes beneficios:<\/p>\n<ul>\n<li><strong>Se mejoran los tiempos de carga de la p\u00e1gina<\/strong>.  La emisi\u00f3n de varios fragmentos compartidos, en lugar de uno solo, minimiza la cantidad de c\u00f3digo innecesario (o duplicado) para cualquier punto de entrada.<\/li>\n<li><strong>Almacenamiento en cach\u00e9 mejorado durante la navegaci\u00f3n<\/strong>.  La divisi\u00f3n de bibliotecas grandes y dependencias del marco en fragmentos separados reduce la oportunidad de invalidaci\u00f3n de cach\u00e9, puesto que es poco probable que ambos cambien hasta que se realice una actualizaci\u00f3n.<\/li>\n<\/ul>\n<p>Puede ver la configuraci\u00f3n completa que Next.js adopt\u00f3 en <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/vercel\/next.js\/blob\/e125d905a0dd93d247c6122d349c2c90268f0713\/packages\/next\/build\/webpack-config.ts#L352-L429\"><code>webpack-config.ts<\/code><\/a>.<\/p>\n<h2 id=\"more-http-requests\"><span class=\"ez-toc-section\" id=\"Mas-solicitudes-HTTP\"><\/span>M\u00e1s solicitudes HTTP <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><code>SplitChunksPlugin<\/code>  defini\u00f3 la base para la fragmentaci\u00f3n granular, y aplicar este enfoque a un marco como Next.js no era un concepto totalmente nuevo.  A pesar de todo, muchos frameworks continuaron utilizando una \u00fanica estrategia heur\u00edstica y de paquetes \u00abcomunes\u00bb por algunas razones.  Esto incluye la preocupaci\u00f3n de que muchas m\u00e1s solicitudes HTTP puedan afectar negativamente al rendimiento del sitio.<\/p>\n<p>Los navegadores solo pueden abrir un n\u00famero limitado de conexiones TCP a un solo origen (6 para Chrome), por lo que minimizar el n\u00famero de fragmentos generados por un agrupador puede asegurar que el n\u00famero total de solicitudes permanezca por debajo de este umbral.  A pesar de todo, esto solo es cierto para HTTP \/ 1.1.  La multiplexaci\u00f3n en HTTP \/ 2 posibilita transmitir diversos solicitudes en paralelo utilizando una sola conexi\u00f3n sobre un solo origen.  Dicho de otra forma, de forma general no tenemos que preocuparnos por limitar la cantidad de fragmentos emitidos por nuestro agrupador.<\/p>\n<p><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/caniuse.com\/#feat=http2\">Todos los principales navegadores<\/a> admite HTTP \/ 2.  Los equipos de Chrome y Next.js quer\u00edan ver si incrementar el n\u00famero de solicitudes dividiendo el paquete \u00abcommons\u00bb \u00fanico de Next.js en varios fragmentos compartidos afectar\u00eda el rendimiento de carga de alguna manera.  Comenzaron midiendo el rendimiento de un solo sitio mientras modificaban el n\u00famero m\u00e1ximo de solicitudes paralelas usando el<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/webpack.js.org\/plugins\/split-chunks-plugin\/#splitchunksmaxinitialrequests\"><code>maxInitialRequests<\/code><\/a><\/p>\n<p>propiedad.<\/p>\n<p><img alt='performance-num-requests-1-2748678' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/performance-num-requests-1-2748678.png' alt=\"Rendimiento de carga de la p\u00e1gina con mayor n\u00famero de solicitudes\"><\/p>\n<p>En un promedio de tres ejecuciones de diversos pruebas en una sola p\u00e1gina web, el<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Window\/load_event\"><code>load<\/code><\/a>,<br \/>\niniciar-renderizar<br \/>\ny los tiempos de First Contentful Paint permanecieron pr\u00e1cticamente iguales al variar el n\u00famero m\u00e1ximo de solicitudes iniciales (de 5 a 15).  Curiosamente, notamos una ligera sobrecarga de rendimiento solo posteriormente de dividir de forma agresiva a miles de solicitudes.<\/p>\n<p><img alt='performance-num-requests-2-1561814' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/performance-num-requests-2-1561814.png' alt=\"Rendimiento de carga de p\u00e1gina con cientos de solicitudes\"><\/p>\n<p>Esto mostr\u00f3 que mantenerse por debajo de un umbral confiable (20 ~ 25 solicitudes) logr\u00f3 el equilibrio adecuado entre el rendimiento de carga y la eficiencia del almacenamiento en cach\u00e9.  Posteriormente de algunas pruebas de referencia, se seleccion\u00f3 25 como <code>maxInitialRequest<\/code> contar.<\/p>\n<p>Modificar el n\u00famero m\u00e1ximo de solicitudes que ocurren en paralelo result\u00f3 en m\u00e1s de un paquete compartido y separarlos apropiadamente para cada punto de entrada redujo significativamente la cantidad de c\u00f3digo innecesario para la misma p\u00e1gina.<\/p>\n<p><img alt='js-payload-num-requests-7283783' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/js-payload-num-requests-7283783.png' alt=\"Reducciones de carga \u00fatil de JavaScript con mayor fragmentaci\u00f3n\"><\/p>\n<p>Este experimento solo consist\u00eda en modificar la cantidad de solicitudes para ver si habr\u00eda alg\u00fan efecto negativo en el rendimiento de carga de la p\u00e1gina.  Los resultados sugieren que la configuraci\u00f3n <code>maxInitialRequests<\/code> a<br \/>\n<code>25<\/code> en la p\u00e1gina de prueba fue \u00f3ptimo debido a que redujo el tama\u00f1o de la carga \u00fatil de JavaScript sin ralentizar la p\u00e1gina.  La cantidad total de JavaScript que se necesitaba para hidratar la p\u00e1gina segu\u00eda siendo la misma, lo que explica por qu\u00e9 el rendimiento de carga de la p\u00e1gina no necesariamente mejor\u00f3 con la cantidad reducida de c\u00f3digo.<\/p>\n<p>webpack utiliza 30 KB como tama\u00f1o m\u00ednimo predeterminado para que se genere un fragmento.  A pesar de todo, acoplar un<br \/>\n<code>maxInitialRequests<\/code> el valor de 25 con un tama\u00f1o m\u00ednimo de 20 KB result\u00f3 en un mejor almacenamiento en cach\u00e9.<\/p>\n<h2 id=\"size-reductions-with-granular-chunks\"><span class=\"ez-toc-section\" id=\"Reducciones-de-tamano-con-trozos-granulares\"><\/span>Reducciones de tama\u00f1o con trozos granulares <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Muchos marcos, incluido Next.js, se centran en el enrutamiento del lado del cliente (manejado por JavaScript) para inyectar etiquetas de script m\u00e1s nuevas para cada transici\u00f3n de ruta.  Pero, \u00bfc\u00f3mo predeterminan estos fragmentos din\u00e1micos en el momento de la construcci\u00f3n?<\/p>\n<p>Next.js utiliza un archivo de manifiesto de compilaci\u00f3n del lado del servidor para establecer qu\u00e9 fragmentos generados son utilizados por diferentes puntos de entrada.  Para proporcionar esta informaci\u00f3n adem\u00e1s al cliente, se cre\u00f3 un archivo de manifiesto de compilaci\u00f3n abreviado del lado del cliente para adjudicar todas las dependencias para cada punto de entrada.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-javascript\"><code class=\"language-javascript\"><br><span class=\"token function\">getDependencies<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">route<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">return<\/span> <span class=\"token keyword\">this<\/span><span class=\"token punctuation\">.<\/span>promisedBuildManifest<span class=\"token punctuation\">.<\/span><span class=\"token function\">then<\/span><span class=\"token punctuation\">(<\/span><br><span class=\"token parameter\">man<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">(<\/span>man<span class=\"token punctuation\">[<\/span>route<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">&amp;&amp;<\/span> man<span class=\"token punctuation\">[<\/span>route<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">direcci\u00f3n url<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">\/_next\/<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>direcci\u00f3n url<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">||<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><br><span class=\"token punctuation\">)<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<figure class=\"w-figure\">\n  <img alt='outputted-chunks-9444947' class=\"w-screenshot-filled\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/outputted-chunks-9444947.png' alt=\"Salida de m\u00faltiples fragmentos compartidos en una aplicaci\u00f3n Next.js.\"><br \/>\n<\/figure>\n<p>Esta nueva estrategia de fragmentaci\u00f3n granular se implement\u00f3 por primera vez en Next.js detr\u00e1s de una bandera, donde se prob\u00f3 en varios de los primeros usuarios.  Muchos vieron reducciones significativas en el JavaScript total utilizado para todo su sitio:<\/p>\n<p>La versi\u00f3n final se envi\u00f3 por defecto en <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/nextjs.org\/blog\/next-9-2\">versi\u00f3n 9.2<\/a>.<\/p>\n<h2 id=\"gatsby\"><span class=\"ez-toc-section\" id=\"Gatsby\"><\/span>Gatsby <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.gatsbyjs.org\/\">Gatsby<\/a> utilizado para seguir el mismo enfoque de usar una heur\u00edstica basada en el uso para establecer m\u00f3dulos comunes:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"highlight-line\">config<span class=\"token punctuation\">.<\/span>optimization <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">  \u2026<\/span><br><span class=\"highlight-line\">  splitChunks<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">    name<span class=\"token operator\">:<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\">    chunks<span class=\"token operator\">:<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">all<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\">    cacheGroups<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">      <span class=\"token keyword\">default<\/span><span class=\"token operator\">:<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\">      vendors<span class=\"token operator\">:<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\">      commons<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">        name<span class=\"token operator\">:<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">commons<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\">        chunks<span class=\"token operator\">:<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">all<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\">        <\/span><br><span class=\"highlight-line\">        <\/span><br><mark class=\"highlight-line highlight-line-active\">        minChunks<span class=\"token operator\">:<\/span> componentsCount <span class=\"token operator\">&gt;<\/span> <span class=\"token number\">2<\/span> <span class=\"token operator\">?<\/span> componentsCount <span class=\"token operator\">*<\/span> <span class=\"token number\">0.5<\/span> <span class=\"token operator\">:<\/span> <span class=\"token number\">2<\/span><span class=\"token punctuation\">,<\/span><\/mark><br><span class=\"highlight-line\">      <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><\/span><br><span class=\"highlight-line\">      react<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">react-dom<\/span><span class=\"token punctuation\">,<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Al aprovechar al m\u00e1ximo la configuraci\u00f3n de su paquete web para adoptar una estrategia de fragmentaci\u00f3n granular semejante, adem\u00e1s notaron reducciones considerables de JavaScript en muchos sitios grandes:<\/p>\n<p>Eche un vistazo al <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/gatsbyjs\/gatsby\/pull\/22253\">PR<\/a> para saber c\u00f3mo implementaron esta l\u00f3gica en la configuraci\u00f3n de su paquete web, que se env\u00eda de forma predeterminada en v2.20.7.<\/p>\n<h2 id=\"conclusion\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusi\u00f3n <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>El concepto de env\u00edo de fragmentos granulares no es espec\u00edfico de Next.js, Gatsby o inclusive webpack.  Todo el mundo deber\u00eda considerar mejorar la estrategia de fragmentaci\u00f3n de su aplicaci\u00f3n si sigue un gran enfoque de paquete \u00abcom\u00fan\u00bb, independientemente del marco o paquete de m\u00f3dulos utilizado.<\/p>\n<ul>\n<li>Si desea ver las mismas optimizaciones de fragmentaci\u00f3n aplicadas a una aplicaci\u00f3n de React vainilla, eche un vistazo a esto <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/glitch.com\/edit\/#!\/webpack-granular-split-chunks?path=webpack.config.js\">muestra de la aplicaci\u00f3n React<\/a>.  Usa una versi\u00f3n simplificada de la estrategia de fragmentaci\u00f3n granular y puede ayudarlo a empezar a aplicar el mismo tipo de l\u00f3gica a su sitio.<\/li>\n<li>Para Rollup, los fragmentos se crean de forma granular de forma predeterminada.  Echa un vistazo a<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/rollupjs.org\/guide\/en\/#manualchunks\"><code>manualChunks<\/code><\/a>  si desea configurar manualmente el comportamiento.<\/li>\n<\/ul>\n<p>    <web-feedback additional-questions=\"\"><\/web-feedback>\n  <\/div>\n","protected":false},"excerpt":{"rendered":"<p>A new webpack fragmentation strategy in Next.js and Gatsby minimizes duplicate code to boost page load performance. April 29, 2020\u2026<\/p>","protected":false},"author":1,"featured_media":92548,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1356],"tags":[],"class_list":["post-92547","post","type-post","status-publish","format-standard","has-post-thumbnail","category-dev"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Se mejor\u00f3 el rendimiento de carga de p\u00e1ginas de Next.js y Gatsby con fragmentaci\u00f3n granular - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"Una nueva estrategia de fragmentaci\u00f3n de paquetes web en Next.js y Gatsby minimiza el c\u00f3digo duplicado para impulsar el rendimiento de carga de la p\u00e1gina.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/improved-page-loading-performance-of-next-js-and-gatsby-with-granular-fragmentation\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Se mejor\u00f3 el rendimiento de carga de p\u00e1ginas de Next.js y Gatsby con fragmentaci\u00f3n granular\" \/>\n<meta property=\"og:description\" content=\"Una nueva estrategia de fragmentaci\u00f3n de paquetes web en Next.js y Gatsby minimiza el c\u00f3digo duplicado para impulsar el rendimiento de carga de la p\u00e1gina.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/en\/dev\/improved-page-loading-performance-of-next-js-and-gatsby-with-granular-fragmentation\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-29T01:59:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/hero-8505575.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"360\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/improved-page-loading-performance-of-next-js-and-gatsby-with-granular-fragmentation\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/improved-page-loading-performance-of-next-js-and-gatsby-with-granular-fragmentation\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"Se mejor\u00f3 el rendimiento de carga de p\u00e1ginas de Next.js y Gatsby con fragmentaci\u00f3n granular\",\"datePublished\":\"2022-09-29T01:59:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/improved-page-loading-performance-of-next-js-and-gatsby-with-granular-fragmentation\\\/\"},\"wordCount\":1567,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/improved-page-loading-performance-of-next-js-and-gatsby-with-granular-fragmentation\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/hero-8505575.png\",\"articleSection\":[\"Dev\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/improved-page-loading-performance-of-next-js-and-gatsby-with-granular-fragmentation\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/improved-page-loading-performance-of-next-js-and-gatsby-with-granular-fragmentation\\\/\",\"name\":\"Se mejor\u00f3 el rendimiento de carga de p\u00e1ginas de Next.js y Gatsby con fragmentaci\u00f3n granular - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/improved-page-loading-performance-of-next-js-and-gatsby-with-granular-fragmentation\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/improved-page-loading-performance-of-next-js-and-gatsby-with-granular-fragmentation\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/hero-8505575.png\",\"datePublished\":\"2022-09-29T01:59:39+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"Una nueva estrategia de fragmentaci\u00f3n de paquetes web en Next.js y Gatsby minimiza el c\u00f3digo duplicado para impulsar el rendimiento de carga de la p\u00e1gina.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/improved-page-loading-performance-of-next-js-and-gatsby-with-granular-fragmentation\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/improved-page-loading-performance-of-next-js-and-gatsby-with-granular-fragmentation\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/hero-8505575.png\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/hero-8505575.png\",\"width\":1200,\"height\":360,\"caption\":\"hero-8505575-4845384-png\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Se mejor\u00f3 el rendimiento de carga de p\u00e1ginas de Next.js y Gatsby con fragmentaci\u00f3n granular - R Marketing Digital","description":"Una nueva estrategia de fragmentaci\u00f3n de paquetes web en Next.js y Gatsby minimiza el c\u00f3digo duplicado para impulsar el rendimiento de carga de la p\u00e1gina.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rmarketingdigital.com\/en\/dev\/improved-page-loading-performance-of-next-js-and-gatsby-with-granular-fragmentation\/","og_locale":"en_US","og_type":"article","og_title":"Se mejor\u00f3 el rendimiento de carga de p\u00e1ginas de Next.js y Gatsby con fragmentaci\u00f3n granular","og_description":"Una nueva estrategia de fragmentaci\u00f3n de paquetes web en Next.js y Gatsby minimiza el c\u00f3digo duplicado para impulsar el rendimiento de carga de la p\u00e1gina.","og_url":"https:\/\/rmarketingdigital.com\/en\/dev\/improved-page-loading-performance-of-next-js-and-gatsby-with-granular-fragmentation\/","og_site_name":"R Marketing Digital","article_published_time":"2022-09-29T01:59:39+00:00","og_image":[{"width":1200,"height":360,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/hero-8505575.png","type":"image\/png"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/en\/dev\/improved-page-loading-performance-of-next-js-and-gatsby-with-granular-fragmentation\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/en\/dev\/improved-page-loading-performance-of-next-js-and-gatsby-with-granular-fragmentation\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"Se mejor\u00f3 el rendimiento de carga de p\u00e1ginas de Next.js y Gatsby con fragmentaci\u00f3n granular","datePublished":"2022-09-29T01:59:39+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/en\/dev\/improved-page-loading-performance-of-next-js-and-gatsby-with-granular-fragmentation\/"},"wordCount":1567,"image":{"@id":"https:\/\/rmarketingdigital.com\/en\/dev\/improved-page-loading-performance-of-next-js-and-gatsby-with-granular-fragmentation\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/hero-8505575.png","articleSection":["Dev"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/en\/dev\/improved-page-loading-performance-of-next-js-and-gatsby-with-granular-fragmentation\/","url":"https:\/\/rmarketingdigital.com\/en\/dev\/improved-page-loading-performance-of-next-js-and-gatsby-with-granular-fragmentation\/","name":"Se mejor\u00f3 el rendimiento de carga de p\u00e1ginas de Next.js y Gatsby con fragmentaci\u00f3n granular - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/en\/dev\/improved-page-loading-performance-of-next-js-and-gatsby-with-granular-fragmentation\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/en\/dev\/improved-page-loading-performance-of-next-js-and-gatsby-with-granular-fragmentation\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/hero-8505575.png","datePublished":"2022-09-29T01:59:39+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"Una nueva estrategia de fragmentaci\u00f3n de paquetes web en Next.js y Gatsby minimiza el c\u00f3digo duplicado para impulsar el rendimiento de carga de la p\u00e1gina.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/en\/dev\/improved-page-loading-performance-of-next-js-and-gatsby-with-granular-fragmentation\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/rmarketingdigital.com\/en\/dev\/improved-page-loading-performance-of-next-js-and-gatsby-with-granular-fragmentation\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/hero-8505575.png","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/hero-8505575.png","width":1200,"height":360,"caption":"hero-8505575-4845384-png"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"R Digital Marketing","description":"SEO Agency | Advertising social networks | Community Management","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"R Digital Marketing","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts\/92547","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/comments?post=92547"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts\/92547\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/media\/92548"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/media?parent=92547"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/categories?post=92547"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/tags?post=92547"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}