如何检测我在Next.js中的服务器与客户端

Question

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

Answer 1

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

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

Answer 2

您可以process.browser用来区分服务器环境(NodeJS)和客户端环境(浏览器).

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

Answer 3

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

async getInitialProps (appContext) {

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

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

Answer 4

另一项注意事项是componentDidMount()始终在浏览器上调用。我经常加载初始数据集（seo 内容）getInitialProps()，然后在方法中加载更深入的数据 componentDidMount()。

Answer 5

另外，作为变体，您可以将变量添加到.env文件中而不带NEXT_PUBLIC_前缀。

就像： IS_SERVER_FLAG=true

该变量仅在服务器端可用

之后，您可以在代码中检查它

const isServer = process.env.IS_SERVER_FLAG ? 'RUN ON SERVER' : 'RUN_ON_CLIENT'