0

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.

0

1 Answer 1

2

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.

2
  • So only upon initial request, the react component is rendered on the server meaning the actual component (JavaScript) including HTML is built on the server and is just sent to the client 'as-is'?. So you would not for example be able to use UseState on a page you server-side-render?
    – Time2learn
    Aug 28, 2022 at 21:33
  • 1
    You can, NextJS generates "clientside code" out of the code you write, which is then loaded in the browser and to "hydrate" the page, meaning the HTML version is somewhat replaced by a running interactive version with JS ... I'm gonna expand the answer, one sec Aug 28, 2022 at 21:36

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.