Treść build-time + BrowserRouter + prerender (HTML per trasa)

[MrCrystal2]

Parent PRD

#53

Type

AFK

What to build

Trzy spiniające się elementy jednego pionu:

1. Treść build-time: content.json importowany statycznie (koniec fetch w runtime); hook treści synchroniczny — znika logika stanów ładowania i null-guardy (if (!hero) return null). Kształt pilnowany typami TS (rozszerz/aktualizuj typy razem z JSON).
2. BrowserRouter: zmiana routingu z hash na BrowserRouter; wewnętrzne linki /... bez #; ScrollToTop zachowany; reguła wewnętrzne (/) vs zewnętrzne (<a target="_blank" rel="noopener noreferrer">) bez zmian.
3. Prerender w buildzie: własny lekki skrypt (React SSR) renderujący statyczny HTML każdej trasy z pełną treścią + generacja 404.html (fallback deep-linków na GH Pages) + szkielet sitemap.xml. Efekt: view-source dowolnej trasy pokazuje treść bez uruchamiania JS.

Kontekst: PRD #53 → Implementation Decisions (Treść / Routing / Prerender); plan plans/landing-upgrade.md Faza 2.

Assumptions

• Stack Tailwind v4 + shadcn/ui + Motion działa (issue Fundament stacku: Tailwind v4 + shadcn/ui + Motion #54).
• Lista tras jest zamknięta i wyliczalna w buildzie (App.tsx jako źródło tras).
• Vite ma base: '/'; content.json i obrazy serwowane z roota — bez zmian.

Out of scope for this issue

• Do NOT dodawaj meta/OG/JSON-LD per strona (osobny issue: SEO kit).
• Do NOT zmieniaj designu ani treści merytorycznych.
• Do NOT używaj zewnętrznych frameworków SSG (decyzja: własny skrypt — PRD PRD: Przebudowa crystal-studio.dev na premium (apple-design + SEO/AI-search) #53 Tradeoffs).

Acceptance criteria

• Źródło zbudowanego HTML dowolnej trasy zawiera treść hero bez wykonywania JS — [observable: view-source pliku z dist/]
• dist/ zawiera HTML per trasa + 404.html + sitemap.xml — [observable: zawartość katalogu build]
• Nawigacja między trasami bez pełnego przeładowania, URL bez # — [observable: test ręczny w yarn preview]
• Hook treści synchroniczny; brak stanów ładowania w komponentach — [observable: code review + brak loading w DOM]
• Build i testy zielone — [command: yarn build && yarn test]

How to verify

1. yarn build — exit 0
2. Otwórz zbudowany HTML dla / i dla np. /products — treść hero/produktów obecna w źródle strony
3. Sprawdź istnienie dist/404.html i dist/sitemap.xml
4. yarn preview — klikaj po nawigacji: URL zmienia się bez #, bez pełnych przeładowań; głęboki link (odświeżenie na /products) działa przez fallback 404
5. yarn test && yarn lint — exit 0

Blocked by

• Fundament stacku: Tailwind v4 + shadcn/ui + Motion #54 (fundament stacku)

User stories addressed

• User story 12 (część: statyczny HTML per trasa)
• User story 18 (treść JSON bez dotykania komponentów)