Typer Bot: produkcja pod SEO, Web Push i RODO w jednym Next.js
Typer Bot to mój najdłużej rozwijany projekt produktowy: prywatny panel do publikacji typów i analiz bukmacherskich, publiczna strona ze statystykami i archiwum wyników oraz natychmiastowe powiadomienia na Telegramie i w przeglądarce.
Ten wpis to podsumowanie wyzwań inżynieryjnych i decyzji architektonicznych z budowy aplikacji, z której każdego dnia korzystają żywi użytkownicy.
Problem: Jak połączyć szybkość, SEO i powiadomienia bez armii serwerów
W projektach tego typu najłatwiej wpaść w pułapkę nadmiernej komplikacji: postawić osobną aplikację dla panelu, osobną stronę pod pozycjonowanie w Google, a do powiadomień dokupić drogie usługi zewnętrzne.
Przed aplikacją stały cztery twarde wymagania biznesowe:
- Błyskawiczne ładowanie i wysoka pozycja w Google (SEO): Każda analiza meczowa musiała ładować się w ułamku sekundy i być w pełni zrozumiała dla robotów wyszukiwarki.
- Bezpieczny panel redaktora: Publikacja typów musiała być zabezpieczona dwuskładnikowym uwierzytelnianiem (2FA), by nikt niepowołany nie przejął konta.
- Powiadomienia na żywo (Web Push): Informacja o nowym typie musi trafić na ekran smartfona użytkownika w 2-3 sekundy po zatwierdzeniu przez redaktora.
- Zgodność z przepisami RODO (Art. 17): Użytkownik musi mieć możliwość natychmiastowego wycofania zgody i usunięcia swoich danych jednym kliknięciem.
Co zrobiłem: Jeden zoptymalizowany monolit w Next.js 16 i PostgreSQL
Zamiast mnożyć serwery, zmieściłem całą platformę w jednym, precyzyjnie dostrojonym procesie Next.js 16 opartym o bazę PostgreSQL z ORM Prisma.
1. SEO i błyskawiczne renderowanie (ISR + JSON-LD)
Zastosowałem mechanizm Incremental Static Regeneration (ISR). Strony poszczególnych typów (/typy/[id]) generują się raz, a potem serwowane są błyskawicznie z pamięci podręcznej.
- Każda strona zawiera dane strukturalne Schema.org (
SportsEvent,BlogPosting), dzięki czemu wyszukiwarka Google od razu wyświetla kursy, datę meczu i rywalizujące drużyny bezpośrednio w wynikach wyszukiwania. - Dynamiczny generator tworzy dedykowane grafiki OpenGraph dla każdego typu, co zwiększa klikalność przy udostępnianiu linków na forach i social mediach.
2. Powiadomienia Web Push z prawem do bycia zapomnianym
Wdrożenie powiadomień w przeglądarce bez zewnętrznych płatnych platform okazało się świetną lekcją inżynierii:
- Obsługa specyfiki przeglądarek: Przeglądarki takie jak Brave czy Safari potrafią po cichu blokować powiadomienia. Stworzyłem czytelny system komunikatów informujący użytkownika, jak jednym ruchem odblokować uprawnienia w systemie.
- Prywatność jako funkcja (Art. 17 RODO): Przycisk wypisania się z powiadomień nie tylko wyłącza powiadomienia w przeglądarce, ale natychmiast usuwa klucze subskrypcji z bazy PostgreSQL. Zgodność z prawem stała się wygodnym elementem interfejsu, a nie nudnym dokumentem prawnym.
3. Twarda kontrola jakości w Playwright E2E
Zanim jakakolwiek zmiana trafi na serwer produkcyjny, przechodzi przez pełen zestaw automatycznych testów Playwright uruchamianych na trzech silnikach przeglądarek: Chromium, Firefox i WebKit (Safari). Testy symulują prawdziwego użytkownika: logują się do panelu z kodem 2FA, publikują typ i sprawdzają, czy pojawił się na stronie głównej oraz w kanale Telegram.
Dlaczego to ważne (Use Case)
Dlaczego taka architektura daje ogromną przewagę?
- Radykalna oszczędność kosztów: Cała platforma - front dla kibiców, panel redakcji, bot Telegram i serwer powiadomień Web Push - działa bez problemu na pojedynczym małym serwerze VPS za kilkadziesiąt złotych miesięcznie.
- Maksymalny ruch organiczny z Google: Dzięki danym strukturalnym i czasom ładowania poniżej 500 ms serwis osiąga wysokie pozycje w wyszukiwarkach bez wydawania budżetu na płatne reklamy.
- Spokój prawny: Wdrożenie prawa do bycia zapomnianym bezpośrednio w architekturze bazy danych eliminuje ryzyko skarg dotyczących przetwarzania danych osobowych.
Czego się nauczyłem
- SEO to fundament architektury, a nie dodatek na końcu: Dynamiczne obrazki OpenGraph i dane JSON-LD muszą być projektowane razem ze strukturą bazy danych, a nie dokładane na siłę po zakończeniu projektu.
- Poszanowanie prywatności to zaleta techniczna: Przejrzyste zarządzanie zgodami użytkowników buduje lojalność i sprawia, że odbiorcy chętniej instalują powiadomienia.
- Prostota operacyjna jest cechą systemu: Zamiast skomplikowanych klastrów mikroserwisów, dobrze zaprojektowana aplikacja Next.js potrafi obsłużyć duży ruch produkcyjny przy minimalnym narzucie administracyjnym.
Chętnie wymienię się doświadczeniami i podyskutuję o architekturze tego rozwiązania z innymi inżynierami.