我正在使用客户快递服务器与Next.js。它在一个容器里运行。我正在使用isomorphic-fetch进行http请求,以获取渲染数据。我想在服务器上运行时执行localhost,在客户端上运行时执行mysite.com。我不知道最好的方法来实现这一点。我可以通过做const isServer = typeof window === 'undefined'来做,但这似乎很糟糕。
isomorphic-fetch
localhost
mysite.com
const isServer = typeof window === 'undefined'
toe950271#
现在(2020年1月)应该是typeof window === 'undefined',因为process.browser已弃用请参阅https://github.com/zeit/next.js/issues/5354#issuecomment-520305040
typeof window === 'undefined'
process.browser
ctehm74n2#
您可以使用process.browser来区分服务器环境(NodeJS)和客户端环境(浏览器)。process.browser在客户端是true,在服务器端是undefined。
true
undefined
uinbv5nw3#
由于我不喜欢依赖于奇怪的第三方的东西来实现这种行为(即使process.browser似乎来自 Webpack),我认为检查appContext.ctx.req是否存在的首选方法如下:
appContext.ctx.req
async getInitialProps (appContext) { if (appContext.ctx.req) // server? { //server stuff } else { // client stuff } }
来源:https://github.com/zeit/next.js/issues/2946
643ylb084#
另一个注意事项是componentDidMount()总是在浏览器上调用。我经常在getInitialProps()中加载初始数据集(seo内容),然后在componentDidMount()方法中加载更多的深度数据。
componentDidMount()
getInitialProps()
ezykj2lf5#
此外,作为变体,您可以在没有NEXT_PUBLIC_前缀的情况下向.env文件添加变量。类似于:IS_SERVER_FLAG=true此变量仅在服务器端可用之后,你可以在代码中检查它const isServer = process.env.IS_SERVER_FLAG ? 'RUN ON SERVER' : 'RUN_ON_CLIENT'
NEXT_PUBLIC_
.env
IS_SERVER_FLAG=true
const isServer = process.env.IS_SERVER_FLAG ? 'RUN ON SERVER' : 'RUN_ON_CLIENT'
wnrlj8wa6#
getServerSideProps和getStaticProps在Next 9.3(2020年3月)中添加,这些函数为recommended。如果您使用的是Next.js 9.3或更高版本,我们建议您使用getStaticProps或getServerSideProps,而不是getInitialProps。所以不需要检测,只需将服务器端的东西放在getServerSideProps中。
getServerSideProps
getStaticProps
getInitialProps
const MyPage = () => { useEffect(() => { // client side stuff }, []) return ( <div> ... </div> ) } MyPage.getServerSideProps = async () => { // server side stuff }
6条答案
按热度按时间toe950271#
现在(2020年1月)应该是
typeof window === 'undefined'
,因为process.browser
已弃用请参阅https://github.com/zeit/next.js/issues/5354#issuecomment-520305040
ctehm74n2#
您可以使用
process.browser
来区分服务器环境(NodeJS)和客户端环境(浏览器)。process.browser
在客户端是true
,在服务器端是undefined
。uinbv5nw3#
由于我不喜欢依赖于奇怪的第三方的东西来实现这种行为(即使
process.browser
似乎来自 Webpack),我认为检查appContext.ctx.req
是否存在的首选方法如下:来源:https://github.com/zeit/next.js/issues/2946
643ylb084#
另一个注意事项是
componentDidMount()
总是在浏览器上调用。我经常在getInitialProps()
中加载初始数据集(seo内容),然后在componentDidMount()
方法中加载更多的深度数据。ezykj2lf5#
此外,作为变体,您可以在没有
NEXT_PUBLIC_
前缀的情况下向.env
文件添加变量。类似于:
IS_SERVER_FLAG=true
此变量仅在服务器端可用
之后,你可以在代码中检查它
const isServer = process.env.IS_SERVER_FLAG ? 'RUN ON SERVER' : 'RUN_ON_CLIENT'
wnrlj8wa6#
getServerSideProps
和getStaticProps
在Next 9.3(2020年3月)中添加,这些函数为recommended。如果您使用的是Next.js 9.3或更高版本,我们建议您使用
getStaticProps
或getServerSideProps
,而不是getInitialProps
。所以不需要检测,只需将服务器端的东西放在
getServerSideProps
中。