Code Elimination Tool in Next.js

When creating a page in Next.js, there are code that runs only in server. There are also code that is added to the bundle and returned to the browser.

If you are a beginner in Next.js, it might be difficult to separate one from another. Next.js has come up with a code elimination tool to give more clarity on this.

Let us checkout this application. For that, here is a Next.js Contact Us page code:

const clientSideFunction = () => {
  return "Apple";
};

const serverSideFunction = () => {
  return "Banana";
};

export async function getServerSideProps(context) {
  return {
    props: {
      fruit: serverSideFunction(),
    },
  };
}

const ContactUs = () => {
  return <h1>Contact us page {clientSideFunction()}</h1>;
};

export default ContactUs;

Here there are two util functions clientSideFunction() and serverSideFunction(). clientSideFunction() is called in the page component and serverSideFunction() is called only in getServerSideProps().

When Next.js renders the page, only below code is passed to client.

// This is the code that is bundled for the client-side:

const clientSideFunction = () => {
  return "Apple";
};
const ContactUs = () => {
  return <h1>Contact us page {clientSideFunction()}</h1>;
};
export var __N_SSP = true;
export default ContactUs;

Main thing to note is that, along with getServerSideProps(), serverSideFunction() is also removed by Next.js. Next.js is intelligently tree-shaking the dependencies and removing unused code.