Jak zbudować nowoczesną stronę WWW w 2026 roku: pełny stack technologiczny i studium przypadku

Budując serwis technologiczny w 2026 roku, łatwo wpaść w pułapkę nadmiarowej złożoności: ciężkie frameworki SPA, dziesiątki zewnętrznych SaaS-ów, comiesięczne rachunki za bazy danych i bloatware zwalniający ładowanie na telefonach.

W ramach marki Jak Zbudować Stronę postawiłem sobie jasny cel architektoniczny dla serwisu paweldomanski.eu: stworzyć platformę ultraszybką (100/100 Lighthouse), niezależną od drogich dostawców zewnętrznych, w 100% zgodną z RODO i gotową nie tylko na Google, ale też na generatywne wyszukiwarki AI.

Poniżej przedstawiam kompletny dekonstrukt stacku technologicznego, którego używam i który rekomenduję dla nowoczesnych stron WWW.

1. Fundament: Astro 7 i wyspy architektoniczne (Islands Architecture)

Tradycyjne aplikacje React czy Next.js wysyłają do przeglądarki dziesiątki megabajtów kodu JavaScript tylko po to, aby wyświetlić zwykły artykuł blogowy. W Astro 7 obowiązuje zasada Zero JS by Default.

• Statyczne generowanie (SSG): Wszystkie strony są pre-renderowane do czystego, lekkiego kodu HTML podczas budowania (output: 'static'). Czas odpowiedzi serwera (TTFB) na brzegu sieci wynosi poniżej 30 ms.
• Astro Islands: JavaScript jest ładowany wyłącznie dla komponentów, które rzeczywiście wymagają interakcji (np. formularz kontaktowy czy przełącznik języka), i to dopiero w momencie, gdy stają się widoczne na ekranie (client:visible).
• MDX: Treści artykułów pisane są w formacie MDX łączącym czytelność Markdowna z możliwością osadzania interaktywnych komponentów.

2. Zarządzanie treścią: Git-backed Headless CMS (TinaCMS 3.12)

Zamiast monolitycznego WordPressa z podatnymi na ataki wtyczkami SQL, serwis wykorzystuje TinaCMS:

• Brak oddzielnej bazy danych (Zero DB lock-in): Cała treść (14 kolekcji: artykuły, marki, technologie, usługi, case studies) jest przechowywana jako pliki .mdx oraz .json bezpośrednio w repozytorium Git.
• Wizualna edycja w czasie rzeczywistym: Pod adresem /admin redaktor ma dostęp do wygodnego edytora WYSIWYG z podglądem na żywo.
• Historia wersji: Każda zmiana treści to automatyczny commit w Git, co zapewnia pełny audyt, możliwość natychmiastowego rollbacku i darmowy backup.
• Elastyczność hostingu: CMS może działać lokalnie bez logowania, przez chmurę TinaCloud lub na własnym serwerze Node/Docker.

3. Wyszukiwarka bez comiesięcznych faktur: Pagefind (WASM)

Zamiast płacić 50-200 USD miesięcznie za usługi takie jak Algolia czy Typesense, wdrożyłem Pagefind — statyczną wyszukiwarkę WebAssembly:

• Indeksuje treść bloga, portfolio technologii i usług w ułamku sekundy podczas kompilacji projektu (scripts/build-search.js).
• Generuje mikroskopijne fragmenty indeksu, które przeglądarka pobiera na żądanie dopiero po wpisaniu pierwszych liter w wyszukiwarce.
• Posiada natywne wsparcie dla języka polskiego i angielskiego oraz fasetowe filtrowanie według kategorii i filarów tematycznych.

4. Dostępność (WCAG 2.2 AA) i Core Web Vitals (0.000 CLS)

Dostępność cyfrowa i stabilność wizualna to nie opcja, ale standard rynkowy i wymóg prawny (Europejski Akt o Dostępności EAA):

• Hierarchia nagłówków: Dokładnie jeden znacznik <h1> na podstronę, brak przeskoków poziomów nagłówków (logiczna struktura H2 -> H3) sprawdzana automatycznym audytem.
• Pełna obsługa z klawiatury: Nawigacja Tab, czytelne obrysy focus-visible, atrybuty aria-invalid oraz semantyczne etykiety pól formularza.
• Stabilność układu (CLS = 0.000): Komponenty nie powodują skakania strony podczas wczytywania, co gwarantuje najwyższe noty w algorytmach Google PageSpeed.

5. Prywatność i RODO bez kar UOKiK: Google Consent Mode v2

Wiele stron wdraża analitykę nielegalnie, zbierając cookies przed uzyskaniem zgody użytkownika. Na paweldomanski.eu:

• Kompaktowy baner Cookie Consent: Zajmuje poniżej 15% wysokości ekranu mobilnego (brak kar za Intrusive Interstitials), nie blokuje wątku głównego (uruchamiany asynchronicznie przez requestIdleCallback).
• Google Consent Mode v2: Tagi Google Analytics 4 (G-F4D5VGQ5L1) domyślnie blokują zapis ciasteczek analitycznych (analytics_storage: 'denied'). Dopiero kliknięcie „Zaakceptuj” dynamicznie odblokowuje zbieranie danych.
• Własna, bezpieczna analityka: Równolegle działa instancja DexterLab Analytics (stat.dexterlab.pl), która liczy odsłony całkowicie anonimowo bez śledzenia użytkowników między witrynami.
• Komplet dokumentów prawnych: Dedykowane polityki prywatności, cookies, regulamin oraz procedury zwrotów w wersji dwujęzycznej (PL/EN).

6. Generative Engine Optimization (GEO): Gotowość na wyszukiwarki AI

W 2026 roku wyszukiwanie to nie tylko Google, ale ChatGPT, Claude, Perplexity i Google AI Overviews. Aby boty AI rozumiały treść serwisu:

• Standard llms.txt i llms-full.txt: Oficjalny format (llmstxt.org) serwujący skompresowany, semantyczny kontekst strony w formacie Markdown dla modeli LLM.
• Dane ustrukturyzowane JSON-LD: Każda podstrona posiada pełne grafy Schema.org (WebSite, Person, TechArticle, Service, BreadcrumbList) z dowodem autorstwa (Named Authorship).
• AI-Ready robots.txt: Dedykowane reguły autoryzujące roboty GPTBot, ClaudeBot, PerplexityBot i Applebot.
• Dwujęzyczne kanały RSS: Automatycznie generowane feedy /rss.xml i /en/rss.xml ułatwiające agregację najnowszych publikacji.

7. Wdrażanie i infrastruktura: Cloudflare Workers & Vercel

Architektura została zaprojektowana w sposób uniezależniony od jednego dostawcy:

• Cloudflare Workers (Static Assets): Dzięki plikowi wrangler.jsonc wygenerowane zasoby trafiają bezpośrednio na globalny edge Cloudflare — zero narzutu kontenerów, zerowe koszty stałe.
• Vercel Build Output API v3: Skonfigurowany adapter @astrojs/vercel pozwala na równoległe wdrożenie w ekosystemie Vercel bez błędów 404.
• Docker / Node fallback: Możliwość uruchomienia projektu w izolowanym kontenerze na własnym serwerze VPS (np. Hetzner) za pomocą @astrojs/node.

Podsumowanie: Wnioski dla Twojego projektu

Nowoczesne tworzenie stron WWW nie polega na dokładaniu kolejnych bibliotek, lecz na świadomej redukcji zbędnego kodu. Połączenie Astro 7, gita jako bazy danych (TinaCMS) i WebAssembly (Pagefind) pozwala zbudować platformę, która ładuje się błyskawicznie, kosztuje grosze w utrzymaniu i jest w 100% odporna na awarie zewnętrznych baz danych.

Jeśli chcesz wdrożyć podobną architekturę w swojej firmie lub potrzebujesz audytu wydajności obecnego serwisu, sprawdź moje usługi doradcze lub umów się na konsultację architektoniczną.