"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "het-dilemma", "hProperties": { "id": "het-dilemma" } }, "depth": 2, "value": "Het dilemma" }, { "data": { "id": "de-oplossing", "hProperties": { "id": "de-oplossing" } }, "depth": 2, "value": "De oplossing" }, { "data": { "id": "maak-de-wrapper", "hProperties": { "id": "maak-de-wrapper" } }, "depth": 3, "value": "Maak de wrapper" }, { "data": { "id": "behandel-de-retries", "hProperties": { "id": "behandel-de-retries" } }, "depth": 3, "value": "Behandel de retries" }, { "data": { "id": "behandel-de-refreshes", "hProperties": { "id": "behandel-de-refreshes" } }, "depth": 3, "value": "Behandel de refreshes" }, { "data": { "id": "meerdere-lazy-componenten-op-dezelfde-pagina", "hProperties": { "id": "meerdere-lazy-componenten-op-dezelfde-pagina" } }, "depth": 3, "value": "Meerdere lazy componenten op dezelfde pagina" }, { "data": { "id": "conclusie", "hProperties": { "id": "conclusie" } }, "depth": 2, "value": "Conclusie" }]; const readingTime = { "minutes": 3, "words": 930, "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: "het-dilemma", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#het-dilemma", children: _jsx(_components.span, { children: "#" }) }), "Het dilemma"] }), "\n", _jsx(_components.p, { children: "Tegenwoordig gaat softwareontwikkeling sneller volgens de populaire \"snel bewegen en dingen breken\" filosofie. Geen oordeel hier - het is gewoon hoe het is. Echter, deze snelle tempo kan soms leiden tot problemen, vooral als het gaat om het laden van componenten in React." }), "\n", _jsxs(_components.p, { children: ["Als je werkt aan een project dat ", _jsx(_components.a, { href: "https://react.dev/reference/react/lazy", children: "React.lazy" }), " gebruikt om componenten op aanvraag te laden, ben je mogelijk problemen tegengekomen zoals ", _jsx(_components.code, { children: "ChunkLoadError" }), " en ", _jsx(_components.code, { children: "Loading chunk failed" }), ". Hier zijn enkele mogelijke redenen:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Er is een netwerkprobleem, bijvoorbeeld, de internetverbinding van de gebruiker is traag of onstabiel." }), "\n", _jsx(_components.li, { children: "De gebruiker heeft een verouderde versie van de app, en de browser probeert een chunk te laden die niet meer bestaat." }), "\n"] }), "\n", _jsx(_components.p, { children: "Meestal kan een eenvoudige verversing van de pagina het probleem oplossen, maar het biedt geen geweldige gebruikerservaring. Stel je voor dat een wit scherm verschijnt wanneer de gebruiker naar een andere route navigeert - dat ziet er niet goed uit voor je app." }), "\n", _jsx(_components.p, { children: "Kunnen we de behoefte aan snelheid balanceren met de behoefte aan een soepele gebruikerservaring? Zeker. Laat me je laten zien hoe (natuurlijk met TypeScript)." }), "\n", _jsxs(_components.h2, { id: "de-oplossing", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#de-oplossing", children: _jsx(_components.span, { children: "#" }) }), "De oplossing"] }), "\n", _jsx(_components.p, { children: "Een brute force-oplossing kan zijn om alle versies van de chunks op de server op te slaan, waardoor er geen \"missing chunk\" probleem meer is. Naarmate je app groeit, kan deze oplossing onpraktisch worden vanwege toenemende schijfruimtevereisten, en het lost het netwerkprobleem nog steeds niet op." }), "\n", _jsxs(_components.p, { children: ["Gezien het feit dat een retry of een refresh het probleem kan oplossen, kunnen we deze oplossingen in onze code implementeren. Aangezien het probleem meestal optreedt wanneer de gebruiker naar een andere route navigeert, kunnen we het oplossen zonder dat de gebruiker het merkt. Het enige dat we hoeven te doen, is een wrapper rond de ", _jsx(_components.code, { children: "React.lazy" }), " functie bouwen die de retries en refreshes afhandelt."] }), "\n", _jsx(_components.p, { children: "Er zijn al enkele geweldige artikelen over het implementeren van dit soort oplossingen, dus ik zal me concentreren op het idee en het innerlijke werk van de oplossing." }), "\n", _jsx(Info, { children: _jsxs(_components.p, { children: ["De definitieve code is beschikbaar in deze ", _jsx(_components.a, { href: "https://github.com/silverhand-io/react-safe-lazy", children: "GitHub\nrepository" }), " en het ", _jsx(_components.code, { children: "react-safe-lazy" }), " pakket is\nbeschikbaar op ", _jsx(_components.a, { href: "https://www.npmjs.com/package/react-safe-lazy", children: "NPM" }), ". Het pakket is volledig getest,\nextreem draagbaar (minzipped ~700B) en klaar om in je project te worden gebruikt."] }) }), "\n", _jsxs(_components.h3, { id: "maak-de-wrapper", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#maak-de-wrapper", children: _jsx(_components.span, { children: "#" }) }), "Maak de wrapper"] }), "\n", _jsxs(_components.p, { children: ["De eerste stap is om een wrapper rond de ", _jsx(_components.code, { children: "React.lazy" }), " functie te maken:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { lazy, type ComponentType } from 'react';\n\n// Gebruik generiekheid voor de juiste type-inferentie\nconst safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n return lazy(async () => {\n return await importFunction();\n });\n};\n" }) }), "\n", _jsxs(_components.h3, { id: "behandel-de-retries", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#behandel-de-retries", children: _jsx(_components.span, { children: "#" }) }), "Behandel de retries"] }), "\n", _jsxs(_components.p, { children: ["Voor netwerkproblemen kunnen we de retries afhandelen door de ", _jsx(_components.code, { children: "importFunction" }), " in te wikkelen in een ", _jsx(_components.code, { children: "tryImport" }), " functie:"] }), "\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 // Maximaal 3 keer opnieuw proberen\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: ["Ziet er simpel uit, toch? Je kunt ook het ", _jsx(_components.a, { href: "https://en.wikipedia.org/wiki/Exponential_backoff", children: "exponential backoff" }), " algoritme implementeren om de retries efficiënter af te handelen."] }), "\n", _jsxs(_components.h3, { id: "behandel-de-refreshes", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#behandel-de-refreshes", children: _jsx(_components.span, { children: "#" }) }), "Behandel de refreshes"] }), "\n", _jsx(_components.p, { children: "Voor het verouderde versieprobleem kunnen we de refreshes afhandelen door de fout op te vangen en de pagina te verversen:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "const safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n // ...tryImport functie\n\n return lazy(async () => {\n try {\n return await tryImport();\n } catch (error) {\n window.location.reload();\n // Retourneer een dummy-component om het retourtype van React.lazy te matchen\n return { default: () => null };\n }\n });\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["Echter, deze implementatie is erg gevaarlijk, omdat het een oneindige lus van refreshes kan veroorzaken wanneer de fout niet opgelost kan worden met een refresh. Ondertussen gaat de app-status verloren tijdens de refresh. Dus we hebben de hulp van ", _jsx(_components.code, { children: "sessionStorage" }), " nodig om het bericht op te slaan dat we geprobeerd hebben om de pagina te verversen:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "const safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n // ...tryImport functie\n\n return lazy(async () => {\n try {\n const component = await tryImport();\n\n // Wis de sessionStorage wanneer het component succesvol is geladen\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 // Gooi de fout als het component niet kan worden geladen na een refresh\n throw error;\n }\n });\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["Nu, wanneer we de fout van de ", _jsx(_components.code, { children: "safeLazy" }), " functie opvangen, weten we dat het iets is dat niet opgelost kan worden met een refresh."] }), "\n", _jsxs(_components.h3, { id: "meerdere-lazy-componenten-op-dezelfde-pagina", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#meerdere-lazy-componenten-op-dezelfde-pagina", children: _jsx(_components.span, { children: "#" }) }), "Meerdere lazy componenten op dezelfde pagina"] }), "\n", _jsxs(_components.p, { children: ["Er is nog steeds een verborgen valkuil met de huidige implementatie. Als je meerdere lazy componenten op dezelfde pagina hebt, kan de oneindige lus van refreshes nog steeds optreden omdat andere componenten de ", _jsx(_components.code, { children: "sessionStorage" }), " waarde kunnen resetten. Om dit probleem op te lossen, kunnen we een unieke sleutel voor elk component gebruiken:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "const safeLazy = (importFunction: () => Promise<{ default: ComponentType }>) => {\n // ...tryImport functie\n\n // De sleutel kan alles unieks voor elk component zijn\n const storageKey = importFunction.toString();\n return lazy(async () => {\n try {\n const component = await tryImport();\n\n // Wis de sessionStorage wanneer het component succesvol is geladen\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 // Gooi de fout als het component niet kan worden geladen na een refresh\n throw error;\n }\n });\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["Nu zal elk component zijn eigen ", _jsx(_components.code, { children: "sessionStorage" }), " sleutel hebben, en de oneindige lus van refreshes zal vermeden worden. We kunnen doorgaan met het finetunen van de oplossing, bijvoorbeeld:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Alle sleutels in een array verzamelen, zodat slechts één opslag sleutel nodig is." }), "\n", _jsx(_components.li, { children: "Een refresh limiet instellen om de pagina meer dan één keer te verversen voordat een fout wordt gegooid." }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Maar ik denk dat je het idee wel hebt. Een uitgebreide TypeScript-oplossing met tests en configuraties is beschikbaar in de ", _jsx(_components.a, { href: "https://github.com/silverhand-io/react-safe-lazy", children: "GitHub repository" }), ". Ik heb ook het ", _jsx(_components.code, { children: "react-safe-lazy" }), " pakket gepubliceerd op ", _jsx(_components.a, { href: "https://www.npmjs.com/package/react-safe-lazy", children: "NPM" }), ", zodat je het direct in je project kunt gebruiken."] }), "\n", _jsxs(_components.h2, { id: "conclusie", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#conclusie", children: _jsx(_components.span, { children: "#" }) }), "Conclusie"] }), "\n", _jsxs(_components.p, { children: ["Softwareontwikkeling is een delicate klus, en zelfs de kleinste details kunnen inspanning vergen om op te lossen. Ik hoop dat dit artikel je kan helpen om de problemen met ", _jsx(_components.code, { children: "React.lazy" }), " op een gracieuze manier af te handelen en de gebruikerservaring van je app te verbeteren."] })] }); } 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."); }