How does server side rendering really work in Next.js?

Question

I have a question about Server Side Rendering specifically on Next.js.

When I render server side, is this the correct 'execution path'?

1. Client hits server requesting webpage server serves up HTML only version of my app (without data or JavaScript)
2. Once client's browser has something to look at, JavaScript is downloaded in the background for the interactivity
3. Once data is finished fetching, data is sent to the client as a Prop.

I know in Server side rendered pages, the server is responsible for fetching the data.

However: Does the server fetch the data, put it in the app where necessary and then server the page? or Does it first server the page, then fetch the data and then send the data over?

Any help or explanation would be appreciated.

Answer 1

Does the server fetch the data, put it in the app where necessary and then server the page or does it first server the page, then fetch the data and then send the data over?

It depends. If your data is retrieved in getServerSideProps, then this function is run on the server when the page is initially is requested, and is used to render the React component on the server and generate the HTML that is sent to the browser. If the user then navigates to a different page, all the components to display the page are already available in the browser, then only getServerSideProps is run on the server and the data is sent to the client, the client then renders the React components directly into the DOM with this data.

If your data is retrieved via an /api/ route, then it is always fetched on the client side and never used for server-side rendering.

How does Server Side Rendering Really work?

function App() {
  return <div>
    <Headline />
  </div>;
}

function Headline() {
  return <h1>some headline</h1>;
}

When React renders it basically recursively calls all Components (aka. functions wich return objects) till it arrives at a tree which just contain objects representing HTML elements, which briefly looks like this:

{
  key: "div",
  children: [
    {
       key: "h1",
       children: ["some headline"]
    }
  ]
}

(you can view that tree by just logging what calling a component returns, i.e. console.log(App()))

Now with that tree, one can generate a string of HTML, namely:

"<div><h1>some headline</h1></div>

That's what NextJS will do with server-side rendering. That string will then be sent to the browser. Additionally it will send all the components (aka. functions) as JavaScript code to the browser (except for serverside functions such as getServerSideProps). Then the components (aka functions) will be called again in the browser, producing the same tree of nodes that was also used to generate the HTML string (but now also effects are triggered and state is created). Now this tree of nodes is taken and is used to modify the DOM (the representation of the HTML page in the browser):

const parent = document.createElement("div");
const child = document.createElement("h1");
child.textContent = "some headline";
parent.appendChild(child);

Now with hydration which NextJS uses, React will try to reuse the existing DOM structure instead of creating a new one. When a component rerenders (i.e. a state is updated, a button is clicked etc.), it will only take the updated tree which was returned by rerendering the component, and use that replace the corresponding nodes in the DOM.