Как определить, нахожусь ли я на сервере на клиенте в next.js?
Я использую клиентский экспресс-сервер с Next.js. Он работает в контейнере. Я делаю http-запрос с isomorphic-fetch, чтобы получить данные для моего рендера. Я бы хотел сделать localhost при работе на сервере и mysite.com при работе на клиенте. Не уверен, как лучше всего этого добиться. Я могу сделать это хакерским путем, выполнив const isServer = typeof window === 'undefined', но это кажется довольно плохим.
@mikemaccana готово!
Ответы 5
Вы можете использовать process.browser, чтобы различать серверную среду (NodeJS) и клиентскую среду (браузер).
process.browser - это true на клиенте и undefined на сервере.
Также есть isServer, зависящий от вызова функции Next. Мне действительно нужно было использовать process.browser, откуда мне нужна логика :)
Ты просто идеален!
Я думаю, что process.browser добавляется веб-пакетом, который затем распространяется на next.js
Вместо этого взгляните на ответ @ kenberkeley ниже. process.browser устарел, и использование typeof window вместо него даст вам оптимизацию внутри фреймворка.
Еще одно замечание: componentDidMount() всегда вызывается в браузере. Я часто загружаю исходный набор данных (seo-контент в getInitialProps(), а затем загружаю более подробные данные в методе componentDidMount().
Есть ли способ сделать это с помощью хука useEffect ()?
@jonhobbs Да, useEffect напрямую заменяет componentDidMount (плюс componentDidUpdate и componentWillUnmount все в одном). Если вы просто напишете useEffect(() => { .. }, []), то это точный эквивалент. См. reactjs.org/docs/hooks-effect.html
Поскольку мне не нравится зависеть от странных сторонних вещей для этого поведения (хотя 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
Предполагается, что вы находитесь в getInitialProps или имеете доступ к appContext.
Теперь (январь 2020 г.) это должен быть typeof window === 'undefined', поскольку process.browser устарел.
Обратитесь к https://github.com/zeit/next.js/issues/5354#issuecomment-520305040
Отличный ответ! Однако добавлю примечание, что если вы используете Typescript и, как и я, получаете сообщение об ошибке «не удается найти окно имени», это связано с тем, что вам нужно добавить "dom" в массив lib в tsconfig.json. По какой-то причине Next.js не включает это по умолчанию.
getServerSideProps и getStaticProps добавлены в Next 9.3 (март 2020 г.), и это функции рекомендуемые.
If you're using Next.js 9.3 or newer, we recommend that you use
getStaticPropsorgetServerSidePropsinstead ofgetInitialProps.
Так что не нужно обнаруживать, просто поместите вещи на стороне сервера в getServerSideProps.
const MyPage = () => {
useEffect(() => {
// client side stuff
}, [])
return (
<div> ... </div>
)
}
MyPage.getServerSideProps = async () => {
// server side stuff
}
Обновите ответ (см. @Kenberkeley ниже)