74 lines
7.1 KiB
XML
74 lines
7.1 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800" role="img" aria-labelledby="title desc">
|
|
<title id="title">Диагностика повторного client fetch после SSR</title>
|
|
<desc id="desc">Схема начинает с повторного client fetch после hydrate и разделяет четыре причины: snapshot отсутствует, snapshot совпадает, но игнорирован, версии markup и snapshot не совпадают, либо fetch вызван явным пользовательским действием. Для mismatch показано сохранение версий и остановка до mutation.</desc>
|
|
<defs>
|
|
<marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
|
|
<path d="M 0 0 L 10 5 L 0 10 z" fill="#516579"/>
|
|
</marker>
|
|
<marker id="arrow-red" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
|
|
<path d="M 0 0 L 10 5 L 0 10 z" fill="#bd3d4b"/>
|
|
</marker>
|
|
</defs>
|
|
<rect width="1200" height="800" fill="#f7fafc"/>
|
|
<rect x="42" y="34" width="1116" height="78" rx="18" fill="#102a43"/>
|
|
<text x="78" y="74" fill="#ffffff" font-family="Arial, sans-serif" font-size="30" font-weight="700">Повторный client fetch: сначала классифицируйте переход</text>
|
|
<text x="78" y="99" fill="#cbd8e6" font-family="Arial, sans-serif" font-size="18">Одинаковый запрос в DevTools может означать четыре разные причины и четыре разных действия.</text>
|
|
|
|
<rect x="365" y="148" width="470" height="100" rx="16" fill="#fff8df" stroke="#c99b2d" stroke-width="3"/>
|
|
<text x="402" y="189" fill="#785900" font-family="Arial, sans-serif" font-size="24" font-weight="700">После hydrate начался client fetch</text>
|
|
<text x="432" y="220" fill="#243b53" font-family="Arial, sans-serif" font-size="17">Сначала собрать owner, trigger, markup version и snapshot version.</text>
|
|
|
|
<line x1="600" y1="249" x2="600" y2="298" stroke="#516579" stroke-width="4" marker-end="url(#arrow)"/>
|
|
<line x1="126" y1="300" x2="1074" y2="300" stroke="#516579" stroke-width="4"/>
|
|
<line x1="150" y1="300" x2="150" y2="338" stroke="#516579" stroke-width="4" marker-end="url(#arrow)"/>
|
|
<line x1="436" y1="300" x2="436" y2="338" stroke="#516579" stroke-width="4" marker-end="url(#arrow)"/>
|
|
<line x1="764" y1="300" x2="764" y2="338" stroke="#bd3d4b" stroke-width="5" marker-end="url(#arrow-red)"/>
|
|
<line x1="1050" y1="300" x2="1050" y2="338" stroke="#516579" stroke-width="4" marker-end="url(#arrow)"/>
|
|
|
|
<rect x="52" y="348" width="196" height="220" rx="16" fill="#e6f0fb" stroke="#6b9fd1" stroke-width="3"/>
|
|
<text x="76" y="387" fill="#164a78" font-family="Arial, sans-serif" font-size="20" font-weight="700">1. No snapshot</text>
|
|
<text x="76" y="423" fill="#243b53" font-family="Arial, sans-serif" font-size="16">Bootstrap starts</text>
|
|
<text x="76" y="447" fill="#243b53" font-family="Arial, sans-serif" font-size="16">with empty state.</text>
|
|
<line x1="76" y1="472" x2="224" y2="472" stroke="#bfd2e6" stroke-width="2"/>
|
|
<text x="76" y="505" fill="#164a78" font-family="Arial, sans-serif" font-size="16" font-weight="700">Action</text>
|
|
<text x="76" y="530" fill="#243b53" font-family="Arial, sans-serif" font-size="15">Pass named initial</text>
|
|
<text x="76" y="551" fill="#243b53" font-family="Arial, sans-serif" font-size="15">snapshot to bootstrap.</text>
|
|
|
|
<rect x="280" y="348" width="312" height="220" rx="16" fill="#e7f7f0" stroke="#16805c" stroke-width="3"/>
|
|
<text x="305" y="387" fill="#0f5c42" font-family="Arial, sans-serif" font-size="20" font-weight="700">2. Versions match</text>
|
|
<text x="305" y="423" fill="#243b53" font-family="Arial, sans-serif" font-size="16">Snapshot exists, but</text>
|
|
<text x="305" y="447" fill="#243b53" font-family="Arial, sans-serif" font-size="16">a hook ignores it.</text>
|
|
<line x1="305" y1="472" x2="563" y2="472" stroke="#b9e6d5" stroke-width="2"/>
|
|
<text x="305" y="505" fill="#0f5c42" font-family="Arial, sans-serif" font-size="16" font-weight="700">Action</text>
|
|
<text x="305" y="530" fill="#243b53" font-family="Arial, sans-serif" font-size="15">Use accepted snapshot</text>
|
|
<text x="305" y="551" fill="#243b53" font-family="Arial, sans-serif" font-size="15">as initial state; skip fetch.</text>
|
|
|
|
<rect x="624" y="332" width="282" height="252" rx="16" fill="#fdecef" stroke="#bd3d4b" stroke-width="4"/>
|
|
<text x="650" y="373" fill="#8d2636" font-family="Arial, sans-serif" font-size="20" font-weight="700">3. Mismatch</text>
|
|
<text x="650" y="409" fill="#6e2530" font-family="Arial, sans-serif" font-size="16">markup: entry-r8</text>
|
|
<text x="650" y="433" fill="#6e2530" font-family="Arial, sans-serif" font-size="16">snapshot: entry-r7</text>
|
|
<line x1="650" y1="455" x2="878" y2="455" stroke="#efb4bc" stroke-width="2"/>
|
|
<text x="650" y="488" fill="#8d2636" font-family="Arial, sans-serif" font-size="16" font-weight="700">Action before mutation</text>
|
|
<text x="650" y="514" fill="#6e2530" font-family="Arial, sans-serif" font-size="15">record both versions</text>
|
|
<text x="650" y="536" fill="#6e2530" font-family="Arial, sans-serif" font-size="15">keep client fetch stopped</text>
|
|
<text x="650" y="558" fill="#6e2530" font-family="Arial, sans-serif" font-size="15">choose recovery explicitly</text>
|
|
|
|
<rect x="938" y="348" width="210" height="220" rx="16" fill="#eef2ff" stroke="#727ac9" stroke-width="3"/>
|
|
<text x="963" y="387" fill="#353e87" font-family="Arial, sans-serif" font-size="20" font-weight="700">4. New trigger</text>
|
|
<text x="963" y="423" fill="#243b53" font-family="Arial, sans-serif" font-size="16">User changes a</text>
|
|
<text x="963" y="447" fill="#243b53" font-family="Arial, sans-serif" font-size="16">filter or refreshes.</text>
|
|
<line x1="963" y1="472" x2="1122" y2="472" stroke="#cfd1ef" stroke-width="2"/>
|
|
<text x="963" y="505" fill="#353e87" font-family="Arial, sans-serif" font-size="16" font-weight="700">Action</text>
|
|
<text x="963" y="530" fill="#243b53" font-family="Arial, sans-serif" font-size="15">Keep fetch, name the</text>
|
|
<text x="963" y="551" fill="#243b53" font-family="Arial, sans-serif" font-size="15">trigger and new input.</text>
|
|
|
|
<line x1="764" y1="586" x2="764" y2="640" stroke="#bd3d4b" stroke-width="5" marker-end="url(#arrow-red)"/>
|
|
<rect x="468" y="654" width="592" height="84" rx="16" fill="#ffffff" stroke="#bd3d4b" stroke-width="3"/>
|
|
<text x="500" y="691" fill="#8d2636" font-family="Arial, sans-serif" font-size="21" font-weight="700">Do not hide mismatch with an automatic fetch</text>
|
|
<text x="500" y="718" fill="#6e2530" font-family="Arial, sans-serif" font-size="16">Diagnostic first; recovery is a separate project decision and test.</text>
|
|
|
|
<rect x="52" y="654" width="352" height="84" rx="16" fill="#102a43"/>
|
|
<text x="76" y="690" fill="#ffffff" font-family="Arial, sans-serif" font-size="18" font-weight="700">Fixture boundary</text>
|
|
<text x="76" y="716" fill="#cbd8e6" font-family="Arial, sans-serif" font-size="15">No DOM, network, trace or framework runtime.</text>
|
|
</svg>
|