Next.js: Q: 클라이언트 측에서만 코드를 실행하는 방법

@vanniewelt : 동적으로 가져온 비동기 구성 요소가 클라이언트에 로드되고 모든 클라이언트 측 논리를 거기에 넣을 수 있습니다.

또한 ComponentWillReceiveProps 수명 주기는 서버 측에서 props에서 요청을 수신합니다.
이 변수가 있는지 확인하고 클라이언트 코드를 삽입할 수 있습니다.

lib에 창 변수가 필요한 경우 동적 가져오기를 사용하는 것이 좋습니다.

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

React의 componentDidMount 라이프사이클 방법을 사용할 수도 있습니다. 서버 측이라고 하지 않습니다.

@vanniewelt 언제나 process.browser 볼 수 있습니다 ..

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

@Timer로 편집:

@vanniewelt 언제나 typeof window 볼 수 있습니다..

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

예, 하지만 최선의 방법은 아닙니다.
사용자가 인증되었는지 확인하고 여러 가지 이유로 클라이언트 측에서만 해당 확인을 실행하고 싶다고 가정해 보겠습니다. 그 중 하나는 JWT를 localStorage에 저장하고 쿠키에 저장하고 싶지 않기 때문입니다.
따라서 이 경우 첫 번째 페이지 로드 시 다음을 사용합니다.

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 로 변경되었습니다

ComponentDidMount 내부의 클라이언트 측 라이브러리인 mapbox-gl 모듈이 필요했고 추악한 오류 ReferenceError: self is not defined

componentDidMount 사용하여 Mapbox를 만들 수 없었습니다. 왜냐하면 구성 요소가 여전히 서버에서 처리를 시도하기 때문입니다(정확히 무엇을 하려는지 모르겠습니다). @elaich와 동일한 문제가 발생했습니다. ).

@aga5tya 가 제안한 대로 Dynamic Imports 를 사용하여 트릭을 수행했습니다 🎉.

@vanniewelt : 동적으로 가져온 비동기 구성 요소가 클라이언트에 로드되고 모든 클라이언트 측 논리를 거기에 넣을 수 있습니다.

또한 ComponentWillReceiveProps 수명 주기는 서버 측에서 props에서 요청을 수신합니다.
이 변수가 있는지 확인하고 클라이언트 코드를 삽입할 수 있습니다.

lib에 창 변수가 필요한 경우 동적 가져오기를 사용하는 것이 좋습니다.

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

솔루션을 검색하는 이 스레드를 실행한 사람들을 위해. 위에 나열된 동적 가져오기 링크가 손상되었습니다. 업데이트되었으며 Dynamic Imports 에서 찾을 수 있습니다.

클라이언트에서 항상 실행되어야 하는 구성 요소가 있고 동적 가져오기를 사용하고 싶지 않은 경우(예: 사람들이 사용해야 한다는 사실을 잊어버릴 수 있음) Hooks(또는 이에 상응하는 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. 다음에 기고자 댓글을 편집할 때 편집 내용을 댓글에 명확하게 표시할 수 있습니까? 우선, 여기에서와 같이 스레드를 혼란스럽게 만들 수 있습니다. 여기에서 다음 댓글은 내 특정 댓글에 대한 답변입니다. 둘째로, 그것은 내가 쓴 것이 아니기 때문에 오해의 소지가 있고 또한 사람들이 반응을 보였을 때 읽은 것이 아니기 때문입니다.

process.browser 대신 typeof window !== 'undefined'를 사용해야 하는 이유는 무엇입니까? 더 장황하므로 여기에 이유가 없으면 process.browser를 사용하는 것을 선호합니다.

process.browser 는 비표준이며 webpack 환경에서만 사용할 수 있습니다. 즉, 향후 중단될 가능성이 있습니다. 예를 들어 webpack 5는 더 이상 process 폴리필을 사용하지 않습니다.

에 대한 대안 typeof window !== "undefined" 될 수 Object.prototype.isPrototypeOf(window) . 그러나 이 게시물을 기반으로 Next.js에서 생성된 번들은 이전을 감지하고 더 가벼운 번들을 생성하는 모든 것이 승리로 간주되어야 합니다.