Konrad Kowalski (rootsher)Principal Platform & Reliability Architect000001001101011110101111000000010010100000011010

Frontend

wpisy (44)

  1. 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.

  2. Sposoby komunikacji z backendem: od formularza HTML do GraphQL1/6

    HTML Forms: komunikacja z backendem bez JavaScriptu

    Formularz nie jest helperem do API. Przeglądarka sama serializuje kontrolki, buduje request i traktuje odpowiedź jako nowy dokument.

  3. seria · 6 części

    Sposoby komunikacji z backendem: od formularza HTML do GraphQL

    Warstwy komunikacji frontendu z backendem od dołu do góry: formularz, XHR i fetch inicjują request, HTTP go przenosi, a REST, RPC i GraphQL modelują operacje i…

  4. 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.

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

    Revalidation i ISR: statyczny output, który może się zestarzeć

    ISR to nie osobna kategoria renderowania, tylko cache z kontrolowaną niespójnością: precomputed HTML, expiration i regeneracja.

  6. 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.

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

    SSG: renderowanie zanim pojawi się użytkownik

    Build-time rendering zamienia koszt requestu na koszt builda. Płacimy raz, serwujemy tanio i zaczynamy mieć problem ze świeżością danych.

  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 renderowania4/17

    Koszt wysyłania aplikacji do browsera

    Transfer size to pierwszy koszt, nie jedyny. Liczy się praca, którą urządzenie musi wykonać, zanim aplikacja stanie się użyteczna.