如何检测我是否在 next.js 中的客户端服务器上？答案

【问题标题】：How do I detect whether I am on server on client in next.js?如何检测我是否在 next.js 中的客户端服务器上？
【发布时间】：2018-08-30 21:29:27
【问题描述】：

我正在使用带有 Next.js 的客户快递服务器。它在容器中运行。我正在使用isomorphic-fetch 进行http 请求以获取渲染数据。在服务器上运行时我想做localhost，在客户端上运行时我想做mysite.com。不确定实现这一目标的最佳方法。我可以通过const isServer = typeof window === 'undefined' 轻松地做到这一点，但这似乎很糟糕。

【问题讨论】：

请更新答案（见下面的@kenberkeley）
@mikemaccana 完成！

标签： express next.js

【解决方案1】：

您可以使用process.browser 区分服务器环境（NodeJS）和客户端环境（浏览器）。

process.browser 是客户端上的true 和服务器上的undefined。

【讨论】：

另外isServer 是一个东西，取决于 Next 函数调用。我确实需要在需要逻辑的地方使用process.browser :)
你太完美了！
我认为 process.browser 是由 webpack 添加的，然后传播到 next.js
请查看下面@kenberkeley 的答案，而不是使用它。 process.browser 已被弃用，而使用 typeof window 将为您带来框架内优化。

【解决方案2】：

还有一点需要注意的是，componentDidMount() 总是在浏览器上调用。我经常在getInitialProps()中加载初始数据集（seo内容，然后在componentDidMount()方法中加载更多深度数据。

【讨论】：

有没有办法用 useEffect() 钩子做到这一点？
@jonhobbs 是的，useEffect 直接替换了componentDidMount（加上componentDidUpdate 和componentWillUnmount 合二为一）。如果你只写useEffect(() => { .. }, [])，那么它是完全等价的。见reactjs.org/docs/hooks-effect.html

【解决方案3】：

由于我不喜欢这种行为依赖奇怪的第三方事物（即使 process.browser 似乎来自 Webpack），我认为检查的首选方法是检查 @ 的存在987654323@这样的：

async getInitialProps (appContext) {

    if (appContext.ctx.req) // server? 
    {
        //server stuff
    }
    else {
        // client stuff
    }
}

来源：https://github.com/zeit/next.js/issues/2946

【讨论】：

这假设您在getInitialProps 或有权访问appContext
我不会对基本概念使用晦涩难懂的语法 - isClient(appContext) 助手会更好读。

【解决方案4】：

现在（2020 年 1 月）应该是 typeof window === 'undefined'，因为 process.browser 已弃用

参考https://github.com/zeit/next.js/issues/5354#issuecomment-520305040

【讨论】：

很好的答案！但是，添加一个注释，如果您使用 Typescript，并且像我一样，您会收到错误“找不到名称窗口”，这是因为您需要将 "dom" 添加到 tsconfig.json 中的 lib 数组中。出于某种原因，Next.js 默认不包含此内容。

【解决方案5】：

在 Next 9.3(2020 年 3 月) 中添加了getServerSideProps and getStaticProps，这些功能是recommended。

如果您使用的是 Next.js 9.3 或更高版本，我们建议您使用 getStaticProps 或 getServerSideProps 而不是 getInitialProps。

所以不需要检测，只需将服务器端的东西放在getServerSideProps。

const MyPage = () => {
  useEffect(() => {
    // client side stuff
  }, [])

  return (
    <div> ... </div>
  )
}

MyPage.getServerSideProps = async () => {
  // server side stuff
}

【讨论】：