Next.js: प्रश्न: केवल क्लाइंट-साइड कोड कैसे निष्पादित करें

@vanniewelt : क्लाइंट पर गतिशील रूप से आयातित Async घटक लोड होता है और आप वहां सभी क्लाइंट साइड लॉजिक डाल सकते हैं।

इसके अलावा ComponentWillReceiveProps जीवनचक्र सर्वर साइड पर प्रॉप्स में अनुरोध प्राप्त करेगा।
जाँच कर सकते हैं कि क्या यह चर मौजूद है और अपने क्लाइंट कोड को इंजेक्ट करें।

यदि lib को विंडो चर की आवश्यकता है, तो मेरा सुझाव है कि आप डायनामिक आयात का उपयोग करें, मेरे लिए अच्छा काम करता है।

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

आप रिएक्ट की componentDidMount जीवनचक्र पद्धति का भी उपयोग कर सकते हैं। इसे सर्वर साइड नहीं कहा जाता है।

@vanniewelt आप हमेशा process.browser ..

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

@Timer द्वारा संपादित करें:

@vanniewelt आप हमेशा typeof window ..

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

हाँ, लेकिन यह सबसे अच्छा तरीका नहीं है।
मान लीजिए कि मैं यह जांचना चाहता हूं कि उपयोगकर्ता प्रमाणित है या नहीं, और मैं उस चेक को केवल क्लाइंट साइड पर कई कारणों से चलाने के लिए चाहता हूं, उनमें से एक यह है क्योंकि मैं स्थानीय स्टोरेज में जेडब्ल्यूटी स्टोर कर रहा हूं और इसे कुकी में स्टोर नहीं करना चाहता हूं।
तो इस मामले में पहले पृष्ठ पर लोड के साथ:

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 छुटकारा पाया

मैं componentDidMount का उपयोग करके मैपबॉक्स बनाने में सक्षम नहीं था क्योंकि घटक अभी भी सर्वर पर संसाधित होने का प्रयास करता है (मुझे नहीं पता कि वास्तव में क्या करने की कोशिश कर रहा है) (मुझे एक ही समस्या है कि @elaich )

@ aga5tya द्वारा सुझाए गए डायनामिक आयात का उपयोग करके चाल चली ।

@vanniewelt : क्लाइंट पर गतिशील रूप से आयातित Async घटक लोड होता है और आप वहां सभी क्लाइंट साइड लॉजिक डाल सकते हैं।

इसके अलावा ComponentWillReceiveProps जीवनचक्र सर्वर साइड पर प्रॉप्स में अनुरोध प्राप्त करेगा।
जाँच कर सकते हैं कि क्या यह चर मौजूद है और अपने क्लाइंट कोड को इंजेक्ट करें।

यदि lib को विंडो चर की आवश्यकता है, तो मेरा सुझाव है कि आप डायनामिक आयात का उपयोग करें, मेरे लिए अच्छा काम करता है।

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

उन लोगों के लिए जो समाधान की तलाश में इस धागे में चले गए हैं। ऊपर सूचीबद्ध डायनामिक आयात लिंक टूटा हुआ है। इसे अपडेट कर दिया गया है और इसे डायनामिक इम्पोर्ट्स पर पाया जा सकता है।

यदि आपके पास एक घटक है जिसे हमेशा क्लाइंट पर निष्पादित किया जाना चाहिए, और गतिशील आयात का उपयोग नहीं करना चाहते हैं (उदाहरण: लोग भूल सकते हैं कि उन्हें उनका उपयोग करने की आवश्यकता है), तो आप हुक (या समकक्ष 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>

यदि आप किसी भी पुस्तकालय का उपयोग कर रहे हैं जो ब्राउज़र एपीआई का उपयोग करता है तो आप दूसरे तर्क के रूप में SSR=false के साथ गतिशील रूप से मॉड्यूल आयात कर सकते हैं।
const DynamicComponentWithNoSSR = dynamic( () => import('../components/hello3'), { ssr: false } )
https://nextjs.org/docs/advanced-features/dynamic-import

यदि आप किसी भी पुस्तकालय का उपयोग कर रहे हैं जो ब्राउज़र एपीआई का उपयोग करता है तो आप दूसरे तर्क के रूप में 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. हमें केवल process.browser बजाय typeof window !== 'undefined' उपयोग क्यों करना चाहिए? यह अधिक क्रियात्मक है, इसलिए यदि यहां कोई कारण नहीं है, तो मैं process.browser का उपयोग करना पसंद करता हूं।
2. अगली बार जब आप किसी योगदानकर्ता टिप्पणी को संपादित करते हैं, तो क्या आप अपनी टिप्पणी में संपादन को स्पष्ट कर सकते हैं? सबसे पहले, यह धागे को भ्रमित कर सकता है, जैसे उसने यहां किया, जहां निम्नलिखित टिप्पणी मेरी विशिष्ट टिप्पणी का उत्तर है। दूसरा, यह भ्रामक है क्योंकि मैंने जो लिखा है वह नहीं है, और यह भी नहीं है कि जब लोग अपनी प्रतिक्रिया देते हैं तो लोग पढ़ते हैं।

हमें केवल प्रक्रिया.ब्राउज़र के बजाय टाइपऑफ़ विंडो !== 'अपरिभाषित' का उपयोग क्यों करना चाहिए? यह अधिक क्रियात्मक है, इसलिए यदि यहां कोई कारण नहीं है, तो मैं प्रक्रिया.ब्राउज़र का उपयोग करना पसंद करता हूं।

process.browser गैर-मानक है और केवल वेबपैक वातावरण में उपलब्ध है, जिसका अर्थ है कि भविष्य में इसके टूटने की संभावना है, उदाहरण के लिए वेबपैक 5 अब process पॉलीफ़िल नहीं करता है।

के लिए एक वैकल्पिक typeof window !== "undefined" हो सकता है Object.prototype.isPrototypeOf(window) । इस पोस्ट के आधार पर, हालांकि, Next.js द्वारा निर्मित बंडल पूर्व का पता लगाते हैं और जो भी हल्का बंडल उत्पन्न करता है उसे जीत माना जाना चाहिए।