Is there a standalone way of preventing the white flash of a full page load when you navigate to another URL in an SSR app? Or are they all tied to pretty big backend frameworks like RoR?
Sibling comments are saying browsers hold the old page until the new one is ready, but it's not true for me.
I've just watched a momentary blank page flash up consistently when navigating forward right here on HN, for example from the front page to a comments link.
It's HN, so I think we can rule out JavaScript page generation.
Fwiw, I'm using Firefox 100.0 on a Mac, and my network is high latency.
Related issue that used to be known by more web devs: FOUC (Flash of unstyled content, https://en.wikipedia.org/wiki/Flash_of_unstyled_content). There have been various techniques over the years to deal with FOUC, and it's not that straightfoward, for example waiting for custom fonts if those take a long time to load.
Navigated on a dark website in Safari, Firefox and Chrome and couldn’t reproduce the issue. When I click on a link, the browser loads the page and when it’s ready the displayed page switches to the newly loaded one without a white flash.
Should you encounter white flashes, try preloading likely next clicks (e.g. next page, or first search result, or where the mouse cursor hovers 200 ms over a link) with `<link rel="prefetch" href="theurl">`[1]. Make sure your HTTP response headers contain caching instructions, otherwise prefetched pages are requested immediately again by some browsers.
Another thought, haven’t verified: If CSS loading is deferred, content might be displayed unstyled on default white background for a brief moment. You could set the page background color as part of the HTML page in a `<style>` block.
You could use something like Hotwired Turbo. Personally I'm not a huge fan, but it easily turns "traditional" web apps into SPA-like experiences. Under the hood, it does full page requests, but then calculates a diff and only renders parts of the page that have changed.
