1. Wiedza
  2. Pojęcia
  3. SSR (Server-Side Rendering) a SEO

Artykuł pomocniczy · pojęcie · Pojęcia · Techniczne

SSR (Server-Side Rendering) a SEO

także: server rendering · SSR · backend rendering · Server-Side Rendering (SSR) · SSR (Server-Side Rendering) a SEO

Metoda renderowania, w której HTML jest generowany na serwerze przed wysłaniem do przeglądarki, zapewniając pełną zawartość botom wyszukiwarki bez konieczności wykonywania JavaScript.

Piec garncarski z rubinowym żarem i gotowym naczyniem przed nim – metafora SSR, czyli renderowania strony po stronie serwera przed wysłaniem.

Definicja

SSR generuje kompletny HTML po stronie serwera przed dostarczeniem do klienta, w przeciwieństwie do CSR, które zależy od wykonania JavaScript po stronie przeglądarki.

Rozszerzona definicja

SSR (Server-Side Rendering) to metoda, w której logika aplikacji uruchamiana jest po stronie serwera, a klient otrzymuje gotowy znacznik HTML w odpowiedzi na żądanie dokumentu, zamiast kodu JavaScript wymagającego dalszego przetwarzania w przeglądarce12. Dzięki temu cała treść strony jest obecna bezpośrednio w odpowiedzi HTTP, co — jak wskazuje dokumentacja Google — sprawia, że crawlery mogą ją odczytać bez konieczności wykonywania JavaScriptu3. Podejście to różni się od renderowania po stronie klienta (client-side rendering, CSR), w którym przeglądarka musi najpierw pobrać i uruchomić skrypty, zanim pojawi się jakakolwiek treść4.

Jak to działa

Serwer przetwarza żądanie i odsyła kompletny dokument HTML zawierający całą treść strony; przeglądarka (lub bot) nie musi inicjować dodatkowych żądań JavaScript, by zobaczyć zawartość2. Z perspektywy indeksowania Google przetwarza aplikacje JavaScript w trzech etapach: crawling, rendering i indeksowanie — przy czym Googlebot kolejkuje strony ze statusem HTTP 200 do renderowania, uruchamia JavaScript w headless Chromium, a następnie używa wyrenderowanego HTML do indeksowania56.

Implementacje SSR — jak opisuje Vercel na przykładzie Next.js — generują HTML na serwerze przy każdym żądaniu, co zapewnia aktualność danych, jednak kosztem wolniejszego TTFB (Time to First Byte) w porównaniu ze statycznym generowaniem stron7. Z punktu widzenia wskaźnika LCP (Largest Contentful Paint) zasoby obrazów są wykrywalne bezpośrednio ze źródła HTML, a treść strony nie musi czekać na zakończenie dodatkowych żądań JavaScript przed wyrenderowaniem2.

Dlaczego to ważne

Serwis icomseo.pl relacjonuje, że największe ryzyko dla widoczności organicznej pojawia się przy modelu CSR, natomiast SSR oraz dobrze skonfigurowane SSG mogą zapewnić pełny element HTML już w źródle strony89.

Google nie stosuje jednego sygnału doświadczenia strony; jego systemy rankingowe uwzględniają zestaw sygnałów zgodnych z ogólnym doświadczeniem użytkownika, więc dobre wyniki techniczne wynikające z SSR nie gwarantują same w sobie najwyższej pozycji w wynikach wyszukiwania10.

Przykłady

  • Klasyczne strony oraz strony renderowane po stronie serwera działają dobrze z modelem crawlowania opartym na parsowaniu HTML, ponieważ cała treść jest dostępna od razu w odpowiedzi HTTP3.
  • Next.js w implementacji SSR generuje HTML na serwerze przy każdym żądaniu, co — jak opisuje Vercel — skutkuje wolniejszym TTFB niż przy statycznym generowaniu, ale zapewnia zawsze aktualne dane7.
  • Serwis icomseo.pl relacjonuje, że w odpowiedzi na problemy SPA z pierwszym malowaniem i interakcją sięgnięto po SSR i hydratację, wstępne renderowanie oraz asynchroniczne ładowanie porcji interfejsu11.
  • Z punktu widzenia LCP zasoby obrazów w SSR są wykrywalne ze źródłowego HTML, a treść nie wymaga dodatkowych żądań JavaScript przed wyrenderowaniem2.

Częste błędy i mity

  • Mit: usunięcie tagu noindex po stronie klienta za pomocą JavaScript jest skuteczne dla SEO — w rzeczywistości strony zawierające tag noindex w początkowej odpowiedzi HTML nie są renderowane przez Google, a skrypt usuwający ten tag nie zostanie wykonany12.
  • Błąd: zakładanie, że poprawne działanie strony w przeglądarce oznacza automatycznie prawidłowe indeksowanie — serwis icomseo.pl relacjonuje, że brak problemów w przeglądarce nie gwarantuje poprawnego indeksowania strony8.
  • Błąd: stosowanie w SPA kodów HTTP 200 dla stron błędów — dokumentacja Google wskazuje, że może to prowadzić do indeksowania stron błędów i wyświetlania ich w wynikach wyszukiwania (soft 404)13.
  • Błąd: implementowanie routingu po stronie klienta z fragmentami URL zamiast History API — Google odkrywa linki wyłącznie jako elementy HTML z atrybutem href, dlatego dla aplikacji z routingiem po stronie klienta zalecane jest użycie History API14.

Powiązane hasła

Źródła i odwołania

  1. Rendering on the Web  |  Articles  |  web.dev

    web.dev ·

    Server-side rendering (SSR): Rendering an app on the server to send HTML, rather than JavaScript, to the client.

  2. Optimize Largest Contentful Paint  |  Articles  |  web.dev

    web.dev ·

    Server-side rendering (SSR) is the process of running your client-side application logic on the server and responding to HTML document requests with the full HTML markup. From the perspective of optimizing LCP, there are two primary advantage of SSR: - Your image resources will be discoverable from the HTML source (as discussed in step 1 earlier). - Your page content won't require additional JavaScript requests to finish before it can render.

  3. Understand JavaScript SEO Basics | Google Search Central | Documentation | Google for Developers

    developers.google.com ·

    Crawling a URL and parsing the HTML response works well for classical websites or server-side rendered pages where the HTML in the HTTP response contains all content.

  4. How Does Googlebot Render Web Pages? - Martin Splitt

    YouTube · · fragment od 8:40

    lly when you are entirely client-side rendering then you might basically have a Dom that has the body and maybe like one or two container elements and then it loads

  5. Understand JavaScript SEO Basics | Google Search Central | Documentation | Google for Developers

    developers.google.com ·

    Googlebot queues all pages with a 200 HTTP status code for rendering, unless a robots meta tag or header tells Google not to index the page. Once Google's resources allow, a headless Chromium renders the page and executes the JavaScript. Google also uses the rendered HTML to index the page.

  6. Understand JavaScript SEO Basics | Google Search Central | Documentation | Google for Developers

    developers.google.com ·

    Google processes JavaScript web apps in three main phases: 1. Crawling 2. Rendering 3. Indexing Google also uses the rendered HTML to index the page.

  7. Next.js: Server-side Rendering vs. Static Generation - Vercel

    vercel.com ·

    With Server-side Rendering (SSR), Next.js pre-renders the page into HTML on the server on every request. TTFB (Time to first byte) is slower, but your data is always up-to-date.

  8. SEO techniczne dla stron opartych na React, Angular i Vue

    icomseo.pl ·

    problemów w przeglądarce nie oznacza automatycznie prawidłowego indeksowania strony . Masz pytania? Porozmawiajmy o Twoim marketingu Skontaktuj się ze mną! Katarzyna Toboła CSR, SSR, SSG i hybrydy a widoczność organiczna Największe ryzyko dla widoczności organicznej pojawia się przy modelu client-side rendering, czyli CSR. W takim scenariuszu serwer

  9. Linki generowane przez JavaScript - czy Google je widzi?

    icomseo.pl ·

    pełny element HTML już w źródle strony albo jest dostępny po renderze bez potrzeby dodatkowej interakcji. To może dotyczyć zarówno wdrożeń statycznych, jak i rozwiązań opartych o server-side rendering , SSR czy dobrze skonfigurowane SSG. Sam JavaScript nie szkodzi SEO z definicji. Problemem jest raczej sposób implementacji. W praktyce Google może bez

  10. Understanding Google Page Experience | Google Search Central | Documentation | Google for Developers

    developers.google.com ·

    There is no single signal. Our core ranking systems look at a variety of signals that align with overall page experience.

  11. Jak wyglądała historia Web Performance Optimization?

    icomseo.pl ·

    opisanymi kompromisami. Architektury i ograniczanie punktów tarcia SPA zyskały popularność, ale przyniosły problem pierwszego malowania i interakcji. W odpowiedzi sięgnięto po SSR i hydratację, wstępne renderowanie, prekompilację szablonów, a także asynchroniczne ładowanie porcji UI. Zmiany w praktyce doprowadziły do silnej specjalizacji ról:

  12. Javascript SEO: How Google Crawls, Renders & Indexes JS - Vercel

    vercel.com ·

    Pages with `noindex` meta tags in the initial HTML response were not rendered, regardless of JS content. Client-side removal of `noindex` tags is not effective for SEO purposes; if a page contains the `noindex` tag in the initial HTML response, it won't be rendered, and the JavaScript that removes the tag won't be executed.

  13. Fix Search-Related JavaScript Problems | Google Search Central | Documentation | Google for Developers

    developers.google.com ·

    When a SPA is using client-side JavaScript to handle errors they often report a `200` HTTP status code instead of the appropriate status code. This can lead to error pages being indexed and possibly shown in search results.

  14. Understand JavaScript SEO Basics | Google Search Central | Documentation | Google for Developers

    developers.google.com ·

    Google can only discover your links if they are `<a> HTML elements with an href attribute`. For single-page applications with client-side routing, use the History API to implement routing between different views of your web app.

Każde zdanie powyżej odsyła do dosłownego cytatu ze źródła. Daty to daty publikacji lub pobrania źródła.

Źródła faktów

  • SEO/research/technical-seo/EVIDENCE-TS-R3-JS-Rendering-SEO.md