Why is SSG page rendered twice with different props (client/server)? Behaviour is confusing

[Vadorequest]

I don't understand the workflow of a static page rendering when using SSG, using v9.3.6.

1. When I first load the page (page refresh), here is what I get:

Server console:

Home props {
  url: {
    query: [Getter],
    pathname: [Getter],
    asPath: [Getter],
    back: [Function: back],
    push: [Function: push],
    pushTo: [Function: pushTo],
    replace: [Function: replace],
    replaceTo: [Function: replaceTo]
  }
}
getStaticProps { params: { lang: 'fr' } }
Home props { lang: 'fr', isStaticRendering: true }

Browser console:

Home props {lang: "fr", isStaticRendering: true}

2. When I click on a link, I get redirected to /fr/terms, here is what I get:

Server console:

[ event ] build page: /[lang]/terms
[ wait ]  compiling ...
[ info ]  bundled successfully, waiting for typecheck results...
[ ready ] compiled successfully - ready on http://localhost:8888
(node:67497) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 uncaughtException listeners added to [process]. Use emitter.setMaxListeners() to increase limit
Terms props {
  url: {
    query: [Getter],
    pathname: [Getter],
    asPath: [Getter],
    back: [Function: back],
    push: [Function: push],
    pushTo: [Function: pushTo],
    replace: [Function: replace],
    replaceTo: [Function: replaceTo]
  }
}
getStaticProps { params: { lang: 'fr' } }
Terms props { lang: 'fr', isStaticRendering: true }

Browser console:

Terms props {lang: "fr", isStaticRendering: true}

---

Source code of the Terms page (Home page is similar):

/** @jsx jsx */
import { jsx } from '@emotion/core';
import { createLogger } from '@unly/utils-simple-logger';
import { NextPage, GetStaticProps, GetStaticPaths } from 'next';
// eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
import React from 'react';
import { PageProps } from '../../types/PageProps';
import Link from 'next/link';

const fileLabel = 'pages/terms';
const logger = createLogger({ // eslint-disable-line no-unused-vars,@typescript-eslint/no-unused-vars
  label: fileLabel,
});

const Terms: NextPage<PageProps> = (props: PageProps): JSX.Element => {

  console.log('Terms props', props);

  return (
    <div>
      <Link href={'/fr'} passHref>
        <a>Index</a>
      </Link>
    </div>
  );
};

export const getStaticProps: GetStaticProps<any, any> = async (props) => {
  console.log('getStaticProps', props);
  return {
    props: {
      lang: props?.params?.lang,
      isStaticRendering: true,
    },
  };
};

export const getStaticPaths: GetStaticPaths = async () => {
  return {
    paths: [{ params: { lang: 'fr' } }, { params: { lang: 'en' } }],
    fallback: false,
  };
};

export default Terms;

---

I don't understand the following:

1. Why does it log different props on Home props/Terms props, the first time we seem to get a Router instance, but the second time we get the props returned by getStaticProps. This is highly confusing about what I should actually rely on to build my app.
2. Why do I get logs on the server side related to page navigation? I thought static pages are only loaded on the browser... I understand the SSG builds happen on the server, but why do I get a Router instance logged on the server? It's also very confusing (it may be related to the localhost env, but still confusing).
3. Why are there 2 renders (server side)? Maybe one is the generation of the static page (regeneration), and the other is the actual page load.
4. The order is confusing, one might expect the first render to be the static generation using getStaticProps, but it rather seems to be the other way around. Probably related to iSSG (see RFC: Incremental Static Regeneration #11552), because the goal would be to render immediately and then regenerate the static content, it makes sense in such context (but unfriendly to developers, and should be thoroughly documented)
5. There doesn't seem to be any CSR anymore when navigating links, but only full-page refresh (see <Link> with SSG makes a full page refresh #12344)

[fabb]

AFAIK SSG works different in dev mode and prod mode.

[Vadorequest]

I deployed online (Zeit) and here it what's generated:

Source:

Output:

I don't see any log on Zeit regarding the index or terms pages, it's all frontend. This is what's expected (static pages)

I don't quite understand why the build /en/terms page is marked as a Serverless Function, but I guess that's an error on Zeit?

[Vadorequest]

I tried something else, basically throwing an error if lang isn't truthy.

const Terms: NextPage<PageProps> = (props: Props): JSX.Element => {
  const { lang } = props;
  console.log('Terms props', props);
  console.log('lang', lang);

  if(!lang){
    throw new Error('NO LANG')
  }
  return (
    <div>
      <h1>{lang}</h1>

      <Link
        href={'/[lang]'}
        as={'/fr'}
        passHref
      >
        <a>Index</a>
      </Link>
    </div>
  );
};

Server logs:

[ ready ] compiled successfully - ready on http://localhost:8888
Terms props {
  url: {
    query: [Getter],
    pathname: [Getter],
    asPath: [Getter],
    back: [Function: back],
    push: [Function: push],
    pushTo: [Function: pushTo],
    replace: [Function: replace],
    replaceTo: [Function: replaceTo]
  }
}
lang undefined
GraphQL error occurred [getDataFromTree] Error: NO LANG
    at Terms (/Users/vadorequest/dev/next-right-now/.next/server/static/development/pages/[lang]/terms.js:2106:11)
    at processChild (/Users/vadorequest/dev/next-right-now/node_modules/react-dom/cjs/react-dom-server.node.development.js:3043:14)
    at resolve (/Users/vadorequest/dev/next-right-now/node_modules/react-dom/cjs/react-dom-server.node.development.js:2960:5)
    at ReactDOMServerRenderer.render (/Users/vadorequest/dev/next-right-now/node_modules/react-dom/cjs/react-dom-server.node.development.js:3435:22)
    at ReactDOMServerRenderer.read (/Users/vadorequest/dev/next-right-now/node_modules/react-dom/cjs/react-dom-server.node.development.js:3373:29)
    at renderToStaticMarkup (/Users/vadorequest/dev/next-right-now/node_modules/react-dom/cjs/react-dom-server.node.development.js:4004:27)
    at process (/Users/vadorequest/dev/next-right-now/node_modules/@apollo/react-ssr/lib/react-ssr.cjs.js:38:16)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async Function.WithApollo.getInitialProps (/Users/vadorequest/dev/next-right-now/node_modules/next-with-apollo/lib/withApollo.js:53:29)
    at async Object.loadGetInitialProps (/Users/vadorequest/dev/next-right-now/node_modules/next/dist/next-server/lib/utils.js:59:19)
    at async Object.renderToHTML (/Users/vadorequest/dev/next-right-now/node_modules/next/dist/next-server/server/render.js:262:17)
    at async /Users/vadorequest/dev/next-right-now/node_modules/next/dist/next-server/server/next-server.js:711:32
    at async __wrapper (/Users/vadorequest/dev/next-right-now/node_modules/next/dist/lib/coalesced-function.js:1:330)
    at async DevServer.renderToHTMLWithComponents (/Users/vadorequest/dev/next-right-now/node_modules/next/dist/next-server/server/next-server.js:774:73)
    at async DevServer.renderToHTML (/Users/vadorequest/dev/next-right-now/node_modules/next/dist/next-server/server/next-server.js:815:36)
    at async DevServer.renderToHTML (/Users/vadorequest/dev/next-right-now/node_modules/next/dist/server/next-dev-server.js:19:539)
getStaticProps { params: { lang: 'fr' } }
Terms props { lang: 'fr', isStaticRendering: true }
lang fr

Browser logs don't show any error:

Terms props {lang: "fr", isStaticRendering: true}
lang fr

So, I can confirm that what happens on the server is just noise, it doesn't actually affect the app in a visible way. But it's a confusing noise and that'd be better to avoid it.