Double Buffering

[Arpita-Jaiswal]

Double Buffering

fastn uses the double buffering technique to display the final output in the browser after server-side rendering (SSR).

History

Earlier, fastn first do the SSR then while rendering to browser, fastn do hydration to map the dependencies/closures of mutables with DOM node and other mutables.

How hydration works

During SSR, a unique identifier (id) for the generated DOM is stored as the data-id attribute in the DOM:

<div data-id="20">Some data</div>

Hydration generates the same id and uses it to access the corresponding DOM element:

document.querySelector(`[data-id="20"]`);

Note: Hydration never creates a DOM instead it access the dom created by ssr and map the dependencies/closures of mutables with dom node and other mutables.

Issues with the Approach

fastn currently does not execute functions in JavaScript files, which prevents it from doing so during hydration. One possible approach is to store mutables/formulas and set their values after hydration, which would execute all dependencies and closures.

However, this could lead to slow rendering. Additionally, SSR does not always generate the expected HTML, potentially causing SEO-related issues.

Also hydration only works if the device matches the default value of ftd.device used during SSR. Any change in the device forces fastn to discard the HTML generated by SSR and then re-render the entire DOM also called single buffering.

Re-rendering is not particularly costly and ensures the correctness of DOM generation. Previously, fastn used a single buffering approach, discarding all DOM nodes generated by SSR and creating new ones. This could result in a flash or white screen during rendering.

An alternative approach could involve working in hydration mode but switching to re-render mode as soon as a JavaScript function is encountered.

Both of the above approaches present challenges in terms of code maintenance and complexity. Given that re-rendering is not overly expensive and guarantees correctness, fastn has opted for a re-rendering's optimized approach.

The Solution

fastn has adopted an optimized re-rendering method known as "double buffering". In this approach, fastn first creates a shadow DOM, classes, and other elements, and then replaces them with the DOM created during SSR.

Future Approaches, Corrections and Optimisations.

• External Function Execution in SSR Mode: To address the issue of generated HTML differing from expectations, fastn needs to execute JavaScript functions in SSR mode.
• Diffing and Injection: Double buffering discards the whole DOM nodes, classes etc generated by SSR mode and replaces it with new DOM nodes. fastn can do diffing and injection process.
• Hydrating and hash compare: During hydration, fastn can compare the hash of the DOM node created during SSR with the hash of the DOM node acquired during hydration and perform necessary injections.