Konrad Kowalski (rootsher)Principal Platform & Reliability Architect101101101111001101000101101010011100000000001001

SSR

wpisy (11)

  1. Frontend Rendering: od server-side pages do hybrydowego renderowania17/17

    Nowoczesny rendering to kompozycja

    Renderowanie przestało być jednym etapem. To rozmieszczenie pracy w czasie, przestrzeni i pomiędzy runtime'ami, a framework jest konsekwencją tych decyzji.

  2. Frontend Rendering: od server-side pages do hybrydowego renderowania16/17

    Server Components: nie cały kod UI musi trafić do browsera

    Granica renderowania przestaje przebiegać przez stronę, a zaczyna przez graf modułów. Część komponentów nigdy nie ma implementacji po stronie klienta.

  3. Frontend Rendering: od server-side pages do hybrydowego renderowania15/17

    Resumability: zamiast hydratować, wznów wykonanie

    Serwer zapisuje dość informacji, żeby klient nie musiał odtwarzać drzewa komponentów. Kod ładuje się dlatego, że wykonanie stało się potrzebne.

  4. Frontend Rendering: od server-side pages do hybrydowego renderowania12/17

    Edge rendering: renderowanie bliżej użytkownika

    Przesunięcie compute bliżej użytkownika ma sens tylko wtedy, gdy dane idą razem z nim. Inaczej skracamy jeden hop i wydłużamy resztę.

  5. Frontend Rendering: od server-side pages do hybrydowego renderowania11/17

    Partial Prerendering: jedna strona, kilka momentów renderowania

    Jednostką decyzji przestaje być route. Statyczny shell powstaje wcześniej, dynamiczne fragmenty dochodzą przy requeście albo przez stream.

  6. Frontend Rendering: od server-side pages do hybrydowego renderowania10/17

    Streaming SSR: nie czekaj na cały render

    Odpowiedź przestaje być atomowa. Serwer wysyła gotowe fragmenty, a najwolniejsza zależność nie blokuje już całego dokumentu.

  7. Frontend Rendering: od server-side pages do hybrydowego renderowania8/17

    Deferred generation: nie generuj tego, czego nikt nie potrzebuje

    Request przestaje być momentem renderowania, a staje się triggerem materializacji artefaktu. Pierwszy użytkownik płaci, kolejni dostają plik.

  8. Frontend Rendering: od server-side pages do hybrydowego renderowania6/17

    Hydration: jak połączyć HTML z działającą aplikacją

    Serwer wysyła wynik renderowania, nie aplikację. Browser musi odtworzyć drzewo komponentów i podpiąć je do istniejącego DOM-u.

  9. Frontend Rendering: od server-side pages do hybrydowego renderowania5/17

    Powrót SSR: serwer znowu renderuje HTML

    Serwer renderuje pierwszy widok nie po to, żeby frontend zniknął, tylko po to, żeby treść powstała wcześniej. Reszta kosztu zostaje na kliencie.

  10. Frontend Rendering: od server-side pages do hybrydowego renderowania1/17

    Server-rendered web: zanim frontend stał się aplikacją

    Serwer składał pełny dokument dla każdego requestu, a browser był rendererem dokumentów. Model prosty, dopóki jednostką aktualizacji mógł być cały dokument.