Scribd Logo
Upload

Welcome to Scribd!

  • 105 views

    The Challenges and Pitfalls of Server-Side Rendering

    Uploaded by

    Edoardo Zappa Bianchi
    Dan Shappir discusses the challenges and pitfalls of server-side rendering (SSR). SSR can provide significant improvements to time to visible by rendering HTML on the server, but introduces technical challenges including not having access to the DOM, sharing the same JS context between server and client, and potential memory leaks from long-lived server processes. Other challenges include diverging HTML between server and client renders, and SSR not improving time to interactive. To overcome these challenges requires tools like tests that do not rely on the DOM, avoiding mutable globals, and Node.js libraries to detect memory leaks.

    Copyright:

    © All Rights Reserved
    Download as ODP, PDF, TXT or read online from Scribd

    The Challenges and Pitfalls of Server-Side Rendering

    Uploaded by

    Edoardo Zappa Bianchi
    105 views34 pages
    Dan Shappir discusses the challenges and pitfalls of server-side rendering (SSR). SSR can provide significant improvements to time to visible by rendering HTML on the server, but introduces technical challenges including not having access to the DOM, sharing the same JS context between server and client, and potential memory leaks from long-lived server processes. Other challenges include diverging HTML between server and client renders, and SSR not improving time to interactive. To overcome these challenges requires tools like tests that do not rely on the DOM, avoiding mutable globals, and Node.js libraries to detect memory leaks.

    Original Description:

    The Challenges and Pitfalls of Server-Side Rendering

    Copyright

    © © All Rights Reserved

    Available Formats

    ODP, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Dan Shappir discusses the challenges and pitfalls of server-side rendering (SSR). SSR can provide significant improvements to time to visible by rendering HTML on the server, but introduces technical challenges including not having access to the DOM, sharing the same JS context between server and client, and potential memory leaks from long-lived server processes. Other challenges include diverging HTML between server and client renders, and SSR not improving time to interactive. To overcome these challenges requires tools like tests that do not rely on the DOM, avoiding mutable globals, and Node.js libraries to detect memory leaks.

    Copyright:

    © All Rights Reserved
    Download as ODP, PDF, TXT or read online from Scribd
    Download as odp, pdf, or txt
    105 views34 pages

    The Challenges and Pitfalls of Server-Side Rendering

    Uploaded by

    Edoardo Zappa Bianchi
    Dan Shappir discusses the challenges and pitfalls of server-side rendering (SSR). SSR can provide significant improvements to time to visible by rendering HTML on the server, but introduces technical challenges including not having access to the DOM, sharing the same JS context between server and client, and potential memory leaks from long-lived server processes. Other challenges include diverging HTML between server and client renders, and SSR not improving time to interactive. To overcome these challenges requires tools like tests that do not rely on the DOM, avoiding mutable globals, and Node.js libraries to detect memory leaks.

    Copyright:

    © All Rights Reserved
    Download as ODP, PDF, TXT or read online from Scribd
    Download as odp, pdf, or txt
    You are on page 1of 34

    The Challenges and Pitfalls of

    Server-Side Rendering
    Dan Shappir

    dansh@wix.com twitter@DanShappir www.wix.engineering


    Hi. I’m Dan
    Performance Tech Lead at Wix R&D
    Making over 100 Million sites load and execute faster

    dansh@wix.com twitter@DanShappir
    www.wix.engineering
    What Goes
    Around Comes
    Around

    Rendering Client- Server-


    on the Side Side
    Server Rendering Rendering
    (CSR) (SSR)
    SSR

    Isomorphic JavaScript

    SERVER CLIENT
    SSR

    Render HTML on Server

    HTML

    SERVER CLIENT
    SSR

    Hydrated by Client

    HTML

    SERVER CLIENT
    SSR

    Faster Time To Visible


    ✔ fewer roundtrips
    ✔ fast servers
    ✔ hot servers
    ✔ fast data requests
    ✔ streamed rendering
    ✔ server & client in
    parallel

    SERVER CLIENT
    SSR

    Time To Visible At Wix

    Up to 60% improvement !!!


    SSR

    Framework support
    At Wix we
    failed twice
    before
    successfully
    implementing
    SSR.
    Technic Inheren
    al t
    challeng challeng
    es es

    Accidental Complexity and Essential Complexity


    Technic Inheren
    al t
    challeng challeng
    es es
    Challenge
    #1

    window.
    ✘ (jQuery
    )

    No DOM
    Challenge
    #1
    Eliminate what you
    can.
    window.
    (jQuery
    )

    Safeguard the rest: typeof window !==


    "undefined"
    Challenge
    #2

    The same JS context


    Challenge
    #2

    global var

    ✘
    Challenge
    #2
    Don’t allow mutable
    globals.
    global var

    You can use WeakMaps keyed on session ID.


    Challenge
    #3

    10 KBPS

    Memory
    leak
    Challenge
    #3

    10 KBPS

    5 min session →

    3 MB
    Challenge
    #3

    10 KBPS

    24 hours uptime
    5 min session →
    →
    844 MB 3 MB
    Tools for the Job

    SSR’s
    Technical
    Challenges
    Tests, tests, and more
    tests

    ✔ No DOM
    ✔ Globals shared
    ✔ Memory leaks
    ESLint Rules

    ✔ No DOM
    ✔ Globals shared
    Memory leaks
    NodeJS tools

    No DOM
    Globals shared
    ✔ Memory leaks
    Technic Inheren
    al t
    challeng challeng
    es es
    Challenge
    #1

    With CSR
    Time To Visible and Time To
    Interactive are one and the same.
    Challenge
    #1

    With SSR
    They become distinct:
    ● Time To Visible is improved
    ● Time To Interactive at best remains the
    same
    Challenge
    #1
    Mitigate using Progressive
    Hydration
    e
    Pag
    ReactDOM.render(
    element1,
    container1
    );
    Fold

    ReactDOM.render(
    element2,
    container2
    );
    Challenge
    #2

    Diverges

    HTML≠ HTML
    Challenge
    #2
    Unjustified diverges

    HTML
    HTML

    COMPARISON TEST
    Challenge
    #2
    Justified diverges

    Placeholder
    HTML
    So.
    SSR can provide very significant
    performance boost for dynamic
    sites,
    specifically Time To Visible.
    It’s not trivial
    - Test, test, and test again
    - Allocate time and resources
    - Time to Visible < Time to
    Interactive
    Thank You

    dansh@wix.com twitter@DanShappir
    www.wix.engineering

    You might also like