Where Next.js takes app code when client-side routing?

Question

Let's say that I click a Link and forward myself to /about route. This /about route has only getServerSideProps and some simple JSX defined in it:

// /about page
import Head from 'next/head'
import Users from '../components/Users'

export default function About() {
  
  return (
    <div>
      <Head>
        <title>About Page</title>
        <link rel="icon" href="favicon.ico" />
      </Head>

      <Users /> // Some React Component that happens to be on this page

    </div>
  )
}

export async getServerSideProps = /* code that calls some API */

From the docs:

When you request this page on client-side page transitions through next/link (documentation) or next/router (documentation), Next.js sends an API request to the server, which runs getServerSideProps. It’ll return JSON that contains the result of running getServerSideProps

Which means that when I click the Link that leads to /about page, I will only get JSON with data for my page. But how do I get an actual code? I get the data, but how does the client get this part of my page:

    <div>
      <Head>
        <title>About Page</title>
        <link rel="icon" href="favicon.ico" />
      </Head>

      <Users /> // Some React Component that happens to be on this page

    </div>

This JSX code is needed in order to render a page. From the docs I infer that it is not transfered to the client when using client-side routing. Then, where does it come from?

felixmosh felixmosh · Accepted Answer · 2020-08-16T07:34:16

The doc part that you've added is correct only for the side of handling getServerProps.

The client side when navigating to other page, firstly loads the page js file, then it realizes that it has getServerProps, invoking it, when the data comes from the server, renders the page.

Where Next.js takes app code when client-side routing?

1 Answers