Question

我在 _app.tsx 应用程序中使用自定义 Next.js 组件，如下所示：

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

奇怪且有点出乎意料的是，console.log 语句同时出现在浏览器控制台 (CLIENT_SIDE true) 和 Node.js 控制台 (CLIENT_SIDE false) 上。这就是为什么我必须在我的代码中进行检查，以便我的 AuthProvider（使用客户端库）不会在服务器上被调用，这会导致我的应用程序出现问题。

目前这可行，但感觉像是一种不应该存在的解决方法。

可能还值得注意的是，我在导出 getServerSideProps 的路由/页面上对此进行了测试。

那么，_app.tsx 会在客户端和服务器端都被调用吗？

为什么 Next.js _app.js 被客户端和服务器调用？

0 个答案: