What is SSG (Nuxt.js, Gatsby) doing?

I have heard SSG generates static sites.
Then I thought SSG generates pure HTML that didn’t include React, but I think it may not be true now.

I think:

1. SSG generates a usual React App and rendered HTMLs for initialization.
   As it is a usual React App, if I click a button and trigger a side effect, client-side rendering will be triggered and the page will be updated.

2. When routing using router is triggered, next page’s js file and data obtained when build will be downloaded, and then client-side rendering will be triggered.
   The next page’s rendered HTML for initialization isn’t used here.

Is it true?

Answer

SSG (Static Site Generators) like Gatsby and Next, what they do is to create an output HTML based on a React environment code. This doesn’t mean that the site is “static” in terms of interaction. This means that the page you are requesting is already created so you are avoiding response and compilation time in the server.

Summarizing, given a “traditional”/”old-fashioned” PHP site. When you request the homepage, for example, your requests go to the server, the server transpiles the PHP into HTML (what the browser can parse and print) and then you get the page. That processing time is omitted in Gatsby/Next because the HTML is already created.

When you build your site in Gatsby/Next, the data is being retrieved from the sources (using GraphQL from markdowns, CMSs, APIs, JSONs, etc) and creates the output (that’s why there’s a /public folder generated). All your JavaScript and React is bundled into the output HTML so your website will be “dynamic” in terms of user interactivity, React is part of the ecosystem so your side-effects (triggered by useEffect hook for example) or your rehydration process (useState hook for example) will be part of your site.

Explained as:

When you navigate into another page, you are requesting a page that is already built and generated, that’s why is so blazingly fast.