About the intergration of MaterialUI and Nextjs.

[Tokenyet]

Recently, I made a project that used MaterialUI and Nextjs, and based on nextjs-with-typescript. I tried to figure out the code in _document.tsx, but got confused with the comments.

  // Resolution order
  //
  // On the server:
  // 1. app.getInitialProps
  // 2. page.getInitialProps
  // 3. document.getInitialProps
  // 4. app.render
  // 5. page.render
  // 6. document.render
  //
  // On the server with error:
  // 1. document.getInitialProps
  // 2. app.render
  // 3. page.render
  // 4. document.render
  //
  // On the client
  // 1. app.getInitialProps
  // 2. page.getInitialProps
  // 3. app.render
  // 4. page.render

I think If there is no comment, I might just pass this part, but this comment seems important.

Could anyone explain the comments? Why do we need to know these secret orders for different rendering?

Edit:
I guess It might relate to the working flow of Nextjs, the only explaination I found is Borek Bernard's Comment. Can't find any article or flow-chart to explain this in Nextjs docs. Did I miss something?

[lfades]

That comment could be useful, maybe? I'm not sure either and I'm part of the team 🤷‍♂️

Real talk though that comment is right but you don't have to understand it, or worry about it, or even read it (that comment being there confuses more than it helps), it won't make any noticeable difference and you'll keep building your app in the same way as before. We focus on UX so you can focus on the app and ignore those details.

If you want to learn more about pages/_document check out our Custom Document documentation. It's technical and also an advanced feature that we don't expect you to read before understanding the basics of Next.js 👌