Detekce jazyka podle lokace — bez serveru, na statickém webu

Můj portfoliový web je postavený v Astro a je plně statický — žádný server-side rendering, žádné API na pozadí. Problém: když někdo z Česka otevře web, dostane anglickou verzi. Když někdo ze zahraničí, dostane češtinu. Obojí je špatně.

Řešení mělo být jednoduché — detekovat jazyk automaticky a přesměrovat, ale jen jednou a bez blikání.

Jak to funguje

Celý detekční mechanismus běží jako inline <script> přímo v <head>, spustí se před vykreslením stránky:

1. Priorita: manuální volba. Pokud uživatel kliknul na přepínač jazyka, uloží se do localStorage. Tahle hodnota má vždycky nejvyšší prioritu — nikdy ji nepřepíšeme.

2. Jednorázový redirect. V sessionStorage si hlídáme, jestli už jsme v této session přesměrovali. Pokud ano, děláme nic — žádné ping-pong smyčky.

3. Detekce přes časové pásmo. Intl.DateTimeFormat().resolvedOptions().timeZone nám zdarma řekne, jestli je uživatel v Praze. Žádná geolokační API, žádný třetí strana, nula nákladů.

4. Fallback: jazyk prohlížeče. Pokud není v Praze, podíváme se na navigator.languages. Pokud tam má „cs”, bereme to jako českého uživatele.

5. Přesměrování přes location.replace(). Ne assign() — replace() nepřidává záznam do historie, takže tlačítko „Zpět” funguje správně.

Proč tohle řešení

Alternativa by byla server-side detekce (Cloudflare Workers, nginx rule, atd.), ale to znamená další konfiguraci, další místo, kde se něco může rozbít, a potenciální problém s SEO (pokud se redirect nedělá správně).

Tahle varianta:

• Stojí 0 Kč — žádná API, žádná infra
• Běží před renderem — žádný flash obsahu v jiném jazyce
• SEO bezpečné — boti nepouští JS, takže vidí původní stránku normálně
• Respektuje uživatele — manuální výběr jazyka je vždycky svatý

Přepínač jazyka

Když uživatel klikne na přepínač, kromě standardního přesměrování se jeho volba zapíše do localStorage pod klíčem dragocz:lang. Při příští návštěvě auto-detect tuto hodnotu přečte a uživateli nechá jeho volbu — i kdyby byl třeba v zahraničí.

Celkem 3 commity, čistý výsledek

Implementace byla nakonec tři malé commits: přepínač ukládající volbu, inline script pro detekci, a ověření buildu. Celkem necelých 50 řádek JavaScriptu. Žádné závislosti, žádné frameworky, prostě jeden script v layoutu a jeden event listener na přepínači.

Na statickém webu tohle funguje překvapivě dobře. Čistý, rychlý, bez údržby.