{"type":"excalidraw","version":2,"source":"https://AwesomeSystemDesign.dev","elements":[{"angle":0,"strokeColor":"#6577aa","backgroundColor":"#eef1fc","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-1"],"frameId":null,"roundness":null,"boundElements":[{"type":"text","id":"shape-1"}],"updated":0,"link":null,"locked":false,"id":"shape-0","type":"rectangle","seed":41,"x":16,"y":16,"width":288,"height":264.8,"customData":{"revealStep":1}},{"angle":0,"strokeColor":"#394557","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-1"],"frameId":null,"roundness":null,"boundElements":null,"updated":0,"link":null,"locked":false,"id":"shape-1","type":"text","seed":114,"x":36,"y":34,"width":248,"height":228.8,"fontSize":22,"fontFamily":1,"text":"Headless Chrome\nPool (Puppeteer)\n\n- Render page\n- Wait for network\nidle (2s)\n- Extract DOM\n- Return HTML","originalText":"Headless Chrome\nPool (Puppeteer)\n\n- Render page\n- Wait for network\nidle (2s)\n- Extract DOM\n- Return HTML","textAlign":"left","verticalAlign":"middle","containerId":"shape-0","lineHeight":1.3,"autoResize":false,"customData":{"revealStep":1}},{"angle":0,"strokeColor":"#6577aa","backgroundColor":"#eef1fc","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-2"],"frameId":null,"roundness":null,"boundElements":[{"type":"text","id":"shape-3"}],"updated":0,"link":null,"locked":false,"id":"shape-2","type":"rectangle","seed":187,"x":16,"y":324.8,"width":288,"height":436.40000000000003,"customData":{"revealStep":2}},{"angle":0,"strokeColor":"#394557","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-2"],"frameId":null,"roundness":null,"boundElements":null,"updated":0,"link":null,"locked":false,"id":"shape-3","type":"text","seed":260,"x":36,"y":342.8,"width":248,"height":400.40000000000003,"fontSize":22,"fontFamily":1,"text":"Static crawl:\n<div id=\"root\"></div>\n<script\nsrc=\"app.js\"></script>\n\nRendered crawl:\n<div id=\"root\">\n<h1>Article Title</h1>\n<p>Full content\nhere...</p>\n<a\nhref=\"/related\">Link<\n/a>\n</div>","originalText":"Static crawl:\n<div id=\"root\"></div>\n<script\nsrc=\"app.js\"></script>\n\nRendered crawl:\n<div id=\"root\">\n<h1>Article Title</h1>\n<p>Full content\nhere...</p>\n<a\nhref=\"/related\">Link<\n/a>\n</div>","textAlign":"left","verticalAlign":"middle","containerId":"shape-2","lineHeight":1.3,"autoResize":false,"customData":{"revealStep":2}},{"angle":0,"strokeColor":"#a68a53","backgroundColor":"#fff7e6","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-3"],"frameId":null,"roundness":null,"boundElements":[{"type":"text","id":"shape-5"}],"updated":0,"link":null,"locked":false,"id":"shape-4","type":"rectangle","seed":333,"x":16,"y":805.2,"width":288,"height":808.2,"customData":{"revealStep":3}},{"angle":0,"strokeColor":"#394557","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-3"],"frameId":null,"roundness":null,"boundElements":null,"updated":0,"link":null,"locked":false,"id":"shape-5","type":"text","seed":406,"x":36,"y":823.2,"width":248,"height":772.2,"fontSize":22,"fontFamily":1,"text":"JavaScript Rendering\n(SPA Problem)\n\nProblem: ~30% of\nthe modern web uses\nJavaScript\nframeworks\n(React, Angular,\nVue). Simple HTTP\nGET returns empty\nshell.\n\nSolution: Headless\nBrowser Rendering\nService\n\nStatic Crawler -->\nDetects JS-heavy\npage (empty body\nor <noscript> tag)\n\nCost: ~10x slower\nthan static crawl\nSolution: Only render\npages that need\nit (detect via\nheuristics)","originalText":"JavaScript Rendering\n(SPA Problem)\n\nProblem: ~30% of\nthe modern web uses\nJavaScript\nframeworks\n(React, Angular,\nVue). Simple HTTP\nGET returns empty\nshell.\n\nSolution: Headless\nBrowser Rendering\nService\n\nStatic Crawler -->\nDetects JS-heavy\npage (empty body\nor <noscript> tag)\n\nCost: ~10x slower\nthan static crawl\nSolution: Only render\npages that need\nit (detect via\nheuristics)","textAlign":"left","verticalAlign":"middle","containerId":"shape-4","lineHeight":1.3,"autoResize":false,"customData":{"revealStep":3}}],"appState":{"viewBackgroundColor":"#fbfbf8","gridSize":null},"files":{}}