1

I'm using a custom _app.tsx component in my Next.js app like so:

const MyApp = ({Component, pageProps}) => {

  let ClientSideAuthProvider = (({children}) => <>{children}</>) // SERVER-SIDE BY DEFAULT

  if (process.browser) { // CLIENT-SIDE
    const {AuthProvider} = require('utils/auth')
    ClientSideAuthProvider = AuthProvider
  }
  
  console.log('CLIENT_SIDE ' + process.browser)

  return (
    <ClientSideAuthProvider>
      <Component {...pageProps} />
    </ClientSideAuthProvider>
  )
}

export default MyApp

The strange and somewhat unexpected thing is that the console.log statement appears on both the browser console (CLIENT_SIDE true) and Node.js console (CLIENT_SIDE false). Which is why I'm having to make the check in my code so that my AuthProvider, which uses a client-side library, isn't called on the server, which causes issues that break my app.

For now this works, but it feels like a workaround that shouldn't be there.

It's also probably worth noting that I tested this on a route/page that exports getServerSideProps.

So, is it by design that _app.tsx would be called both on the client as well as on the server side?

artooras
  • 6,315
  • 9
  • 45
  • 78
  • 1
    Also, [`process.browser` is deprecated](https://stackoverflow.com/a/59562136/11613622). – brc-dd Jul 26 '21 at 12:08
  • @Danila, kind of. Does it apply to `_app` the same way, meaning its code is executed twice because the page is rendered twice? – artooras Jul 26 '21 at 13:30
  • 1
    Yes, the page is rendered on the server at first and send to the browser as html, then it gets hydrated on the client – Danila Jul 26 '21 at 13:36

0 Answers0