Tree-shaking with getInitialProps?

[mrassili]

Hello,

I am trying to enable tree-shaking for a next app, I came across some release notes from Next 9.x that say tree-shaking is now possible but I don't see how this can be enabled or if it's default behavior, is it only available for newer fetching apis getStaticProps/getServerSideProps

We only have getInitialProps now and would like to know if tree-shaking is possible, running Next 9.3.5

[rafaelalmeidatk]

If you mean this:

import fs from 'fs';

export async function getStaticProps(context) {
  const file = fs.readFileSync(...); // fs will be removed from the bundle
  ...
}

Then no, it won't work with getInitialProps because the function can run both at the server (SSR) and the client (client-side navigation), so Next can't remove the imports.

What you can do instead is checking if the code is running in the server, then the imports inside the if will be removed from the client bundle:

Page.getInitialProps = async ctx => {
  if (typeof window === 'undefined') {
    // This will only run in the server, and the `if` will be evaluated at build-time,
    // not bundling `fs` in the client-side code
    const fs = require('fs');
    const file = fs.readFileSync(...);
  }
  ...
}

[mrassili]

Thanks @rafaelalmeidatk for your answer, that's not what I meant. I was asking about regular tree-shaking that webpack 4 & 5 has, where unused exports are not loaded with other js loaded on each page (which bloats the payload for each getInitialProps unfortunately)

[willemliu]

getInitialProps can run both server-side and client-side when using the Link component to navigate. So it's not possible to tree-shake that function.
You can make use of getServerSideProps which is always run server-side and is never included in the client-side assets.

[timneutkens]

Tree shaking is enabled in Next.js through webpack automatically. You don't need to configure anything to leverage it, it works automatically. As @rafaelalmeidatk said tree shaking of the data fetching solution was previously not possible because of the way getInitialProps was ran server and client side. getStaticProps/getServerSideProps are tree shaken from the browser bundle, which allows you to use any Node.js apis there.

[neo]

this being said, does it mean that I could also use some secrets in getStaticProps and they wouldn't be bundled in, except for the return props?

[Timer]

Yes, you can use this site to verify what gets bundled:
https://next-code-elimination.now.sh/

[mrassili]

I figured, the thing is some packages weren't tree shakeable I had to fix them and I confirm tree-shaking is working through webpack thanks