What is this Next.js thing you may thought like me, when I saw my first Youtube Video about it. It is living on the server and then passed to the Client then? How do I even know when I have access to Server or Browser APIs like Document etc. Actually there are a few hints that help.

Index

• Next.js Lifecycle as an addition to the React Lifecycle
• Next.js Data Fetching on Client Side

Next.js Lifecycle as an addition to the React Lifecycle

UNSAFE_ComponentWillMount()

Next.js is using a modified React Lifecycle. So there is the componentWillMount() Method. This one is called the first time in the normal React Liefecycle inside of Next.js so it is when Prerendering (either on build time or on request time). After that it is called on Client Side while the React App is Hydrate (so Client Side Javascipt is used to insert Data into the generated HTML).

class Example {
...
UNSAFE_componentWillMount() {
   if (typeof window !== "undefined") {
      // This Code only runs on the Client-Side before Hydration
   } else {
      /* This Code only runs while Server Side Rendering happens 
         (on build or request time depends on Configuration of your Page) */
   }
      // Called in both Cases
...
}

ComponentDidMount() or useEffect(()=>{}, [])

Next there is componentDidMount(). This Method is called when the prerendered HTML is sent to the Client and Hydrated. So it is only called on the Client Side after Hydration.

class Example {
...
componentDidMount() {
   if (typeof window !== "undefined") {
      // This Code only runs on the Client-Side after Hydration
   } else {
      /* This Code is never executed 
        because the Method is never running on Server Side */
   }
      // This Code only runs on the Client-Side after Hydration as well
...
}

UNSAFE_ComponentWillUpdate() and ComponentDidUpdate()

When a State of a React Component changes, the UNSAFE_componentWillUpdate() and componentDidUpdate() are called. The first one is called while the Component Rehydrates and the second right after the Hydration on the Client Side.

UNSAFE_ComponentWillUnmount and ComponentDidUnmount()

When a Component is removed from the virtual DOM of React, these two Methods are called. But they are called only on Client-Side as well because the DOM only exists on Client SIde, so there is no reason for any prerendering here.

Next.js Data Fetching on Client Side

So now we know what NextJS adds to the original React Lifecycle but how can we inject any Data on Server Side so that they are inserted in this Cycle only there and only available there as well

GetServerSideProps()

Enables Server-side Rendering on the Page where it is used. So on every Request the Browser makes to the underlying Node.js of Next.js, the static HTML is generated again.

GetStaticProps()

Enables Static Side Generation on the Page where it is used. So with this technique when the App is build (so when you export a Production Bundle in Next.js) there is a one-time generation of HTML which is then sent on every Request to the Server.

Hope you liked the Post and learned something, please comment if I can do anything better and stay safe and keep on learning. Jannik