Różnice między renderowaniem po stronie klienta (CSR) a renderowaniem po stronie serwera (SSR) – dobre praktyki SEO

Co charakteryzuje funkcjonowanie całego internetu? To przede wszystkim nieustannie zachodzące zmiany. Aktualizacjom ulegają algorytmy w wyszukiwarkach, zmieniają się trendy w projektowaniu stron, a także sposoby wyszukiwania informacji i wiele innych czynników. Pozostaje jednak rzecz, która jest niezmienna – fakt, że tylko dobre strony internetowe wyświetlają się wysoko w wynikach wyszukiwania i dzięki temu zyskują więcej odwiedzających. To, aby znaleźć się na wysokiej pozycji w wyszukiwarce, jest priorytetem podczas prowadzenia działalności online. Wyszukiwarki są pierwszymi stronami sieci, na które wchodzą użytkownicy. Ich misją jest więc to, aby pokazywać odwiedzającym witryny o najwyższej jakości i jak najlepiej dopasowane do wyszukiwanego hasła. Nie ma więc lepszego sposobu na zwiększenie ruchu na stronie internetowej niż spełnienie tych kryteriów. W jaki sposób można to zrobić?

1. Co to jest SEO?

SEO to z angielskiego Search Engine Optimization, czyli optymalizacja stron internetowych pod kątem pracy wyszukiwarek tak, aby wyświetlały się, jak najwyżej na pierwszej stronie wyników wyszukiwania. Mimo że z początku może wydawać się prostym zadaniem, w praktyce okazuje się długotrwałym i często czasochłonnym procesem.

Wyszukiwarki często zmieniają swoje strategie działania, co bezpośrednio wpływa na sam proces tworzenia stron internetowych. Potrzeba pozycjonowania jest więc ogromna, kiedy chce się sprostać aktualnym wymogom. Na szczęście eksperci SEO są na to przygotowani i stale trzymają rękę na pulsie. Jednak mimo to czasem pojawiają się duże zmiany, którym należy przyjrzeć się z bliska, aby ponownie zbadać, w jaki sposób działają wyszukiwarki i co zrobić, aby dostosować do nich najlepsze praktyki SEO.

2. Co to jest SSR i dlaczego jest ważne podczas budowania widoczności strony?

Na początku swojego funkcjonowania wyszukiwarki internetowe analizowały strony WWW, czytając kod HTML generowany przez ich serwisy. Jednak SSR – Server-Side Rendering – renderowanie po stronie serwera pojawiło się stosunkowo niedawno. Jak sama nazwa wskazuje, jest to metodą generowania zawartości strony WWW od razu po stronie serwera. Dzięki niemu przeglądarka otrzymuje kod od strony, a na ekranie komputera od razu pojawia się cała jej treść.

Sieć internetowa stała się więc bogatą platformą aplikacji. Wszyscy użytkownicy oczekują, że strony będą interaktywne, dynamiczne, interfejsy przyjazne i łatwe w obsłudze. W jaki sposób spełnia się te wymagania? Dzięki tworzeniu stron w HTML i za pomocą JavaScript. Znaczna część współczesnych stron obecnych w sieci jest zbudowana z najbardziej elastycznych technik w tym z renderowaniem po stronie klienta (CSR – Client-Side Rendering). Okazało się to najlepszym sposobem tworzenia nowoczesnych, niezawodnych, dynamicznych i skalowalnych stron internetowych.

Należy jednak pamiętać, że to nie roboty indeksujące wyszukiwarki są pełnoprawnymi przeglądarkami internetowymi. Wprawdzie muszą szybko poruszać się po ogromnej sieci treści, którą analizują, jednak przez lata nie obsługiwały JavaScript i CSR. Oznaczało to, że jeśli witryna używała CSR do wyświetlania treści i innych funkcjonalności, Googleboty jej nie zauważały. Ponieważ działo się tak przez dość długi czas, to SSR jest dobrze rozpoznawalną metodą renderowania treści, która gwarantuje, że treść HTML jest łatwo dostępna dla współczesnych robotów wyszukiwarek. Znajomość SSR jest więc podstawową funkcją platformy internetowej, na którą trzeba zwrócić uwagę podczas pozycjonowania.

Mimo że CSR jest korzystny dla końcowego użytkownika, rodzi szereg wątpliwości na temat zapewnienia spójnych wymagań dotyczących miejsca w rankingu wyników wyszukiwania. Spora część głównych witryn, szczególnie e-commerce, rozwiązała jednak ten problem, renderując indeksowalną zawartość strony internetowej na serwerze, a następnie przełączyła się na CSR, aby zarządzać stroną po jej załadowaniu. SSR jest tutaj doskonałym i sprawdzonym rozwiązaniem. Jeśli jednak nie zostanie poprawnie wykonany, może spowolnić działanie strony, dlatego należy na niego uważać. Warto w tym miejscu wspomnieć, że właśnie szybkość i wydajność witryny są niezwykle ważne dla zapewnienia jej wysokiej pozycji w wyszukiwarce.

Jeśli wyszukiwarka internetowa byłaby w stanie indeksować strony generowane przez CSR, najprościej i najszybciej byłoby renderować całą aplikację za pomocą CSR. Dzieje się tak, ponieważ byłaby ona potrzebna do wyszukiwanych części. Obecnie największe wyszukiwarki w sieci zaczynają wspierać CSR w swoich robotach indeksujących. Jednak mimo to nadal możemy znaleźć wiele witryn z bardzo wysokimi wynikami w rankingu wyszukiwania, nawet jeśli nie inwestują w SSR. Co sprawia więc, że osiągają takie efekty?

Współcześni przedsiębiorcy zdają sobie sprawę, jak ważne jest SEO i płatne wyniki w wyszukiwarkach, czyli SEM. To dzięki takim działaniom marketingowym są w stanie pozyskać klientów i generować przychody. Ważne jest także inwestowanie w nowe technologie, takie jak np. PWA (progresywne aplikacje internetowe), które w dużym stopniu opierają się na CSR, jednak nie można ostatecznie orzec, czy są zdecydowanie bardziej efektywne w porównaniu do SSR. Mimo to dzięki PWA Studio uznawane jest za przyszłość internetu, gdzie SSR nie jest już trudnym do spełnienia wymogiem i gdzie spełniane są obecne potrzeby i uspokajane obawy sprzedawców online.

Aby złagodzić chaos informacyjny i sprawdzić, na co najlepiej postawić, przyjrzyjmy się argumentom za i przeciw SSR w PWA Studio i poznajmy wybrane opcje, które pozwolą spełnić wysokie wymagania współczesnego internetu.

3. Czy SSR jest niezbędne?

Na wstępie warto zaznaczyć, że na to pytanie nie ma prostej odpowiedzi. Istnieją zarówno argumenty za, jak i przeciw SSR, szczególnie w kontekście PWA i dynamicznych aplikacji i witryn opartych na JavaScript. Jednak z pewnością nie ma argumentów za skutecznością SSR w całym okresie istnienia sieci internetowej. SSR generuje nam dodatkowe koszty, dlatego warto mieć pewność, ile SSR wciąż dla nas robi i czy warto w nie inwestować. Zwracając uwagę na nowoczesne przeglądarki internetowe oraz technologie, uzasadnione jest kwestionowanie znaczenia i kosztów generowanych przez SSR. W szczególności, gdy coraz bardziej oczywiste staje się, że wyszukiwarki potrafią indeksować dynamiczne witryny oraz stale podnosić ich skuteczność.

Jakie argumenty wśród firm przemawiają za wdrożeniem SSR?

• Należy wdrożyć SSR, ponieważ działał on wcześniej i nadal działa, tak jak powinien. Nie chcemy ryzykować niepowodzenia naszych celów biznesowych, podczas gdy programiści czekają na rozwój historii SSR i CSR w nadchodzących latach.

• Inne współczesne i duże firmy technologiczne wciąż inwestują w SSR i to nie tylko z powodu SEO.

• SSR wciąż jest potrzebny podczas obsługi metadanych obiektów multimedialnych, ponieważ boty SEM nadal nie obsługują JS.

• W przypadku agencji – brak jasnej strategii SEO, opierającej się na SSR utrudnia naszą zdolność do budowania zaufania wśród naszych klientów/handlowców i większego inwestowania w PWA.

• Nie istnieją wystarczające dowody, że rezygnacja lub minimalne wykorzystanie SSR faktycznie nie ma znaczącego wpływu na SEO.

Jakie argumenty wśród firm przekonują do niewdrażania SSR?

• Liderzy rozwoju sieci często zniechęcają do SSR, ponieważ słabe wdrożenia mogą obniżyć wydajność i ranking wyszukiwań. Szczególnie w PWA interfejs użytkownika powinien zostać załadowany tak wcześnie, jak to możliwe. SSR wykonuje wiele wstępnych obliczeń, których klient CSR może w ogóle nie wykorzystać.

• Istnieje ryzyko związane z zablokowaniem platformy lub powieleniem jej kodu. Najważniejsze wrażenia związane z korzystaniem z e-commerce PWA leżą po stronie klienta. Jako dynamiczna aplikacja JavaScript działająca w natywnym stylu, ale wieloplatformowa SSR wymaga implementacji tego doświadczenia w dwóch różnych miejscach – na serwerze i CSR, a niestety jego logiki nie można wykorzystać ponownie. Rozwiązaniem tego problemu jest użycie serwera, który może renderować HTML generowany przez interfejs użytkownika. Dobrym serwerem do tego jest NodeJS, ponieważ może on w bezpośredni sposób uruchomić kod interfejsu użytkownika JavaScript i generować odpowiedzi HTML. Niestety blokuje to programistom konkretną technologię całego backendu.

• SSR zwiększa całkowity koszt posiadania strony ze względu na dodatkowe wymagania techniczne i dalsze kroki w rozwoju oraz potrzebie ciągłej integracji. Mimo że jest to łatwiejsze niż kiedyś, jest to również dodatkowa praca, która polega na pisaniu kodu, działającego w dwóch odmiennych środowiskach.

• Koszty na rzecz SSR są trudne do uzasadnienia, ponieważ wyszukiwarki stają się coraz lepsze w indeksowaniu dynamicznych witryn, które są najważniejsze w świecie online.

Jakie rozwiązania SSR można użyć w PWA Studio?

Mimo że dziś istnieje mnóstwo rozwiązań i obszarów do ulepszania, PWA Studio wciąż pozwala na obsługę SSR. Dlaczego tak się dzieje? Poznaj podsumowanie obecnych opcji implementacji SSR w PWA Studio, do których doszli członkowie PWA Studio Community.

1. UPWARD – zapewnia możliwość prostego renderowania SSR danych i metadanych strony. Służy to prostemu przypadkowi użycia (simple use case), który zwolennicy PWA uznają za najlepszą praktykę. W przypadku bardziej złożonych wymagać (np. renderowanie aplikacji React na całą stronę) istnieją inne rozwiązania, które z pewnością ułatwią pracę.
2. Wstępne renderowanie za pomocą headless browser crawler przeglądarki – Jordan Eisenburger (Experius) poleca rozwiązanie Renderton, który jest nieinwazyjny w procesie tworzenia. Jednak mimo to początkujący użytkownicy mogą mieć trudności z jego konfiguracją. Jest narzędziem używanym na stronie Eleganza i wkrótce zostanie otwarte jako SEOSnap.
3. Shane Osbourne (JH) rekomenduje wcześniejsze zakończenie aplikacji React za pomocą ReactDOMServer, ponieważ to dobrze znane i często wykorzystywane podejście. Jest nie tylko wykonalne, ale także wydajne i szybkie. Wymaga jednak produkcyjnego serwera internetowego NodeJS oraz innych wymagań narzucanych przez Magento 2.
4. Niklas Wolf (Mothership) zaleca kierowanie botów wyszukiwarek do usług takich jak Prerender.io, aby obsłużyć wstępnie przygotowane strony HTML. To podejście podobne do wstępnego renderowania używanego przez Experiusa, za wyjątkiem tego, że korzysta z prerendera SaaS, a nie rendera standardowego.

Jak wygląda przyszłość PWA Studio i SSR?

Twórcy PWA Studio są otwarci na potrzeby swoich użytkowników, dlatego zrozumieli, że minimalne rozwiązania SSR nie zapewniają wystarczającej ilości możliwości na rozpoczęcie wdrażania nowych sklepów. Są jednak pewni, że w przyszłości SSR będzie miało mniejsze znaczenie w internecie. Mimo to dzisiaj chcą zapewnić odbiorcom jak największy szereg możliwości.

Nadzieją dla wszystkich jest to, że PWA Studio oferuje możliwość prostego SSR, tym samym otwierając reguły renderowania po stronie serwera, będące częścią nowej rozszerzalności. Twórcy chcą, aby ekosystem rozszerzeń PWA stale się rozwijał i zawierał opcje renderowania po stronie serwera.

Należy pamiętać, że Magento mocno opiera się na rozszerzalności. Jednak nadal do platformy dostarcza się nowe narzędzia i zasoby, aby jeszcze bardziej ułatwić pracę programistów i związane z nią koszty. Stale więc poszukiwane są sposoby na poprawę historii SSR dla sprzedawców online i ich partnerów. Wśród nich umieszczenie React SSR w centrum, ustawienie Rendertron jako preferowanego rozwiązania, zwiększenie zdolności UPRARD SSR, a być może nawet całkowite wycofanie UPWARD. Wszystkie zmiany zachodzą w porozumieniu ze społecznością, aby dostarczyć jak najlepsze, skalowalne rozwiązania, które zapewnią najbardziej efektywne w swojej klasie SEO każdej witryny sklepowej PWA Studio. To dobra nowina dla wszystkich, którzy korzystają z tego rozwiązania!