"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "el-dilema", "hProperties": { "id": "el-dilema" } }, "depth": 2, "value": "El dilema" }, { "data": { "id": "la-solución", "hProperties": { "id": "la-solución" } }, "depth": 2, "value": "La solución" }, { "data": { "id": "crear-el-contenedor", "hProperties": { "id": "crear-el-contenedor" } }, "depth": 3, "value": "Crear el contenedor" }, { "data": { "id": "manejar-los-reintentos", "hProperties": { "id": "manejar-los-reintentos" } }, "depth": 3, "value": "Manejar los reintentos" }, { "data": { "id": "manejar-las-actualizaciones", "hProperties": { "id": "manejar-las-actualizaciones" } }, "depth": 3, "value": "Manejar las actualizaciones" }, { "data": { "id": "múltiples-componentes-lazy-en-la-misma-página", "hProperties": { "id": "múltiples-componentes-lazy-en-la-misma-página" } }, "depth": 3, "value": "Múltiples componentes lazy en la misma página" }, { "data": { "id": "conclusión", "hProperties": { "id": "conclusión" } }, "depth": 2, "value": "Conclusión" }]; const readingTime = { "minutes": 3, "words": 938, "text": "3 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", h3: "h3", li: "li", p: "p", pre: "pre", span: "span", ul: "ul", ..._provideComponents(), ...props.components }, {Info} = _components; if (!Info) _missingMdxReference("Info", true); return _jsxs(_Fragment, { children: [_jsxs(_components.h2, { id: "el-dilema", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#el-dilema", children: _jsx(_components.span, { children: "#" }) }), "El dilema"] }), "\n", _jsx(_components.p, { children: "Hoy en día, el desarrollo de software se mueve más rápido bajo la popular filosofía de \"moverse rápido y romper cosas\". No es un juicio, simplemente es así. Sin embargo, este ritmo acelerado a veces puede llevar a problemas, especialmente cuando se trata de cargar componentes en React." }), "\n", _jsxs(_components.p, { children: ["Si estás trabajando en un proyecto que usa ", _jsx(_components.a, { href: "https://react.dev/reference/react/lazy", children: "React.lazy" }), " para cargar componentes bajo demanda, es posible que hayas encontrado algunos problemas como ", _jsx(_components.code, { children: "ChunkLoadError" }), " y ", _jsx(_components.code, { children: "Loading chunk failed" }), ". Aquí hay algunas posibles razones:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Hay un problema de red, por ejemplo, la conexión a internet del usuario es lenta o inestable." }), "\n", _jsx(_components.li, { children: "El usuario está en una versión obsoleta de la aplicación, y el navegador está tratando de cargar un fragmento que ya no existe." }), "\n"] }), "\n", _jsx(_components.p, { children: "Usualmente, una simple actualización de la página puede resolver el problema, pero no es una gran experiencia para el usuario. Imagina si aparece una pantalla en blanco cuando el usuario navega a otra ruta - no es una buena imagen para tu aplicación." }), "\n", _jsx(_components.p, { children: "¿Podemos equilibrar la necesidad de velocidad con la necesidad de una experiencia de usuario fluida? Claro. Déjame mostrarte cómo (con TypeScript, por supuesto)." }), "\n", _jsxs(_components.h2, { id: "la-solución", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#la-solución", children: _jsx(_components.span, { children: "#" }) }), "La solución"] }), "\n", _jsx(_components.p, { children: "Una solución de fuerza bruta podría ser guardar todas las versiones de los fragmentos en el servidor, evitando así el problema del \"fragmento faltante\". A medida que tu aplicación crece, esta solución puede volverse inviable debido al aumento de los requerimientos de espacio en disco, y aún no resuelve el problema de la red." }), "\n", _jsxs(_components.p, { children: ["Dado que un reinicio o una actualización pueden resolver el problema, podemos implementar estas soluciones en nuestro código. Como el problema generalmente ocurre cuando el usuario navega a otra ruta, podemos solucionarlo incluso sin que el usuario lo note. Todo lo que necesitamos hacer es construir un contenedor alrededor de la función ", _jsx(_components.code, { children: "React.lazy" }), " que maneje los reintentos y las actualizaciones."] }), "\n", _jsx(_components.p, { children: "Ya existen algunos artículos excelentes sobre cómo implementar este tipo de solución, así que me enfocaré en la idea y el funcionamiento interno de la solución." }), "\n", _jsx(Info, { children: _jsxs(_components.p, { children: ["El código final está disponible en este ", _jsx(_components.a, { href: "https://github.com/silverhand-io/react-safe-lazy", children: "repositorio de GitHub" }), " y el paquete ", _jsx(_components.code, { children: "react-safe-lazy" }), " está\ndisponible en ", _jsx(_components.a, { href: "https://www.npmjs.com/package/react-safe-lazy", children: "NPM" }), ". El paquete está completamente probado,\nes extremadamente portátil (minzipped ~700B), y está listo para utilizarse en tu proyecto."] }) }), "\n", _jsxs(_components.h3, { id: "crear-el-contenedor", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#crear-el-contenedor", children: _jsx(_components.span, { children: "#" }) }), "Crear el contenedor"] }), "\n", _jsxs(_components.p, { children: ["El primer paso es crear un contenedor alrededor de la función ", _jsx(_components.code, { children: "React.lazy" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { lazy, type ComponentType } from 'react';\n\n// Usa un genérico para una inferencia de tipos correcta\nconst safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n return lazy(async () => {\n return await importFunction();\n });\n};\n" }) }), "\n", _jsxs(_components.h3, { id: "manejar-los-reintentos", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#manejar-los-reintentos", children: _jsx(_components.span, { children: "#" }) }), "Manejar los reintentos"] }), "\n", _jsxs(_components.p, { children: ["Para los problemas de red, podemos manejar los reintentos envolviendo el ", _jsx(_components.code, { children: "importFunction" }), " en una función ", _jsx(_components.code, { children: "tryImport" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "const safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n let retries = 0;\n const tryImport = async () => {\n try {\n return await importFunction();\n } catch (error) {\n // Reintenta un máximo de 3 veces\n if (retries < 3) {\n retries++;\n return tryImport();\n }\n throw error;\n }\n };\n\n return lazy(async () => {\n return await tryImport();\n });\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["Parece simple, ¿verdad? También puedes implementar el algoritmo de ", _jsx(_components.a, { href: "https://es.wikipedia.org/wiki/Exponential_backoff", children: "exponential backoff" }), " para manejar los reintentos de manera más eficiente."] }), "\n", _jsxs(_components.h3, { id: "manejar-las-actualizaciones", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#manejar-las-actualizaciones", children: _jsx(_components.span, { children: "#" }) }), "Manejar las actualizaciones"] }), "\n", _jsx(_components.p, { children: "Para el problema de la versión obsoleta, podemos manejar las actualizaciones atrapando el error y refrescando la página:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "const safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n // ...función tryImport\n\n return lazy(async () => {\n try {\n return await tryImport();\n } catch (error) {\n window.location.reload();\n // Devuelve un componente dummy para que coincida con el tipo de retorno de React.lazy\n return { default: () => null };\n }\n });\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["Sin embargo, esta implementación es muy peligrosa, ya que puede causar un bucle infinito de actualizaciones cuando el error no puede solucionarse con una actualización. Mientras tanto, el estado de la aplicación se perderá durante la actualización. Así que necesitamos la ayuda de ", _jsx(_components.code, { children: "sessionStorage" }), " para almacenar el mensaje de que hemos intentado actualizar la página:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "const safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n // ...función tryImport\n\n return lazy(async () => {\n try {\n const component = await tryImport();\n\n // Limpia el sessionStorage cuando el componente se carga con éxito\n sessionStorage.removeItem('refreshed');\n\n return component;\n } catch (error) {\n if (!sessionStorage.getItem('refreshed')) {\n sessionStorage.setItem('refreshed', 'true');\n window.location.reload();\n return { default: () => null };\n }\n\n // Lanza el error si el componente no se puede cargar después de una actualización\n throw error;\n }\n });\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["Ahora, cuando atrapemos el error desde la función ", _jsx(_components.code, { children: "safeLazy" }), ", sabremos que es algo que no puede resolverse con una actualización."] }), "\n", _jsxs(_components.h3, { id: "múltiples-componentes-lazy-en-la-misma-página", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#múltiples-componentes-lazy-en-la-misma-página", children: _jsx(_components.span, { children: "#" }) }), "Múltiples componentes lazy en la misma página"] }), "\n", _jsxs(_components.p, { children: ["Todavía hay una trampa oculta en la implementación actual. Si tienes múltiples componentes lazy en la misma página, el bucle infinito de actualizaciones aún puede ocurrir porque otros componentes pueden restablecer el valor de ", _jsx(_components.code, { children: "sessionStorage" }), ". Para resolver este problema, podemos usar una clave única para cada componente:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "const safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n // ...función tryImport\n\n // La clave puede ser cualquier cosa única para cada componente\n const storageKey = importFunction.toString();\n return lazy(async () => {\n try {\n const component = await tryImport();\n\n // Limpia el sessionStorage cuando el componente se carga con éxito\n sessionStorage.removeItem(storageKey);\n\n return component;\n } catch (error) {\n if (!sessionStorage.getItem(storageKey)) {\n sessionStorage.setItem(storageKey, 'true');\n window.location.reload();\n return { default: () => null };\n }\n\n // Lanza el error si el componente no se puede cargar después de una actualización\n throw error;\n }\n });\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["Ahora, cada componente tendrá su propia clave en ", _jsx(_components.code, { children: "sessionStorage" }), ", y se evitará el bucle infinito de actualizaciones. Podemos seguir afinando la solución, por ejemplo:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Reunir todas las claves en un array, de modo que solo se necesite una clave de almacenamiento." }), "\n", _jsx(_components.li, { children: "Establecer un límite de actualización para actualizar la página más de una vez antes de lanzar un error." }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Pero creo que ya tienes la idea. Una solución completa en TypeScript con pruebas y configuraciones está disponible en el ", _jsx(_components.a, { href: "https://github.com/silverhand-io/react-safe-lazy", children: "repositorio de GitHub" }), ". También he publicado el paquete ", _jsx(_components.code, { children: "react-safe-lazy" }), " en ", _jsx(_components.a, { href: "https://www.npmjs.com/package/react-safe-lazy", children: "NPM" }), ", por lo que puedes usarlo en tu proyecto de inmediato."] }), "\n", _jsxs(_components.h2, { id: "conclusión", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#conclusión", children: _jsx(_components.span, { children: "#" }) }), "Conclusión"] }), "\n", _jsxs(_components.p, { children: ["El desarrollo de software es un trabajo delicado, y hasta los pequeños detalles pueden requerir esfuerzo para resolverse. Espero que este artículo te ayude a manejar con gracia los problemas con ", _jsx(_components.code, { children: "React.lazy" }), " y mejorar la experiencia de usuario de tu aplicación."] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { headings, readingTime, frontmatter, default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }