What is the most effective way to bring in "server-side only" code in Next.js?

Question

What is the most effective way to bring in "server-side only" code in Next.js?

I am currently working on my index page's getServerSideProps function and I want to utilize a function called foo, which is imported from another local file. This function relies on a specific Node library that cannot be executed in the browser because it requires "server-only" modules like fs or request.

While I have been using a certain pattern, I believe there might be a better way to handle this situation. Declaring foo as mutable just to have it accessible seems cumbersome and unnecessary.

let foo;
if (typeof window === "undefined") {
  foo = require("../clients/foo");
}

export default function Index({data}) {
  ...
}

export async function getServerSideProps() {
  return {
    props: {data: await foo()},
  }
}

What would be the recommended approach in this case? Is there a way to take advantage of ES6's dynamic import feature? Could we dynamically import modules within the getServerSideProps method itself?

My Next.js version is 9.3.6.

Thank you.

UPDATE:

It appears that Next.js provides its own solution for dynamic imports, which might address this issue. I am currently experimenting with it and will provide an update later on. The documentation is a bit confusing since it mentions disabling imports for SSR but not the other way around.

https://nextjs.org/docs/advanced-features/dynamic-import

javascript node.js next.js isomorphic-javascript

Answer 1

Answer №1

Next.js has a feature that automatically removes any code inside the functions getServerSideProps and getStaticProps, as well as any imports exclusively used by them from the client bundle. This ensures that server-side code does not run on the browser.

To make sure this code elimination works properly, there are a few things to keep in mind:

Avoid using imports meant for the server-side within client-side code (such as React components).
Check that there are no unused imports in these files. If an import is intended only for the server, Next.js may include it in both the server and client bundles.

You can use the Next.js Code Elimination tool to see what will be bundled for the client-side. You'll see that getServerSideProps and getStaticProps, along with their related imports, are removed.

Answer 2

Next.js has a feature that automatically removes any code inside the functions getServerSideProps and getStaticProps, as well as any imports exclusively used by them from the client bundle. This ensures that server-side code does not run on the browser.

To make sure this code elimination works properly, there are a few things to keep in mind:

Avoid using imports meant for the server-side within client-side code (such as React components).
Check that there are no unused imports in these files. If an import is intended only for the server, Next.js may include it in both the server and client bundles.

You can use the Next.js Code Elimination tool to see what will be bundled for the client-side. You'll see that getServerSideProps and getStaticProps, along with their related imports, are removed.

Answer 3

Answer №2

Aside from getServerSideProps/getStaticProps, I came across two solutions that are quite similar.

Utilize Dead Code Elimination

In your next.config.js:

config.plugins.push(
    new webpack.DefinePlugin({
      'process.env.RUNTIME_ENV': JSON.stringify(isServer ? 'server' : 'browser'),
    }),
  );

export const addBreadcrumb = (...params: AddBreadcrumbParams) => {
  if (process.env.RUNTIME_ENV === 'server') {
    return import('./sentryServer').then(({ addBreadcrumb }) => addBreadcrumb(...params));
  }
  return SentryBrowser.addBreadcrumb(...params);
};

It's worth mentioning that dead code elimination may not function correctly if you utilize async await or store the result of

process.env.RUNTIME_ENV === 'server'

in a variable. I initiated a discussion about this on GitHub.

Instruct webpack to Ignore it

In your next.config.js

if (!isServer) {
    config.plugins.push(
      new webpack.IgnorePlugin({
        resourceRegExp: /sentryServer$/,
      }),
    );
  }

If you choose this method, ensure that you never import this file on the client side to prevent runtime errors.

Answer 4

Aside from getServerSideProps/getStaticProps, I came across two solutions that are quite similar.

Utilize Dead Code Elimination

In your next.config.js:

config.plugins.push(
    new webpack.DefinePlugin({
      'process.env.RUNTIME_ENV': JSON.stringify(isServer ? 'server' : 'browser'),
    }),
  );

export const addBreadcrumb = (...params: AddBreadcrumbParams) => {
  if (process.env.RUNTIME_ENV === 'server') {
    return import('./sentryServer').then(({ addBreadcrumb }) => addBreadcrumb(...params));
  }
  return SentryBrowser.addBreadcrumb(...params);
};

It's worth mentioning that dead code elimination may not function correctly if you utilize async await or store the result of

process.env.RUNTIME_ENV === 'server'

in a variable. I initiated a discussion about this on GitHub.

Instruct webpack to Ignore it

In your next.config.js

if (!isServer) {
    config.plugins.push(
      new webpack.IgnorePlugin({
        resourceRegExp: /sentryServer$/,
      }),
    );
  }

If you choose this method, ensure that you never import this file on the client side to prevent runtime errors.

Answer 5

Answer №3

To include a third-party library or a server-side file in your getServerSideProps or getInitialProps, you can do so as these functions are executed on the server side.

For example, if you are using a Winston logger that only runs on the server, you can import the configuration file like this:

export async function getServerSideProps(){
        const logger = await import('../logger');
        logger.info(`Info Log ->> ${JSON.stringify(err)}`);
     }

You can also import a library or file with a default export using the following syntax:

export async function getServerSideProps(context) {
        const moment = (await import('moment')).default(); //default method is used to access the default export
        return {
            date: moment.format('dddd D MMMM YYYY'),
          }
      }

Answer 6

To include a third-party library or a server-side file in your getServerSideProps or getInitialProps, you can do so as these functions are executed on the server side.

For example, if you are using a Winston logger that only runs on the server, you can import the configuration file like this:

export async function getServerSideProps(){
        const logger = await import('../logger');
        logger.info(`Info Log ->> ${JSON.stringify(err)}`);
     }

You can also import a library or file with a default export using the following syntax:

export async function getServerSideProps(context) {
        const moment = (await import('moment')).default(); //default method is used to access the default export
        return {
            date: moment.format('dddd D MMMM YYYY'),
          }
      }

What is the most effective way to bring in "server-side only" code in Next.js?

Answer №1

Answer №2

Utilize Dead Code Elimination

Instruct webpack to Ignore it

Answer №3

Similar questions

Using VueMultiselect with Vue 3: A guide for beginners

Error: SyntaxError - Issue with the AJAX request

Discovering mongoose by identification

The error occurred while trying to cast the value of "{{Campground.name}}" to an ObjectID. This value, which is of type string, could not be converted to an ObjectID at the path "_id" for

Tips for generating and invoking a promise within NodeJS

Obtain a string in JSON format upon clicking in Angular 2

Encountering a 400 error in Ajax following the execution of server-side validation by Express

Flask-SocketIO: Transmitting data between nodes using Redis adapter

Appending a forward slash at the end of a URL seamlessly directs the user to a serendipitous webpage experience, while

The "ng2-CKEditor" package is experiencing compatibility issues with TypeScript in Angular 2

Is it possible to import data into a script?

Navigating through sections in NextJS-14: Utilizing useRef for seamless scrolling

The moment the code throws an error, the Node local server abruptly halts

Ordering tables in jQuery with both ascending and descending options

Exploring the capabilities of argon2-browser in a cutting-edge setup with vite

Create dynamic combo boxes using jQuery

Is it possible to use async in the onChange handler of a React event?

Holding onto numerous AJAX requests while disconnected, then dispatching them once the network connection is

Shade within the autocomplete

What are the steps to releasing and utilizing a Node package in Laravel 5?