The latest articles on DEV Community by ShengXing Chi (@ocxers). https://dev.to/ocxers https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F559317%2Fb1bae47f-b681-4d57-a759-fce44737400d.png https://dev.to/ocxers en ShengXing Chi Mon, 28 Sep 2026 19:53:40 +0000 https://dev.to/ocxers/building-a-bilingual-browser-game-with-astro-and-cloudflare-and-making-the-html-actually-cache-3o2b https://dev.to/ocxers/building-a-bilingual-browser-game-with-astro-and-cloudflare-and-making-the-html-actually-cache-3o2b <p>I recently shipped <a href="https://cavienchien.net/en/" rel="noopener noreferrer">Cá Viên Chiên</a>, a small cooking game about Vietnamese fried fish ball street carts. It runs in the browser, works best on phones, and ships in Vietnamese and English. Here are the parts that were more interesting than I expected.</p> <h2> Why Astro for a game </h2> <p>Most of the site isn't the game — it's the landing page, guide, tips, menu and FAQ in two languages. Those pages matter for search, so they should be plain static HTML. Astro gives me that, and the game itself is a single island of vanilla JS (~26 KB) with no framework runtime. CSS is under 5 KB.</p> <h2> i18n routing: /vi/ and /en/ </h2> <p>Each language lives under its own prefix, with <code>hreflang</code> alternates pointing at each other. The root <code>/</code> redirects based on <code>Accept-Language</code>, which turned out to be the one thing I couldn't cache cleanly (more below).</p> <h2> Saving without accounts </h2> <p>The game saves to <code>localStorage</code> after every purchase and at the end of each day. To move to another device, players copy a save code — the serialized state — and paste it on the other side. No backend, no sign-up.</p> <h2> Getting HTML to actually hit the edge cache </h2> <p>Static assets under <code>_astro/*</code> are hashed and served with <code>max-age=31536000, immutable</code>, so those were fine from day one. HTML was the slow part: every request showed <code>cf-cache-status: DYNAMIC</code> and ~250 ms TTFB going back to origin.</p> <p>Adding a Cloudflare Cache Rule for <code>/vi/*</code> and <code>/en/*</code> flipped the status to <code>HIT</code> — but TTFB barely moved. The origin was still sending <code>cache-control: public, max-age=0, must-revalidate</code>, and with the rule set to respect origin headers, the edge TTL was effectively zero: every request revalidated.</p> <p>The fix I'm rolling out is <code>CDN-Cache-Control</code>, which Cloudflare honours ahead of <code>Cache-Control</code>, while browsers keep seeing <code>max-age=0</code>:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight vcl"><code><span class="o">/</span>vi<span class="o">/*</span> CDN-Cache-Control: max-age<span class="o">=</span><span class="mi">86400</span> <span class="o">/</span>en<span class="o">/*</span> CDN-Cache-Control: max-age<span class="o">=</span><span class="mi">86400</span> </code></pre> </div> <p>Then purge <code>/vi/</code> and <code>/en/</code> in the deploy step so new releases show up immediately.</p> <h2> What I'd do next </h2> <ul> <li>Move the language redirect on <code>/</code> to the edge so it can be cached per language</li> <li>Self-host the font to drop two extra origins</li> </ul> <p>If you want to see the result, the game is at <a href="https://cavienchien.net/en/" rel="noopener noreferrer">cavienchien.net</a>. Feedback on the difficulty curve is very welcome.</p> astro gamedev cloudflare webperf