Přeskočit na obsah

Tech Specs: React Router v7 + Cloudflare Workers

Stav dokumentu: Referenční architektura — diagramy a seznamy jsou platné; §11 Rozsah první iterace je rozšířený cíl (checkboxy = zapracování v produktu).

1. Cíl

Projekt bude postaven jako full-stack React aplikace pomocí React Router v7 běžící na Cloudflare Workers.

2. Stack (jednotný zdroj)

Výpis technologií, domény a nasazení je vedený jen v 20-tech-stack.md — aby stack nebyl duplicitně udržovaný ve více souborech. Tento dokument z níže předpokládá stejný stack při popisu architektury a rout.

3. Architektura

User Browser
    |
    v
Cloudflare CDN
    |
    v
Cloudflare Worker
    |
    v
React Router v7 App
    |
    |-- Public Routes
    |-- Resource Routes / API Routes
    |-- Route Loaders
    |-- Route Actions
    |
    |-- D1: relační databáze
    |-- R2: obrázky a soubory
    |-- KV: cache

Chráněné routy pro editory a Cloudflare Access: výhradně 32-admin.md.

4. Proč React Router v7

Projekt bude obsahový katalog, ne jen jednoduchá SPA aplikace.

React Router v7 dává smysl kvůli:

  • server-side renderingu,
  • SEO,
  • route loaderům,
  • actions pro formuláře,
  • full-stack modelu,
  • přímému běhu na Cloudflare Workers,
  • dobrému základu pro katalogové stránky.

5. Hlavní veřejné stránky

/
 /byliny
 /byliny/:slug
 /symptomy
 /symptomy/:slug
 /zpracovani
 /zpracovani/:slug
 /sezona
 /sezona/:month
 /region
 /region/:slug
 /vyhledavani

6. Rozhraní editora

Veškeré plánované /admin, upload médií přes aplikaci a endpointy /api/admin/* jsou popsány výhradně v 32-admin.md.

7. Resource / API routes

/api/herbs
/api/herbs/:slug
/api/search
/api/filters
/api/regions
/api/topics
/api/processing-methods

Endpointy pod /api/admin/ — viz 32-admin.md §4.

8. Data loading

Detail byliny:

Request: /byliny/kopriva-dvoudoma
  |
  v
React Router loader
  |
  v
Zkusí KV cache
  |
  |-- HIT: vrátí data
  |
  |-- MISS:
        |
        v
      načte data z D1
        |
        v
      složí detail byliny
        |
        v
      (KV uložení — plán)
        |
        v
      vrátí stránce

Současný stav: KV cache v loaderových funkcích není napojená — data jdou přímo z D1. Diagram výše popisuje cílový vzorec z §10.

9. Upload obrázků (editor)

Tok nahrání, zápis do R2 a D1 a invalidace cache: 32-admin.md §5.

10. Cache

KV cache klíče:

homepage:v1:cs
filters:v1:cs
regions:v1:cs
topics:v1:cs
processing-methods:v1:cs
herb-detail:v1:{slug}:{language}
herb-list:v1:{hash-of-filters}
topic-detail:v1:{slug}:{language}
processing-detail:v1:{slug}:{language}
seasonal:v1:{region}:{month}:{language}
sitemap:v1

11. Rozsah první iterace

  • React Router v7 aplikace,
  • Cloudflare Workers deployment,
  • D1 databáze,
  • R2 storage pro obrázky,
  • KV cache,
  • veřejný katalog bylin,
  • detail byliny,
  • základní filtry,
  • rozhraní editora (Access, CRUD, média, drafty, invalidace) — 32-admin.md §7,
  • základní SEO metadata — částečně (sitemap, robots, sociální meta u části rout),
  • bezpečnostní upozornění,
  • základní sitemap.

12. Bezpečnostní hlavičky u HTML odpovědí

Na produkčním Workeru (workers/app.ts) se na dokumentové odpovědi (Content-Type: text/html) doplňují CSP včetně povolení Google Fonts, X-Content-Type-Options, Referrer-Policy a omezené Permissions-Policy. Implementace: workers/security-headers.ts. Ladění pravidel CSP při přidávání nových zdrojů (CDN, analytics) aktualizuj tam i v 27-soft-nature-ui.md.