Next.js: Q: Как выполнить код только на стороне клиента

@vanniewelt : динамически импортируемый компонент Async загружается на клиент, и вы можете поместить туда всю логику на стороне клиента.

Также жизненный цикл ComponentWillReceiveProps будет получать запрос в реквизитах на стороне сервера.
Можно поставить проверку, существует ли эта переменная, и ввести свой клиентский код.

Если библиотеке нужна переменная окна, я предлагаю вам использовать динамический импорт, мне подходит.

https://github.com/zeit/next.js/tree/v3-beta/examples/with-dynamic-import

Вы также можете использовать метод жизненного цикла componentDidMount React. Это не называется серверной частью.

@vanniewelt Вы всегда можете посмотреть process.browser ..

if (process.browser) {
  // client-side-only code
}

редактировать @Timer :

@vanniewelt Вы всегда можете посмотреть typeof window ..

if (typeof window !== 'undefined') {
  // client-side-only code
}

да, но это не лучший подход.
скажем, я хочу проверить, аутентифицирован ли пользователь, и я хочу запустить эту проверку только на стороне клиента по нескольким причинам, одна из которых заключается в том, что я храню JWT в localStorage и не хочу хранить его в файле cookie.
Итак, в этом случае при загрузке первой страницы:

if (process.browser) {
  // client-side-only code
}

код в рамках области не будет выполняться вообще, ни на сервере, а не на клиенте, он будет выполнен только в том случае, если изменение маршрута было инициировано клиентом.

@sarkistlt В некоторых случаях вы можете быть правы, в зависимости от того, где размещен этот код .. но ..

Если этот код выполняется на сервере, выполнение не достигнет // client-side-only code . Если этот код выполняется на клиенте, исполнение достигнет // client-side-only code .

Вроде верный ответ на вопрос:

Есть ли способ ограничить выполнение некоторого кода только на стороне клиента?

@sarkistlt componentDidMount выполняется только на стороне клиента, componentWillMount выполняется как на стороне клиента, так и на стороне сервера.

@sarkistlt https://reactjs.org/docs/react-component.html#componentwillmount

Это единственный крючок жизненного цикла, вызываемый серверным рендерингом.

Я делал это много раз, вы путаете componentWillMount с componentDidMount .

@sergiodxa на самом деле вы правы, только что запустили тест. Благодарность!

Ссылка @sergiodxa componentWillMount изменена на https://reactjs.org/docs/react-component.html#unsafe_componentwillmount.

Мне потребовался модуль mapbox-gl который является клиентской библиотекой внутри ComponentDidMount и я избавился от уродливой ошибки ReferenceError: self is not defined

Мне не удалось создать Mapbox, используя componentDidMount потому что компонент все еще пытается обработать (я не знаю, что именно пытается сделать) на сервере (у меня возникла та же проблема, что и у @elaich ).

Использование динамического импорта, предложенное @ aga5tya , помогло.

@vanniewelt : динамически импортируемый компонент Async загружается на клиент, и вы можете поместить туда всю логику на стороне клиента.

Также жизненный цикл ComponentWillReceiveProps будет получать запрос в реквизитах на стороне сервера.
Можно поставить проверку, существует ли эта переменная, и ввести свой клиентский код.

Если библиотеке нужна переменная окна, я предлагаю вам использовать динамический импорт, мне подходит.

https://github.com/zeit/next.js/tree/v3-beta/examples/with-dynamic-import

Для тех, кто сталкивался с этой веткой в ​​поисках решения. Ссылка на динамический импорт, указанная выше, не работает. Он был обновлен, и его можно найти на сайте Dynamic Imports .

Если у вас есть компонент, который всегда должен выполняться на клиенте, и вы не хотите использовать динамический импорт (например, люди могут забыть, что им нужно их использовать), вы можете использовать хуки (или эквивалент componentDidMount ) следующим образом:

import React, { useEffect, useState } from 'react'

function CreateInteraction ({ input }) {
  const [isComponentMounted, setIsComponentMounted] = useState(false)

  useEffect(() => setIsComponentMounted(true), [])

  if(!isComponentMounted) {
    return null
  }

  return <h1>I'm only executed on the client!</h1>
}

Просто добавлю к некоторым уже хорошим ответам: в моем текущем проекте много условного рендеринга в обоих направлениях, поэтому я использую для этого компонент:

import React, { useEffect, useState } from "react";

export interface ConditionallyRenderProps {
    client?: boolean;
    server?: boolean;
}

const ConditionallyRender: React.FC<ConditionallyRenderProps> = (props) => {
    const [isMounted, setIsMounted] = useState(false);

    useEffect(() => setIsMounted(true), []);

    if(!isMounted && props.client) {
        return null;
    }

    if(isMounted && props.server) {
        return null;
    }

    return props.children as React.ReactElement;
};

export default ConditionallyRender;

А затем используйте его следующим образом:

<Layout>
    <ConditionallyRender server>
        <p>This is rendered only on server.</p>
    </ConditionallyRender>
    <ConditionallyRender client>
        <p>This is rendered only on client.</p>
    </ConditionallyRender>
</Layout>

Если вы используете любую библиотеку, которая обращается к API браузера, вы можете динамически импортировать модули с SSR = false в качестве второго аргумента.
const DynamicComponentWithNoSSR = dynamic( () => import('../components/hello3'), { ssr: false } )
https://nextjs.org/docs/advanced-features/dynamic-import

Если вы используете любую библиотеку, которая обращается к API браузера, вы можете динамически импортировать модули с SSR = false в качестве второго аргумента.
const DynamicComponentWithNoSSR = dynamic( () => import('../components/hello3'), { ssr: false } )
https://nextjs.org/docs/advanced-features/dynamic-import

Вам также необходимо добавить этот импорт, если вы хотите использовать «динамический» импорт для всех, кто просматривает код @ yashwant-dangi!

import dynamic from 'next/dynamic'

@Timer Я заметил, что вы отредактировали мой комментарий https://github.com/vercel/next.js/issues/2473#issuecomment -362119102, который я снова отредактировал, чтобы отразить исходный комментарий и ваше изменение.

1. Почему мы должны использовать typeof window !== 'undefined' вместо простого process.browser ? Он более подробный, поэтому, если здесь нет причин, я предпочитаю использовать process.browser .
2. Не могли бы вы сделать изменение заметным в своем комментарии в следующий раз, когда вы редактируете комментарий автора? Во-первых, это может сбить с толку поток, как здесь, где следующий комментарий является ответом на мой конкретный комментарий. Во-вторых, это вводит в заблуждение, поскольку это не то, что я написал, и также не то, что люди читают, когда высказывают свою реакцию.

Почему мы должны использовать typeof window! == 'undefined' вместо просто process.browser? Он более подробный, поэтому, если здесь нет причин, я предпочитаю использовать process.browser.

process.browser нестандартен и доступен только в среде webpack, что означает, что в будущем он может сломаться, например, webpack 5 больше не будет полифиллировать process .

Альтернативой typeof window !== "undefined" может быть Object.prototype.isPrototypeOf(window) . Однако, исходя из этого сообщения , пакеты, созданные Next.js, обнаруживают предыдущие, и все, что создает более легкие пакеты, следует рассматривать как выигрыш.