79 lines
7.5 KiB
XML
79 lines
7.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</title>
|
|
<desc id="desc">Временная шкала показывает: server request владеет source, server response — HTML и serialized snapshot, hydrate проверяет их version, затем snapshot становится owner initial state. Client fetch является отдельной новой операцией. Прямая передача server source в client state перечёркнута.</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-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>
|
|
</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">Кто владеет состоянием в каждой фазе</text>
|
|
<text x="78" y="99" fill="#cbd8e6" font-family="Arial, sans-serif" font-size="18">Source, HTML, serialized snapshot и client state живут в разное время и не являются одним cache.</text>
|
|
|
|
<text x="70" y="164" fill="#526779" font-family="Arial, sans-serif" font-size="18" font-weight="700">TIME →</text>
|
|
<line x1="164" y1="157" x2="1120" y2="157" stroke="#aebdcb" stroke-width="4" marker-end="url(#arrow)"/>
|
|
|
|
<rect x="60" y="208" width="210" height="184" rx="16" fill="#e6f0fb" stroke="#6b9fd1" stroke-width="3"/>
|
|
<text x="84" y="248" fill="#164a78" font-family="Arial, sans-serif" font-size="22" font-weight="700">SSR/source</text>
|
|
<text x="84" y="283" fill="#243b53" font-family="Arial, sans-serif" font-size="18">owner</text>
|
|
<text x="84" y="313" fill="#164a78" font-family="Arial, sans-serif" font-size="19" font-weight="700">server-request</text>
|
|
<text x="84" y="350" fill="#243b53" font-family="Arial, sans-serif" font-size="17">version: entry-r7</text>
|
|
<text x="84" y="375" fill="#243b53" font-family="Arial, sans-serif" font-size="15">Lives for one server read.</text>
|
|
|
|
<rect x="312" y="208" width="248" height="184" rx="16" fill="#eef2ff" stroke="#727ac9" stroke-width="3"/>
|
|
<text x="338" y="248" fill="#353e87" font-family="Arial, sans-serif" font-size="22" font-weight="700">Server response</text>
|
|
<text x="338" y="283" fill="#243b53" font-family="Arial, sans-serif" font-size="17">HTML marker</text>
|
|
<text x="338" y="310" fill="#353e87" font-family="Arial, sans-serif" font-size="18" font-weight="700">entry-r7</text>
|
|
<text x="338" y="342" fill="#243b53" font-family="Arial, sans-serif" font-size="17">serialized snapshot</text>
|
|
<text x="338" y="369" fill="#353e87" font-family="Arial, sans-serif" font-size="18" font-weight="700">version + payload</text>
|
|
|
|
<rect x="602" y="208" width="240" height="184" rx="16" fill="#fff8df" stroke="#c99b2d" stroke-width="3"/>
|
|
<text x="628" y="248" fill="#785900" font-family="Arial, sans-serif" font-size="22" font-weight="700">Hydrate</text>
|
|
<text x="628" y="283" fill="#243b53" font-family="Arial, sans-serif" font-size="17">owner</text>
|
|
<text x="628" y="310" fill="#785900" font-family="Arial, sans-serif" font-size="18" font-weight="700">browser-transition</text>
|
|
<text x="628" y="345" fill="#243b53" font-family="Arial, sans-serif" font-size="16">Compare markup version</text>
|
|
<text x="628" y="370" fill="#243b53" font-family="Arial, sans-serif" font-size="16">with snapshot version.</text>
|
|
|
|
<rect x="884" y="208" width="256" height="184" rx="16" fill="#e7f7f0" stroke="#16805c" stroke-width="3"/>
|
|
<text x="910" y="248" fill="#0f5c42" font-family="Arial, sans-serif" font-size="22" font-weight="700">Initial client state</text>
|
|
<text x="910" y="283" fill="#243b53" font-family="Arial, sans-serif" font-size="17">owner after match</text>
|
|
<text x="910" y="310" fill="#0f5c42" font-family="Arial, sans-serif" font-size="18" font-weight="700">serialized-snapshot</text>
|
|
<text x="910" y="345" fill="#243b53" font-family="Arial, sans-serif" font-size="16">No automatic second fetch.</text>
|
|
<text x="910" y="370" fill="#243b53" font-family="Arial, sans-serif" font-size="16">Later updates are new work.</text>
|
|
|
|
<line x1="271" y1="300" x2="308" y2="300" stroke="#516579" stroke-width="4" marker-end="url(#arrow)"/>
|
|
<line x1="561" y1="300" x2="598" y2="300" stroke="#516579" stroke-width="4" marker-end="url(#arrow)"/>
|
|
<line x1="843" y1="300" x2="880" y2="300" stroke="#16805c" stroke-width="5" marker-end="url(#arrow-green)"/>
|
|
<text x="847" y="276" fill="#16805c" font-family="Arial, sans-serif" font-size="16" font-weight="700">versions match</text>
|
|
|
|
<rect x="60" y="466" width="520" height="192" rx="16" fill="#ffffff" stroke="#d4dee8" stroke-width="3"/>
|
|
<text x="88" y="506" fill="#243b53" font-family="Arial, sans-serif" font-size="22" font-weight="700">Правильная передача initial state</text>
|
|
<text x="88" y="545" fill="#526779" font-family="Arial, sans-serif" font-size="18">source → HTML + snapshot → version check → client state</text>
|
|
<rect x="90" y="572" width="148" height="48" rx="9" fill="#e6f0fb"/>
|
|
<text x="112" y="603" fill="#164a78" font-family="Arial, sans-serif" font-size="18" font-weight="700">source</text>
|
|
<line x1="239" y1="596" x2="288" y2="596" stroke="#516579" stroke-width="4" marker-end="url(#arrow)"/>
|
|
<rect x="294" y="572" width="164" height="48" rx="9" fill="#eef2ff"/>
|
|
<text x="317" y="603" fill="#353e87" font-family="Arial, sans-serif" font-size="18" font-weight="700">snapshot</text>
|
|
<line x1="459" y1="596" x2="510" y2="596" stroke="#16805c" stroke-width="4" marker-end="url(#arrow-green)"/>
|
|
<text x="102" y="645" fill="#526779" font-family="Arial, sans-serif" font-size="15">Snapshot is a hand-off, not a long-lived cache.</text>
|
|
|
|
<rect x="642" y="466" width="498" height="192" rx="16" fill="#fdecef" stroke="#bd3d4b" stroke-width="3"/>
|
|
<text x="670" y="506" fill="#8d2636" font-family="Arial, sans-serif" font-size="22" font-weight="700">Неверное сокращение границы</text>
|
|
<text x="670" y="545" fill="#6e2530" font-family="Arial, sans-serif" font-size="18">source → client state без snapshot и version check</text>
|
|
<rect x="674" y="572" width="146" height="48" rx="9" fill="#e6f0fb"/>
|
|
<text x="696" y="603" fill="#164a78" font-family="Arial, sans-serif" font-size="18" font-weight="700">source</text>
|
|
<line x1="824" y1="596" x2="1002" y2="596" stroke="#bd3d4b" stroke-width="6"/>
|
|
<line x1="865" y1="570" x2="950" y2="622" stroke="#bd3d4b" stroke-width="7"/>
|
|
<line x1="950" y1="570" x2="865" y2="622" stroke="#bd3d4b" stroke-width="7"/>
|
|
<rect x="1005" y="572" width="112" height="48" rx="9" fill="#fdecef"/>
|
|
<text x="1021" y="603" fill="#8d2636" font-family="Arial, sans-serif" font-size="17" font-weight="700">state</text>
|
|
<text x="674" y="645" fill="#6e2530" font-family="Arial, sans-serif" font-size="15">The browser cannot own a completed server request.</text>
|
|
|
|
<rect x="60" y="700" width="1080" height="42" rx="12" fill="#102a43"/>
|
|
<text x="84" y="728" fill="#ffffff" font-family="Arial, sans-serif" font-size="17">Project decision: choose the marker and recovery path. Documentation fact: server markup and client render must agree.</text>
|
|
</svg>
|