How does Next.js Static Site Generation work with React Single Page Application?

I am trying to understand how SSG works on SPA under Next.js.

For Server Side Rendering, my understanding is that as followed

1. User request a page.
2. Server renders the initial page, sends over the whole app as SPA without rendering the other pages.
3. User instantly can see the initial page without browser rendering.
4. If user clicks on other pages, client side rendering takes place. The data can come from client side data fetching logic, or via the simpler mechanism of getServerSideProps.

How would it work for SSG?

Would it be scenario A:

1. Server renders all static pages in build time.
2. User requests an initial page that could be rendered statically.
3. Server sends the initial static pages, plus a SPA to render other pages.

Under this scenario, if the user navigates to another page that could be rendered statically, would it ask the server to send over the entire static page? Or would it ask the server to send over the props generated by getStaticProps at build time?

Or would it be scenario B:

1. Server renders all static pages at build time.
2. User request an initial page.
3. Server sends over all static pages, plus any SPA code to render other non static pages?

Under this scenario, build time is huge. However, for large sites with tons of static pages (such as a blog with lots of posts or a site with many subsites in different languages and locale and countries), wouldn't this be too large to send to client at once?