71 lines
6.5 KiB
XML
71 lines
6.5 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 780" role="img" aria-labelledby="title desc">
|
||
<title id="title">Переход SSR к CSR с проверкой версии snapshot</title>
|
||
<desc id="desc">Server request читает source версии entry-r7, создаёт HTML и serialized snapshot. Hydrate сравнивает version разметки и snapshot. Совпадение пропускает client fetch, а mismatch записывается до mutation и требует отдельного recovery path.</desc>
|
||
<defs>
|
||
<marker id="arrow-slate" 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-green" 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="#16805c"/>
|
||
</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="780" 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">SSR → serialized snapshot → hydrate</text>
|
||
<text x="78" y="99" fill="#cbd8e6" font-family="Arial, sans-serif" font-size="18">Версия связывает первый HTML и initial state; client fetch остаётся отдельным действием.</text>
|
||
|
||
<text x="70" y="160" fill="#526779" font-family="Arial, sans-serif" font-size="18" font-weight="700">SERVER</text>
|
||
<text x="712" y="160" fill="#526779" font-family="Arial, sans-serif" font-size="18" font-weight="700">BROWSER</text>
|
||
<line x1="645" y1="144" x2="645" y2="694" stroke="#d4dee8" stroke-width="3" stroke-dasharray="8 10"/>
|
||
|
||
<rect x="62" y="192" width="246" height="178" rx="16" fill="#e6f0fb" stroke="#6b9fd1" stroke-width="3"/>
|
||
<text x="88" y="230" fill="#164a78" font-family="Arial, sans-serif" font-size="22" font-weight="700">1. SSR/source</text>
|
||
<text x="88" y="268" fill="#243b53" font-family="Arial, sans-serif" font-size="18">owner: server-request</text>
|
||
<text x="88" y="298" fill="#243b53" font-family="Arial, sans-serif" font-size="18">read-versioned-source</text>
|
||
<rect x="88" y="318" width="192" height="34" rx="8" fill="#ffffff"/>
|
||
<text x="106" y="341" fill="#164a78" font-family="Arial, sans-serif" font-size="18" font-weight="700">entry-r7</text>
|
||
|
||
<rect x="354" y="192" width="246" height="178" rx="16" fill="#eef2ff" stroke="#727ac9" stroke-width="3"/>
|
||
<text x="380" y="230" fill="#353e87" font-family="Arial, sans-serif" font-size="22" font-weight="700">2. Server response</text>
|
||
<text x="380" y="268" fill="#243b53" font-family="Arial, sans-serif" font-size="18">HTML marker: entry-r7</text>
|
||
<text x="380" y="298" fill="#243b53" font-family="Arial, sans-serif" font-size="18">serialized snapshot: entry-r7</text>
|
||
<rect x="380" y="318" width="191" height="34" rx="8" fill="#ffffff"/>
|
||
<text x="398" y="341" fill="#353e87" font-family="Arial, sans-serif" font-size="17" font-weight="700">version + payload</text>
|
||
|
||
<line x1="309" y1="280" x2="351" y2="280" stroke="#516579" stroke-width="4" marker-end="url(#arrow-slate)"/>
|
||
<line x1="602" y1="280" x2="699" y2="280" stroke="#516579" stroke-width="4" marker-end="url(#arrow-slate)"/>
|
||
|
||
<rect x="718" y="192" width="420" height="178" rx="16" fill="#fff8df" stroke="#c99b2d" stroke-width="3"/>
|
||
<text x="746" y="230" fill="#785900" font-family="Arial, sans-serif" font-size="22" font-weight="700">3. Hydrate comparison</text>
|
||
<text x="746" y="268" fill="#243b53" font-family="Arial, sans-serif" font-size="18">markup version = snapshot version?</text>
|
||
<rect x="746" y="291" width="164" height="46" rx="10" fill="#ffffff" stroke="#e3c364" stroke-width="2"/>
|
||
<text x="778" y="321" fill="#785900" font-family="Arial, sans-serif" font-size="20" font-weight="700">MATCH</text>
|
||
<rect x="930" y="291" width="176" height="46" rx="10" fill="#ffffff" stroke="#e3c364" stroke-width="2"/>
|
||
<text x="952" y="321" fill="#785900" font-family="Arial, sans-serif" font-size="20" font-weight="700">MISMATCH</text>
|
||
|
||
<path d="M 828 372 C 828 438 779 454 689 454" fill="none" stroke="#16805c" stroke-width="5" marker-end="url(#arrow-green)"/>
|
||
<text x="713" y="423" fill="#16805c" font-family="Arial, sans-serif" font-size="18" font-weight="700">same version</text>
|
||
<rect x="408" y="468" width="372" height="160" rx="16" fill="#e7f7f0" stroke="#16805c" stroke-width="3"/>
|
||
<text x="436" y="507" fill="#0f5c42" font-family="Arial, sans-serif" font-size="23" font-weight="700">4a. Accept snapshot</text>
|
||
<text x="436" y="546" fill="#1f4d3c" font-family="Arial, sans-serif" font-size="18">state owner: serialized-snapshot</text>
|
||
<text x="436" y="578" fill="#1f4d3c" font-family="Arial, sans-serif" font-size="18">client fetch: skipped</text>
|
||
<text x="436" y="605" fill="#1f4d3c" font-family="Arial, sans-serif" font-size="16">No second request in the teaching model.</text>
|
||
|
||
<path d="M 1018 372 C 1018 430 1018 442 1018 466" fill="none" stroke="#bd3d4b" stroke-width="5" marker-end="url(#arrow-red)"/>
|
||
<text x="1033" y="424" fill="#bd3d4b" font-family="Arial, sans-serif" font-size="18" font-weight="700">different version</text>
|
||
<rect x="822" y="468" width="316" height="160" rx="16" fill="#fdecef" stroke="#bd3d4b" stroke-width="3"/>
|
||
<text x="850" y="507" fill="#8d2636" font-family="Arial, sans-serif" font-size="23" font-weight="700">4b. Stop and record</text>
|
||
<text x="850" y="546" fill="#6e2530" font-family="Arial, sans-serif" font-size="18">diagnostic: r8 ≠ r7</text>
|
||
<text x="850" y="578" fill="#6e2530" font-family="Arial, sans-serif" font-size="18">mutation: not-started</text>
|
||
<text x="850" y="605" fill="#6e2530" font-family="Arial, sans-serif" font-size="16">Choose a project recovery path.</text>
|
||
|
||
<rect x="62" y="672" width="1076" height="64" rx="14" fill="#ffffff" stroke="#d4dee8" stroke-width="2"/>
|
||
<circle cx="100" cy="704" r="10" fill="#16805c"/>
|
||
<text x="122" y="710" fill="#243b53" font-family="Arial, sans-serif" font-size="17">Green: the snapshot is accepted; automatic client fetch is skipped.</text>
|
||
<circle cx="706" cy="704" r="10" fill="#bd3d4b"/>
|
||
<text x="728" y="710" fill="#243b53" font-family="Arial, sans-serif" font-size="17">Red: mismatch stays visible before mutation.</text>
|
||
</svg>
|