Server-side only method to ensure server-only code is never sent to the browser

[Jauny]

Feature request

Is your feature request related to a problem? Please describe.

Let's say I have a hypothetical Analytics.js module which works differently depending on whether we are on the server or in the browser. It dynamically loads a library-node or library-browser package with an eval for example.

Since it's an analytics module we need it inside most of our components to send events.

I tried to initialise it in getInitialProps like this:

static async getInitialProps({req}) => {
  this.analytics = new Analytics(!!req)
}

This allows to correctly load Analytics with server or client side setup, but when loaded on the server side, the code will then be sent to the browser, which will error on unknown code (such as fs etc).

Describe the solution you'd like

It would be nice to have a way to say "here is some code I want ran only on the server because it will break in the browser".
We can already do this with browser code, because we have componentDidMount which is only called in the browser, so we know it will never get evaluated on the server. Something similar for server-side would be helpful.

Describe alternatives you've considered

Right now I'm just loader my module inside component in componentDidMount (only in the browser) and abstracted the analytics logic in other non-components modules that are ran in the server, but it's not as flexible and mixes concerns.

Additional context

n/a

Thanks!

[HaNdTriX]

Did you try?

if (!process.browser) {
  console.log('this code will only run on the server')
}

or

let myLib
if (process.browser) {
  myLib = require('library-browser')
} else {
  myLib = require('library-node')
}

[sergiodxa]

process.browser as far as I remember is something from webpack and not safe to use. Using typeof window === 'undefined' will give you the same result.

[Jauny]

@HaNdTriX being able to check if I'm in the server or the browser is not really a problem. As you mention we can use process.browser or as sergiodxa mentions check for window.

My issue is that if I do something like this.analytics = new mylib(), when the component is rendered server side, the server version of the lib is correctly loaded, and sent to the browser with it, so then the browser has issues with it.

What I'm offering here is a way to mark code to be loaded/ran during server side rendering, but then maybe purged before it is sent to the browser.

The more I try to explain this is less it seems plausible tho 🤔

[hugotox]

can't you move your server logic to the server.js file instead of your component?

[HaNdTriX]

@sergiodxa As far as I know the behaviour of process.browser was changed in next@7.

So browser.browser will now be picked up by the minifier and remove the code.
Please note that this only works at the root scope and with simple if statements.
In addition please note that you`ll need to use the commonjs syntax (see my example above).

Here is the code thats related to my theory:
https://github.com/zeit/next.js/blob/canary/packages/next/build/webpack.js#L285

Another approach could be to use of dynamic imports (see ssr option).

[pengshaosu]

process.browser as far as I remember is something from webpack and not safe to use. Using typeof window === 'undefined' will give you the same result.

when window === 'undefined' casuing ReferenceError: window is not defined
window can't be resolved on server side.

[hugotox]

@pengshaosu :

typeof window === 'undefined'

[pengshaosu]

@hugotox

thx.
how can disable getInitialProps call only when next export, still working when next build(both csr and ssr). maybe i can by process.env. any other apporach?

[constb]

@HaNdTriX really knows what he's talking about. #5159 added code elimination on webpack-level when process.browser is referenced. Webpack replaces it with true in client build stage, and with false when compiling server. Then it's just standard dead code elimination routine… This should probably be documented somewhere, but either way maybe we should close this issue?

[codyzu]

I found an interesting solution:

1. serve next using an express server as shown here
2. require whatever server side modules you need inside your server.js and add them to the req via an express middleware

const myModule = require('this-only-works-on-the-server');

// ... initialize express + next

server.use((req, res, next) => {
  // now I can access this module inside the getInitialProps function
  req.myModule = myModule;
  return next();
})

server.get('*', (req, res) => {
  return handle(req, res);
})

☝️ this avoids webpack ever trying to include the server side module since the server.js file is never imported by webpack.

[musemind]

Is there a way to use a folder (for example /server/*) for server-only code. My server.js grows fast.

[janoist1]

I found an interesting solution:

1. serve next using an express server as shown here
2. require whatever server side modules you need inside your server.js and add them to the req via an express middleware

const myModule = require('this-only-works-on-the-server');

// ... initialize express + next

server.use((req, res, next) => {
  // now I can access this module inside the getInitialProps function
  req.myModule = myModule;
  return next();
})

server.get('*', (req, res) => {
  return handle(req, res);
})

☝️ this avoids webpack ever trying to include the server side module since the server.js file is never imported by webpack.

That's a great idea!!

[jaydenseric]

The idea in #5354 (comment) might be ok within a project, but is not particularly viable for published packages as consumers might not have a custom server setup.

For next-graphql-react I ended up exporting a Next.js plugin that for the client bundle aliases all the server only exports to empty named exports; see withGraphQLConfig.

I also use the undocumented, but handy, process.browser to eliminate client/server code in the relevant bundles: https://github.com/jaydenseric/next-graphql-react/blob/v2.0.0/src/universal/withGraphQLApp.mjs#L85

This used to be inferior to typeof window !== 'undefined' checks as Webpack would include a massive process polyfill, but I'm pretty sure that no longer happens in recent Next.js releases.

[janoist1]

Is there a way to use a folder (for example /server/*) for server-only code. My server.js grows fast.

Yes. Create a folder server move server.js to server/main.js and update your package.json scripts accordingly. For example:

    "dev": "node server/main.js",
    "inspect": "node --inspect server/main.js",
    "start": "NODE_ENV=production node server/main.js",