<?xml version="1.0" encoding="UTF-8"?>
<mxfile host="Electron" modified="2026-02-23T08:00:00.000Z" agent="draw.io" version="24.0.0">
  <diagram name="Angular SSR Rendering Flow" id="ssr-flow">
    <mxGraphModel dx="1300" dy="800" grid="1" gridSize="10">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />

        <!-- Title -->
        <mxCell id="title" value="Angular 21 SSR — Route-Level Rendering Modes (Part 7)" style="text;html=1;strokeColor=none;fillColor=none;align=center;fontSize=17;fontStyle=1;" vertex="1" parent="1">
          <mxGeometry x="80" y="20" width="1030" height="40" as="geometry" />
        </mxCell>

        <!-- Routes column -->
        <mxCell id="routes-bg" value="Routes" style="swimlane;startSize=30;fillColor=#1a1a2e;fontColor=#ffffff;strokeColor=#0f3460;fontSize=13;fontStyle=1;" vertex="1" parent="1">
          <mxGeometry x="40" y="80" width="200" height="500" as="geometry" />
        </mxCell>
        <mxCell id="r-home" value="/" style="rounded=1;fillColor=#E3F2FD;strokeColor=#1565C0;fontSize=12;" vertex="1" parent="routes-bg">
          <mxGeometry x="15" y="50" width="170" height="35" as="geometry" />
        </mxCell>
        <mxCell id="r-products" value="/products" style="rounded=1;fillColor=#E3F2FD;strokeColor=#1565C0;fontSize=12;" vertex="1" parent="routes-bg">
          <mxGeometry x="15" y="115" width="170" height="35" as="geometry" />
        </mxCell>
        <mxCell id="r-pdp" value="/products/:slug" style="rounded=1;fillColor=#E3F2FD;strokeColor=#1565C0;fontSize=12;" vertex="1" parent="routes-bg">
          <mxGeometry x="15" y="180" width="170" height="35" as="geometry" />
        </mxCell>
        <mxCell id="r-cart" value="/cart" style="rounded=1;fillColor=#E8F5E9;strokeColor=#2E7D32;fontSize=12;" vertex="1" parent="routes-bg">
          <mxGeometry x="15" y="245" width="170" height="35" as="geometry" />
        </mxCell>
        <mxCell id="r-checkout" value="/checkout/**" style="rounded=1;fillColor=#E8F5E9;strokeColor=#2E7D32;fontSize=12;" vertex="1" parent="routes-bg">
          <mxGeometry x="15" y="310" width="170" height="35" as="geometry" />
        </mxCell>
        <mxCell id="r-account" value="/account/**" style="rounded=1;fillColor=#E8F5E9;strokeColor=#2E7D32;fontSize=12;" vertex="1" parent="routes-bg">
          <mxGeometry x="15" y="375" width="170" height="35" as="geometry" />
        </mxCell>
        <mxCell id="r-static" value="/about, /faq" style="rounded=1;fillColor=#FFF3E0;strokeColor=#E65100;fontSize=12;" vertex="1" parent="routes-bg">
          <mxGeometry x="15" y="440" width="170" height="35" as="geometry" />
        </mxCell>

        <!-- SSG box -->
        <mxCell id="ssg-bg" value="Prerender (SSG)" style="swimlane;startSize=30;fillColor=#FFF3E0;strokeColor=#E65100;fontSize=13;fontStyle=1;" vertex="1" parent="1">
          <mxGeometry x="310" y="80" width="240" height="160" as="geometry" />
        </mxCell>
        <mxCell id="ssg-desc" value="Built at build time&lt;br/&gt;Served as static HTML&lt;br/&gt;Fastest TTFB (CDN)&lt;br/&gt;No server processing" style="rounded=1;fillColor=#FFF9C4;strokeColor=#F57F17;fontSize=11;whiteSpace=wrap;html=1;" vertex="1" parent="ssg-bg">
          <mxGeometry x="20" y="50" width="200" height="80" as="geometry" />
        </mxCell>

        <!-- SSR box -->
        <mxCell id="ssr-bg" value="Server (SSR)" style="swimlane;startSize=30;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=13;fontStyle=1;" vertex="1" parent="1">
          <mxGeometry x="310" y="260" width="240" height="200" as="geometry" />
        </mxCell>
        <mxCell id="ssr-desc" value="Node.js renders per-request&lt;br/&gt;SEO-critical routes&lt;br/&gt;Real-time stock&lt;br/&gt;Personalized pricing&lt;br/&gt;withEventReplay() handles&lt;br/&gt;pre-hydration clicks" style="rounded=1;fillColor=#E3F2FD;strokeColor=#1565C0;fontSize=11;whiteSpace=wrap;html=1;" vertex="1" parent="ssr-bg">
          <mxGeometry x="20" y="50" width="200" height="120" as="geometry" />
        </mxCell>

        <!-- CSR box -->
        <mxCell id="csr-bg" value="Client (CSR)" style="swimlane;startSize=30;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=13;fontStyle=1;" vertex="1" parent="1">
          <mxGeometry x="310" y="480" width="240" height="120" as="geometry" />
        </mxCell>
        <mxCell id="csr-desc" value="Browser renders client-side&lt;br/&gt;Auth-gated · no indexing&lt;br/&gt;cart, checkout, account" style="rounded=1;fillColor=#E8F5E9;strokeColor=#2E7D32;fontSize=11;whiteSpace=wrap;html=1;" vertex="1" parent="csr-bg">
          <mxGeometry x="20" y="50" width="200" height="60" as="geometry" />
        </mxCell>

        <!-- Arrows from routes to modes -->
        <mxCell id="a-home-ssg" edge="1" source="r-home" target="ssg-bg" style="edgeStyle=orthogonalEdgeStyle;strokeColor=#E65100;strokeWidth=2;" parent="1"><mxGeometry relative="1" as="geometry"/></mxCell>
        <mxCell id="a-static-ssg" edge="1" source="r-static" target="ssg-bg" style="edgeStyle=orthogonalEdgeStyle;strokeColor=#E65100;strokeWidth=2;" parent="1"><mxGeometry relative="1" as="geometry"/></mxCell>
        <mxCell id="a-pdp-ssr" edge="1" source="r-pdp" target="ssr-bg" style="edgeStyle=orthogonalEdgeStyle;strokeColor=#1565C0;strokeWidth=2;" parent="1"><mxGeometry relative="1" as="geometry"/></mxCell>
        <mxCell id="a-cat-ssr" edge="1" source="r-products" target="ssr-bg" style="edgeStyle=orthogonalEdgeStyle;strokeColor=#1565C0;strokeWidth=2;" parent="1"><mxGeometry relative="1" as="geometry"/></mxCell>
        <mxCell id="a-cart-csr" edge="1" source="r-cart" target="csr-bg" style="edgeStyle=orthogonalEdgeStyle;strokeColor=#2E7D32;strokeWidth=2;" parent="1"><mxGeometry relative="1" as="geometry"/></mxCell>
        <mxCell id="a-chk-csr" edge="1" source="r-checkout" target="csr-bg" style="edgeStyle=orthogonalEdgeStyle;strokeColor=#2E7D32;strokeWidth=2;" parent="1"><mxGeometry relative="1" as="geometry"/></mxCell>

        <!-- Hydration details -->
        <mxCell id="hydrate-bg" value="SSR Hydration Flow" style="swimlane;startSize=30;fillColor=#f5f5f5;strokeColor=#666;fontSize=12;fontStyle=1;" vertex="1" parent="1">
          <mxGeometry x="620" y="80" width="560" height="520" as="geometry" />
        </mxCell>

        <mxCell id="h1b" value="1. Server renders HTML&lt;br/&gt;(with API data)" style="rounded=1;fillColor=#E3F2FD;strokeColor=#1565C0;fontSize=11;whiteSpace=wrap;html=1;" vertex="1" parent="hydrate-bg">
          <mxGeometry x="40" y="50" width="200" height="55" as="geometry" />
        </mxCell>
        <mxCell id="h2b" value="2. Browser receives HTML&lt;br/&gt;User sees content instantly" style="rounded=1;fillColor=#E8F5E9;strokeColor=#2E7D32;fontSize=11;whiteSpace=wrap;html=1;" vertex="1" parent="hydrate-bg">
          <mxGeometry x="300" y="50" width="200" height="55" as="geometry" />
        </mxCell>
        <mxCell id="h3b" value="3. withEventReplay() queues&lt;br/&gt;user interactions (clicks)&lt;br/&gt;during Angular boot" style="rounded=1;fillColor=#FFF3E0;strokeColor=#E65100;fontSize=11;whiteSpace=wrap;html=1;" vertex="1" parent="hydrate-bg">
          <mxGeometry x="40" y="155" width="200" height="70" as="geometry" />
        </mxCell>
        <mxCell id="h4b" value="4. Angular hydrates components&lt;br/&gt;TransferState avoids&lt;br/&gt;duplicate API calls" style="rounded=1;fillColor=#FFF3E0;strokeColor=#E65100;fontSize=11;whiteSpace=wrap;html=1;" vertex="1" parent="hydrate-bg">
          <mxGeometry x="300" y="155" width="200" height="70" as="geometry" />
        </mxCell>
        <mxCell id="h5b" value="5. Queued events replayed&lt;br/&gt;Add to Cart 200ms click works!" style="rounded=1;fillColor=#E8F5E9;strokeColor=#2E7D32;fontSize=11;whiteSpace=wrap;html=1;" vertex="1" parent="hydrate-bg">
          <mxGeometry x="160" y="275" width="230" height="60" as="geometry" />
        </mxCell>

        <!-- Core Web Vitals -->
        <mxCell id="cwv-bg" value="Core Web Vitals Targets" style="swimlane;startSize=30;fillColor=#E8F5E9;strokeColor=#2E7D32;fontSize=12;fontStyle=1;" vertex="1" parent="hydrate-bg">
          <mxGeometry x="40" y="370" width="470" height="110" as="geometry" />
        </mxCell>
        <mxCell id="cwv1" value="LCP &lt; 2.5s&lt;br/&gt;NgOptimizedImage priority" style="rounded=1;fillColor=#F1F8E9;strokeColor=#558B2F;fontSize=11;" vertex="1" parent="cwv-bg">
          <mxGeometry x="15" y="35" width="130" height="55" as="geometry" />
        </mxCell>
        <mxCell id="cwv2" value="CLS &lt; 0.1&lt;br/&gt;Skeleton loaders" style="rounded=1;fillColor=#F1F8E9;strokeColor=#558B2F;fontSize=11;" vertex="1" parent="cwv-bg">
          <mxGeometry x="165" y="35" width="130" height="55" as="geometry" />
        </mxCell>
        <mxCell id="cwv3" value="INP &lt; 200ms&lt;br/&gt;Zoneless + OnPush" style="rounded=1;fillColor=#F1F8E9;strokeColor=#558B2F;fontSize=11;" vertex="1" parent="cwv-bg">
          <mxGeometry x="315" y="35" width="130" height="55" as="geometry" />
        </mxCell>

      </root>
    </mxGraphModel>
  </diagram>
</mxfile>
