31. Czym jest renderowanie po stronie serwera w React i jak różni się od renderowania po stronie klienta?

Renderowanie po stronie serwera (SSR) w React

Renderowanie po stronie serwera (SSR) to technika używana do renderowania komponentów React na serwerze, zamiast w przeglądarce. Oznacza to, że serwer generuje pełne HTML dla strony i wysyła je do klienta, gdzie przeglądarka może je od razu wyświetlić. To różni się od renderowania po stronie klienta (CSR), gdzie przeglądarka pobiera minimalną stronę HTML, ładuje JavaScript, a następnie wykonuje go, aby zbudować zawartość po stronie klienta.

Zalety SSR

1. Lepsza wydajność: Początkowe ładowanie strony może być szybsze, ponieważ HTML jest w pełni renderowane na serwerze i wysyłane do klienta. Przeglądarki mogą wyświetlić zawartość bez czekania na wykonanie JavaScriptu.
2. Optymalizacja SEO: Wyszukiwarki mogą łatwo indeksować treści, ponieważ HTML jest w pełni renderowane.
3. Szybsze renderowanie początkowe: Użytkownicy szybciej widzą zawartość, co zapewnia lepsze doświadczenie użytkownika.

Wady SSR

1. Zwiększone obciążenie serwera: Ponieważ renderowanie odbywa się na serwerze, może to zwiększyć obciążenie przetwarzania serwera.
2. Złożoność: Implementacja SSR może być bardziej skomplikowana, wymagając dodatkowych narzędzi i konfiguracji.

Przykład kodu

Oto podstawowy przykład z użyciem Next.js, popularnego frameworka React wspierającego SSR:

import React from 'react';

function HomePage({ data }) {
  return (
    <div>
      <h1>Strona renderowana po stronie serwera</h1>
      <p>{data}</p>
    </div>
  );
}

export async function getServerSideProps() {
  // Pobierz dane z API lub bazy danych
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: { data },
  };
}

export default HomePage;

W tym przykładzie getServerSideProps jest używane do pobierania danych na serwerze przed renderowaniem strony, zapewniając, że dane są dostępne, gdy HTML jest wysyłane do klienta.

Renderowanie po stronie klienta (CSR)

W CSR początkowe HTML jest minimalne, często tylko szkielet, a JavaScript jest wykonywany w przeglądarce, aby zbudować stronę. Ta metoda może być korzystna dla aplikacji, które nie wymagają SEO lub mają złożone, dynamiczne interakcje.

Wnioski

Wybór między SSR a CSR zależy od specyficznych potrzeb Twojej aplikacji, takich jak wymagania dotyczące wydajności, potrzeby SEO i pojemność serwera. SSR może zapewniać szybsze początkowe ładowanie i lepsze SEO, podczas gdy CSR może oferować bardziej dynamiczne i interaktywne doświadczenia użytkownika.