Как определить, что я нахожусь на сервере против клиента в Next.js

Question

Я использую экспресс-сервер клиента с Next.js. Он работает в контейнере. Я делаю http запрос с isomorphic-fetch чтобы получить данные для моего рендера. Я хотел бы сделать localhost при работе на сервере и mysite.com при запуске на клиенте. Не уверен, что лучший способ сделать это. Я могу сделать это по счастливой случайности const isServer = typeof window === 'undefined' но это выглядит довольно плохо.

Answer 1

Ты можешь использовать process.browser различать серверную среду (NodeJS) и клиентскую среду (браузер).

process.browser является true на клиенте и undefined на сервере.

Answer 2

Сейчас (2020 Янв) должно быть typeof window === 'undefined' поскольку process.browser не рекомендуется

См. https://github.com/zeit/next.js/issues/5354.

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'

Answer 6

и добавлены в Next 9.3(март 2020 г.), и эти функции рекомендуются .

Если вы используете Next.js 9.3 или новее, мы рекомендуем вам использовать getStaticProps или вместо getInitialProps.

Так что не нужно обнаруживать, просто поместите данные на стороне сервера в getServerSideProps.

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

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

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