E-commerce od zera: Analiza architektury niestandardowego sklepu internetowego
Niestandardowa platforma e commerce oparta na React SPA (Vite) i własnym backendzie REST – nie jest to WooCommerce, Shopify ani WordPress headless. Aktualna architektura ma zalety (kontrola nad UI, niezależność frontendu), ale też poważne wady: wrażliwość na błędy SEO, ryzyko „soft 404” i zależność od JavaScriptu pr...
Opublikowane przezObrazy wygenerowane za pomocą GPT Image 1.5
Niestandardowa platforma e commerce oparta na React SPA (Vite) i własnym backendzie REST – nie jest to WooCommerce, Shopify ani WordPress headless.
Aktualna architektura ma zalety (kontrola nad UI, niezależność frontendu), ale też poważne wady: wrażliwość na błędy SEO, ryzyko „soft 404” i zależność od JavaScriptu przy pierwszym ładowaniu.
Google odradza stosowanie dynamic renderingu jako długoterminowego rozwiązania – zaleca SSR, SSG lub hybrydowe renderowanie.
Dla małego katalogu (16 produktów) niestandardowe rozwiązanie może być przerostem formy nad treścią; WooCommerce może być prostszy w utrzymaniu, ale custom daje pełną kontrolę nad UX.
Bạn là bộ NÃO LẬP KẾ HOẠCH của một code agentAI-generated editorial hero image for Bạn là bộ NÃO LẬP KẾ HOẠCH của một code agent. Bạn không trực tiếp truy cập máy; ENGINE sẽ thực thi đúng một lệnh JSON bạn in ra và trả kết.
AI Prompt
Create a landscape editorial hero image for this Studio Global article: Bạn là bộ NÃO LẬP KẾ HOẠCH của một code agent. Bạn không trực tiếp truy cập máy; ENGINE sẽ thực thi đúng một lệnh JSON bạn in ra và trả kết. Article summary: {"tool":"write","args":{"path":"PHAN TICH KIEN TRUC ECOMMERCE.md","content":" Phân tích kiến trúc và hướng viết lại nền tảng e commerce\n\n Phạm vi và mức độ chắc chắn\n\nBáo cáo này phân biệt rõ ba loại kết luận:\n\n Dữ. Topic tags: general web, workflow, code, python, javascript. Style: premium digital editorial illustration, source-backed research mood, clean composition, high detail, modern web publication hero. Use reference image context only for broad subject, composition, and topical grounding; do not copy the exact image. Avoid: logos, brand marks, copyrighted characters, real person likenesses, fake screenshots, UI text, readable text, watermarks, char
openai.com
Analiza architektury i plan przepisania niestandardowej platformy e-commerce
Niniejszy raport przedstawia szczegółową analizę architektury istniejącego sklepu internetowego, który został zbudowany od podstaw przy użyciu React SPA, Vite i własnego backendu REST. Celem jest ocena jego mocnych i słabych stron, porównanie z popularnym rozwiązaniem WooCommerce oraz przedstawienie konkretnych zaleceń dotyczących modernizacji i przepisania kodu. Raport opiera się wyłącznie na obserwowalnych elementach (struktura URL endpointów, zmienne w kodzie frontendowym) i wyciąga z nich techniczne wnioski, nie pretendując do miana audytu kodu źródłowego backendu.
1. Obecna architektura: trzy warstwy
Sklep działa w modelu trójwarstwowym:
Cloudflare/CDN – działa jako reverse proxy, obsługuje żądania, serwuje statyczne assety z hashem i przekierowuje dynamiczne żądania do origin.
React SPA (zbudowane z Vite) – odpowiada za renderowanie interfejsu użytkownika, zarządzanie routingiem i stanem po stronie przeglądarki.
Własny backend REST – dostarcza dane katalogu, treści CMS, konfigurację sklepu oraz obsługuje logikę biznesową (kupony, płatności PayPal, kontakt, newsletter, recenzje, śledzenie).
To nie jest WooCommerce, Shopify ani WordPress headless. Powód? API, schematy produktów, ustawienia i przepływ płatności są całkowicie niestandardowe i nie przypominają domyślnych konwencji REST tych platform.
Ważne zastrzeżenie: Cloudflare nie ujawnia, jaki język programowania jest używany po stronie serwera. Może to być Node.js, PHP, Python lub wiele różnych usług. Do ostatecznej identyfikacji potrzebne są dodatkowe dane (np. nagłówki odpowiedzi, format błędów).
2. Przepływ danych: od pierwszego wejrzenia do interakcji
Gdy użytkownik wchodzi na dowolną podstronę (/, /shop, /product/<slug>), serwer zwraca ten sam „app-shell” HTML z pustym kontenerem div#root i paczką JavaScript. Cała treść (produkty, kategorie, ustawienia) jest pobierana przez JavaScript po stronie klienta.
Typowy scenariusz:
Przeglądarka pobiera HTML aplikacji (app-shell).
Ładuje pliki JS/CSS (z hashem, co umożliwia długie cache'owanie).
React inicjalizuje się w #root, a router odczytuje location.pathname.
Komponent strony pobiera dane – albo z window.__INITIAL_DATA__ (dane z bootstrapu), albo przez wywołanie REST API.
Studio Global AI
Continue your research
This page includes a source-backed answer you can continue inside Studio Global.
What is the short answer to "E-commerce od zera: Analiza architektury niestandardowego sklepu internetowego"?
Niestandardowa platforma e commerce oparta na React SPA (Vite) i własnym backendzie REST – nie jest to WooCommerce, Shopify ani WordPress headless.
What are the key points to validate first?
Niestandardowa platforma e commerce oparta na React SPA (Vite) i własnym backendzie REST – nie jest to WooCommerce, Shopify ani WordPress headless. Aktualna architektura ma zalety (kontrola nad UI, niezależność frontendu), ale też poważne wady: wrażliwość na błędy SEO, ryzyko „soft 404” i zależność od JavaScriptu przy pierwszym ładowaniu.
What should I do next in practice?
Google odradza stosowanie dynamic renderingu jako długoterminowego rozwiązania – zaleca SSR, SSG lub hybrydowe renderowanie.
E-commerce od zera: Analiza architektury niestandardowego sklepu internetowego
Niestandardowa platforma e commerce oparta na React SPA (Vite) i własnym backendzie REST – nie jest to WooCommerce, Shopify ani WordPress headless. Aktualna architektura ma zalety (kontrola nad UI, niezależność frontendu), ale też poważne wady: wrażliwość na błędy SEO, ryzyko „soft 404” i zależność od JavaScriptu pr...
Opublikowane przezObrazy wygenerowane za pomocą GPT Image 1.5
Niestandardowa platforma e commerce oparta na React SPA (Vite) i własnym backendzie REST – nie jest to WooCommerce, Shopify ani WordPress headless.
Aktualna architektura ma zalety (kontrola nad UI, niezależność frontendu), ale też poważne wady: wrażliwość na błędy SEO, ryzyko „soft 404” i zależność od JavaScriptu przy pierwszym ładowaniu.
Google odradza stosowanie dynamic renderingu jako długoterminowego rozwiązania – zaleca SSR, SSG lub hybrydowe renderowanie.
Dla małego katalogu (16 produktów) niestandardowe rozwiązanie może być przerostem formy nad treścią; WooCommerce może być prostszy w utrzymaniu, ale custom daje pełną kontrolę nad UX.
Bạn là bộ NÃO LẬP KẾ HOẠCH của một code agentAI-generated editorial hero image for Bạn là bộ NÃO LẬP KẾ HOẠCH của một code agent. Bạn không trực tiếp truy cập máy; ENGINE sẽ thực thi đúng một lệnh JSON bạn in ra và trả kết.
AI Prompt
Create a landscape editorial hero image for this Studio Global article: Bạn là bộ NÃO LẬP KẾ HOẠCH của một code agent. Bạn không trực tiếp truy cập máy; ENGINE sẽ thực thi đúng một lệnh JSON bạn in ra và trả kết. Article summary: {"tool":"write","args":{"path":"PHAN TICH KIEN TRUC ECOMMERCE.md","content":" Phân tích kiến trúc và hướng viết lại nền tảng e commerce\n\n Phạm vi và mức độ chắc chắn\n\nBáo cáo này phân biệt rõ ba loại kết luận:\n\n Dữ. Topic tags: general web, workflow, code, python, javascript. Style: premium digital editorial illustration, source-backed research mood, clean composition, high detail, modern web publication hero. Use reference image context only for broad subject, composition, and topical grounding; do not copy the exact image. Avoid: logos, brand marks, copyrighted characters, real person likenesses, fake screenshots, UI text, readable text, watermarks, char
openai.com
Analiza architektury i plan przepisania niestandardowej platformy e-commerce
Niniejszy raport przedstawia szczegółową analizę architektury istniejącego sklepu internetowego, który został zbudowany od podstaw przy użyciu React SPA, Vite i własnego backendu REST. Celem jest ocena jego mocnych i słabych stron, porównanie z popularnym rozwiązaniem WooCommerce oraz przedstawienie konkretnych zaleceń dotyczących modernizacji i przepisania kodu. Raport opiera się wyłącznie na obserwowalnych elementach (struktura URL endpointów, zmienne w kodzie frontendowym) i wyciąga z nich techniczne wnioski, nie pretendując do miana audytu kodu źródłowego backendu.
1. Obecna architektura: trzy warstwy
Sklep działa w modelu trójwarstwowym:
Cloudflare/CDN – działa jako reverse proxy, obsługuje żądania, serwuje statyczne assety z hashem i przekierowuje dynamiczne żądania do origin.
React SPA (zbudowane z Vite) – odpowiada za renderowanie interfejsu użytkownika, zarządzanie routingiem i stanem po stronie przeglądarki.
Własny backend REST – dostarcza dane katalogu, treści CMS, konfigurację sklepu oraz obsługuje logikę biznesową (kupony, płatności PayPal, kontakt, newsletter, recenzje, śledzenie).
To nie jest WooCommerce, Shopify ani WordPress headless. Powód? API, schematy produktów, ustawienia i przepływ płatności są całkowicie niestandardowe i nie przypominają domyślnych konwencji REST tych platform.
Ważne zastrzeżenie: Cloudflare nie ujawnia, jaki język programowania jest używany po stronie serwera. Może to być Node.js, PHP, Python lub wiele różnych usług. Do ostatecznej identyfikacji potrzebne są dodatkowe dane (np. nagłówki odpowiedzi, format błędów).
2. Przepływ danych: od pierwszego wejrzenia do interakcji
Gdy użytkownik wchodzi na dowolną podstronę (/, /shop, /product/<slug>), serwer zwraca ten sam „app-shell” HTML z pustym kontenerem div#root i paczką JavaScript. Cała treść (produkty, kategorie, ustawienia) jest pobierana przez JavaScript po stronie klienta.
Typowy scenariusz:
Przeglądarka pobiera HTML aplikacji (app-shell).
Ładuje pliki JS/CSS (z hashem, co umożliwia długie cache'owanie).
React inicjalizuje się w #root, a router odczytuje location.pathname.
Komponent strony pobiera dane – albo z window.__INITIAL_DATA__ (dane z bootstrapu), albo przez wywołanie REST API.
Studio Global AI
Continue your research
This page includes a source-backed answer you can continue inside Studio Global.
What is the short answer to "E-commerce od zera: Analiza architektury niestandardowego sklepu internetowego"?
Niestandardowa platforma e commerce oparta na React SPA (Vite) i własnym backendzie REST – nie jest to WooCommerce, Shopify ani WordPress headless.
What are the key points to validate first?
Niestandardowa platforma e commerce oparta na React SPA (Vite) i własnym backendzie REST – nie jest to WooCommerce, Shopify ani WordPress headless. Aktualna architektura ma zalety (kontrola nad UI, niezależność frontendu), ale też poważne wady: wrażliwość na błędy SEO, ryzyko „soft 404” i zależność od JavaScriptu przy pierwszym ładowaniu.
What should I do next in practice?
Google odradza stosowanie dynamic renderingu jako długoterminowego rozwiązania – zaleca SSR, SSG lub hybrydowe renderowanie.
Kolejne zmiany stron odbywają się w trybie SPA (szybko, bez przeładowania całej strony).
Kluczowy problem SEO: Aplikacja działa w trybie Client-Side Rendering (CSR). Chociaż Google potrafi indeksować JavaScript, to proces ten jest opóźniony, a błędy w API mogą sprawić, że robot zobaczy pustą stronę. Ponadto, app-shell jest zwracany dla każdej ścieżki, nawet jeśli produkt nie istnieje – to prowadzi do tzw. „soft 404” (strona zwraca kod 200, ale nie ma treści). Google wyraźnie odradza takie podejście .
3. Katalog produktów: prosty, ale nieidealny
API katalogu jest sensownie zaprojektowane: GET /api/products zwraca listę produktów, a GET /api/products/<slug> szczegóły. Dzięki temu frontend nie musi być przebudowywany przy każdej zmianie w katalogu.
Jednak są problemy:
Limit 500 produktów w jednym żądaniu – działa dla 16 produktów, ale dla większego katalogu będzie nieefektywne. Lepiej zastosować paginację kursorem.
Model danych zorientowany na produkt, a nie na wariant – pole stock jest na poziomie produktu, ale istnieją też variants. To prowadzi do niespójności: stan magazynowy powinien być przypisany do konkretnego wariantu (np. rozmiar M, kolor czarny), a nie do całego produktu.
Niespójne dane – występują zarówno XXL, jak i 2XL, a także ink navy i Ink Navy. Utrudnia to filtrowanie, analitykę i mapowanie zdjęć.
Wniosek: Nowy system powinien mieć scentralizowany model danych z wariantami, SKU i stanem magazynowym na poziomie wariantu.
4. Budowniczy strony głównej i layoutu
Aplikacja wykorzystuje własny CMS do zarządzania stroną główną (/api/homepage) i layoutem (/api/layout). section_order i obiekty włącz/wyłącz wskazują, że strona główna jest kompozycją bloków (hero, trustbar, promocje, produkty), którą można zmieniać bez publikacji nowej wersji frontendu.
Zalety: Duża elastyczność dla marketingu.
Wady: Istnieją aliasy kluczy (np. ann i announcement), a struktura danych (kolejność, przełączniki, payload) może być niespójna. Nowy system powinien używać jednej, spójnej listy bloków z unikalnym ID, typem, stanem i danymi.
5. Ustawienia sklepu: wygoda vs. bezpieczeństwo
Endpoint /api/public/settings zwraca szeroki zakres konfiguracji: od kolorów marki po dane kontaktowe, progi darmowej wysyłki, a nawet tax_id. To wygodne, ale niebezpieczne. Nie wszystkie dane powinny być dostępne publicznie. tax_id, adres prawny czy wewnętrzne e-maile nie powinny trafiać do odpowiedzi API, którą każdy może odczytać. PayPal client_id może być publiczny, ale client secret absolutnie nie.
6. Płatności PayPal i logika biznesowa
Przepływ płatności jest prawidłowo zaprojektowany: klient wysyła koszyk i kod rabatowy, serwer samodzielnie oblicza wartości, tworzy zamówienie w PayPal, a następnie je przechwytuje. To jedyna słuszna droga. Serwer nie może ufać danym z przeglądarki (cena, rabat, wysyłka).
Potencjalne problemy wymagające uwagi:
Idempotencja (zabezpieczenie przed podwójnym kliknięciem).
Transakcje bazodanowe (uniknięcie oversellingu).
Weryfikacja webhooków PayPal.
Mechanizm uzgadniania (reconciliation) dla przypadków, gdy PayPal potwierdzi płatność, ale odpowiedź nie dotrze do sklepu.
7. Pozostałe endpointy: recenzje, newsletter, kontakt, śledzenie
Sklep oferuje pełen zakres funkcji e-commerce. Warto zwrócić uwagę na:
Recenzje: Potrzebują stanu (oczekujące/zaakceptowane), ochrony przed spamem i weryfikacji zakupu. Nazwa endpointu POST /api/reviews/<id> jest myląca – nowy system powinien używać RESTful resource naming.
Newsletter: Wymaga normalizacji e-maili, unikalności, double opt-in i mechanizmu rezygnacji.
Kontakt: Niezbędny jest CAPTCHA lub inna ochrona przed botami.
Śledzenie zamówień: Publiczny endpoint może być podatny na ataki typu „enumeration” (przeglądanie zamówień po numerze). Należy użyć tokena lub dodatkowych danych uwierzytelniających.
8. Porównanie: Custom vs. WooCommerce – co jest lepsze?
Kryterium
Custom React + REST
WooCommerce tradycyjny
UI/Doświadczenie marki
Bardzo elastyczne
Ograniczone motywem
SEO (domyślnie)
Ryzykowne (CSR)
Dobre (HTML serwerowy)
Nawigacja po załadowaniu
Bardzo szybka
Standardowa
Pierwsze wrażenie
Mogą wystąpić opóźnienia (JS, API)
Natychmiastowa treść HTML
Panel administracyjny
Należy zbudować samodzielnie
Dojrzały, gotowy
Utrzymanie
Wysokie koszty inżynieryjne
Koszty aktualizacji wtyczek
Skalowalność (wiele kanałów)
Doskonała
Wymaga warstwy headless
Odpowiedniość dla 16 produktów
Może być przerostem formy
Bardzo odpowiednie
Wniosek: Custom daje pełną kontrolę, ale wymaga zespołu i budowy wszystkiego od zera. WooCommerce jest prostszy i szybszy we wdrożeniu, ale ogranicza elastyczność. Nie ma jednoznacznej odpowiedzi – wybór zależy od priorytetów (szybkość wdrożenia vs. unikalne UX).
9. Plan przepisania: od SPA do hybrydy
Zamiast przepisywać aplikację na WooCommerce, zalecamy przepisanie jej od nowa, zachowując koncepcję customowego backendu, ale zmieniając strategię renderowania i model danych.
Zalecany stos technologiczny:
Frontend: Next.js (App Router) z React i TypeScript. Umożliwia SSR, ISR i statyczne generowanie stron, co rozwiązuje problemy SEO kosztem nieco większej złożoności.
Backend: NestJS (z Fastify) lub modułowy Fastify z TypeScript. Zapewnia strukturę, walidację i typowanie.
Baza danych: PostgreSQL jako źródło prawdy. Drizzle ORM lub Prisma do migracji i bezpiecznych zapytań.
Cache: Redis (tylko w razie potrzeby).
Kolejki: BullMQ do zadań asynchronicznych (e-maile, webhooki).
Storage: S3-compatible object storage dla multimediów.
Renderowanie hybrydowe: Użyj Next.js do generowania statycznych stron produktów i kategorii (ISR). Strony dynamiczne (koszyk, konto) mogą być renderowane po stronie serwera. Zmniejszy to zależność od JavaScript i poprawi SEO.
Model danych: Zastąp płaską strukturę produktu modelem z wariantami (rozmiar, kolor, stan magazynowy). Ujednolić wartości opcji (usunąć duplikaty).
Builder strony głównej: Zastąp rozproszoną konfigurację (section_order + toggles + payload) jedną, spójną listą bloków z własnym schematem.
Ustawienia: Podziel konfigurację na publiczną i prywatną. Nie udostępniaj danych wrażliwych przez publiczne API.
Checkout: Dodaj idempotencję, transakcje bazodanowe i mechanizm uzgadniania płatności.
Bezpieczeństwo: Wprowadź walidację dla wszystkich endpointów (CAPTCHA, rate limiting, ochrona przed enumeracją).
10. Podsumowanie
Obecna platforma jest solidna, ale ma poważne wady: model CSR jest problematyczny dla SEO, a model danych wymaga normalizacji. Przepisanie jej na Next.js z renderowaniem hybrydowym i solidniejszym backendem to inwestycja, która się opłaci, jeśli priorytetem jest unikalne doświadczenie marki i skalowalność. Dla małego sklepu z 16 produktami warto rozważyć, czy prostsze i tańsze w utrzymaniu WooCommerce nie będzie lepszym rozwiązaniem. Ostateczna decyzja należy do właściciela, ale kluczowe jest, aby podjąć ją świadomie, rozumiejąc kompromisy.
incremys.com
JavaScript SEO 2026: Rendering, SSR and Pre-Rendering
Kolejne zmiany stron odbywają się w trybie SPA (szybko, bez przeładowania całej strony).
Kluczowy problem SEO: Aplikacja działa w trybie Client-Side Rendering (CSR). Chociaż Google potrafi indeksować JavaScript, to proces ten jest opóźniony, a błędy w API mogą sprawić, że robot zobaczy pustą stronę. Ponadto, app-shell jest zwracany dla każdej ścieżki, nawet jeśli produkt nie istnieje – to prowadzi do tzw. „soft 404” (strona zwraca kod 200, ale nie ma treści). Google wyraźnie odradza takie podejście .
3. Katalog produktów: prosty, ale nieidealny
API katalogu jest sensownie zaprojektowane: GET /api/products zwraca listę produktów, a GET /api/products/<slug> szczegóły. Dzięki temu frontend nie musi być przebudowywany przy każdej zmianie w katalogu.
Jednak są problemy:
Limit 500 produktów w jednym żądaniu – działa dla 16 produktów, ale dla większego katalogu będzie nieefektywne. Lepiej zastosować paginację kursorem.
Model danych zorientowany na produkt, a nie na wariant – pole stock jest na poziomie produktu, ale istnieją też variants. To prowadzi do niespójności: stan magazynowy powinien być przypisany do konkretnego wariantu (np. rozmiar M, kolor czarny), a nie do całego produktu.
Niespójne dane – występują zarówno XXL, jak i 2XL, a także ink navy i Ink Navy. Utrudnia to filtrowanie, analitykę i mapowanie zdjęć.
Wniosek: Nowy system powinien mieć scentralizowany model danych z wariantami, SKU i stanem magazynowym na poziomie wariantu.
4. Budowniczy strony głównej i layoutu
Aplikacja wykorzystuje własny CMS do zarządzania stroną główną (/api/homepage) i layoutem (/api/layout). section_order i obiekty włącz/wyłącz wskazują, że strona główna jest kompozycją bloków (hero, trustbar, promocje, produkty), którą można zmieniać bez publikacji nowej wersji frontendu.
Zalety: Duża elastyczność dla marketingu.
Wady: Istnieją aliasy kluczy (np. ann i announcement), a struktura danych (kolejność, przełączniki, payload) może być niespójna. Nowy system powinien używać jednej, spójnej listy bloków z unikalnym ID, typem, stanem i danymi.
5. Ustawienia sklepu: wygoda vs. bezpieczeństwo
Endpoint /api/public/settings zwraca szeroki zakres konfiguracji: od kolorów marki po dane kontaktowe, progi darmowej wysyłki, a nawet tax_id. To wygodne, ale niebezpieczne. Nie wszystkie dane powinny być dostępne publicznie. tax_id, adres prawny czy wewnętrzne e-maile nie powinny trafiać do odpowiedzi API, którą każdy może odczytać. PayPal client_id może być publiczny, ale client secret absolutnie nie.
6. Płatności PayPal i logika biznesowa
Przepływ płatności jest prawidłowo zaprojektowany: klient wysyła koszyk i kod rabatowy, serwer samodzielnie oblicza wartości, tworzy zamówienie w PayPal, a następnie je przechwytuje. To jedyna słuszna droga. Serwer nie może ufać danym z przeglądarki (cena, rabat, wysyłka).
Potencjalne problemy wymagające uwagi:
Idempotencja (zabezpieczenie przed podwójnym kliknięciem).
Transakcje bazodanowe (uniknięcie oversellingu).
Weryfikacja webhooków PayPal.
Mechanizm uzgadniania (reconciliation) dla przypadków, gdy PayPal potwierdzi płatność, ale odpowiedź nie dotrze do sklepu.
7. Pozostałe endpointy: recenzje, newsletter, kontakt, śledzenie
Sklep oferuje pełen zakres funkcji e-commerce. Warto zwrócić uwagę na:
Recenzje: Potrzebują stanu (oczekujące/zaakceptowane), ochrony przed spamem i weryfikacji zakupu. Nazwa endpointu POST /api/reviews/<id> jest myląca – nowy system powinien używać RESTful resource naming.
Newsletter: Wymaga normalizacji e-maili, unikalności, double opt-in i mechanizmu rezygnacji.
Kontakt: Niezbędny jest CAPTCHA lub inna ochrona przed botami.
Śledzenie zamówień: Publiczny endpoint może być podatny na ataki typu „enumeration” (przeglądanie zamówień po numerze). Należy użyć tokena lub dodatkowych danych uwierzytelniających.
8. Porównanie: Custom vs. WooCommerce – co jest lepsze?
Kryterium
Custom React + REST
WooCommerce tradycyjny
UI/Doświadczenie marki
Bardzo elastyczne
Ograniczone motywem
SEO (domyślnie)
Ryzykowne (CSR)
Dobre (HTML serwerowy)
Nawigacja po załadowaniu
Bardzo szybka
Standardowa
Pierwsze wrażenie
Mogą wystąpić opóźnienia (JS, API)
Natychmiastowa treść HTML
Panel administracyjny
Należy zbudować samodzielnie
Dojrzały, gotowy
Utrzymanie
Wysokie koszty inżynieryjne
Koszty aktualizacji wtyczek
Skalowalność (wiele kanałów)
Doskonała
Wymaga warstwy headless
Odpowiedniość dla 16 produktów
Może być przerostem formy
Bardzo odpowiednie
Wniosek: Custom daje pełną kontrolę, ale wymaga zespołu i budowy wszystkiego od zera. WooCommerce jest prostszy i szybszy we wdrożeniu, ale ogranicza elastyczność. Nie ma jednoznacznej odpowiedzi – wybór zależy od priorytetów (szybkość wdrożenia vs. unikalne UX).
9. Plan przepisania: od SPA do hybrydy
Zamiast przepisywać aplikację na WooCommerce, zalecamy przepisanie jej od nowa, zachowując koncepcję customowego backendu, ale zmieniając strategię renderowania i model danych.
Zalecany stos technologiczny:
Frontend: Next.js (App Router) z React i TypeScript. Umożliwia SSR, ISR i statyczne generowanie stron, co rozwiązuje problemy SEO kosztem nieco większej złożoności.
Backend: NestJS (z Fastify) lub modułowy Fastify z TypeScript. Zapewnia strukturę, walidację i typowanie.
Baza danych: PostgreSQL jako źródło prawdy. Drizzle ORM lub Prisma do migracji i bezpiecznych zapytań.
Cache: Redis (tylko w razie potrzeby).
Kolejki: BullMQ do zadań asynchronicznych (e-maile, webhooki).
Storage: S3-compatible object storage dla multimediów.
Renderowanie hybrydowe: Użyj Next.js do generowania statycznych stron produktów i kategorii (ISR). Strony dynamiczne (koszyk, konto) mogą być renderowane po stronie serwera. Zmniejszy to zależność od JavaScript i poprawi SEO.
Model danych: Zastąp płaską strukturę produktu modelem z wariantami (rozmiar, kolor, stan magazynowy). Ujednolić wartości opcji (usunąć duplikaty).
Builder strony głównej: Zastąp rozproszoną konfigurację (section_order + toggles + payload) jedną, spójną listą bloków z własnym schematem.
Ustawienia: Podziel konfigurację na publiczną i prywatną. Nie udostępniaj danych wrażliwych przez publiczne API.
Checkout: Dodaj idempotencję, transakcje bazodanowe i mechanizm uzgadniania płatności.
Bezpieczeństwo: Wprowadź walidację dla wszystkich endpointów (CAPTCHA, rate limiting, ochrona przed enumeracją).
10. Podsumowanie
Obecna platforma jest solidna, ale ma poważne wady: model CSR jest problematyczny dla SEO, a model danych wymaga normalizacji. Przepisanie jej na Next.js z renderowaniem hybrydowym i solidniejszym backendem to inwestycja, która się opłaci, jeśli priorytetem jest unikalne doświadczenie marki i skalowalność. Dla małego sklepu z 16 produktami warto rozważyć, czy prostsze i tańsze w utrzymaniu WooCommerce nie będzie lepszym rozwiązaniem. Ostateczna decyzja należy do właściciela, ale kluczowe jest, aby podjąć ją świadomie, rozumiejąc kompromisy.
incremys.com
JavaScript SEO 2026: Rendering, SSR and Pre-Rendering
