gatsby.js: How does content preload work?

Question

I do have a question related to Gatsby.js or let's say React based static blog systems.

When looking at webpages like Stripe, Google Cloud etc., the page seems to load on click. It takes a few milliseconds to load content until it's displayed. With Gatsby.js, as I see the website, content is instantly visible.

Question: Does that mean that Gatsby.js preloads all page contents into the DOM? I have a page with about 10 static pages and 100 blog posts with 5-10 images each. Therefore, I am unsure whether the speed of the system only makes sense for a certain page and content size? Is the tradeoff: Initial page load of the full page (Megabytes?) vs. page load per click (Kilobytes?)?

An easy answer would be appreciated, thanks!

Answer 1

Gatsby renders pages on the client. So when it prefetches other pages, it doesn't preload the HTML & JS & images, etc. for the pages but instead, it prefetches just the data (and sometimes code) necessary for these pages. This doesn't include the images for these pages or other resources that might be needed e.g.. font files.

Which means Gatsby's prefetching is very lightweight and can be used without problem for your type of sites.

It's important to remember as well that Gatsby don't prefetch the entire site. It only prefetchs the pages linked to from the page the user is on. So even on very large sites, Gatsby doesn't prefetch that much.