ਤੁਸੀਂ Client Components ਕਦੋਂ ਅਤੇ ਕਿਵੇਂ ਵਰਤਦੇ ਹੋ?

Question

Accepted Answer

ਇੱਕ **Client Component** ਬ੍ਰਾਉਜ਼ਰ ਵਿੱਚ ਚੱਲਦਾ ਹੈ (ਅਤੇ ਸ਼ੁਰੂਆਤੀ HTML ਲਈ ਸਰਵਰ ਤੇ ਵੀ ਪ੍ਰੀ-ਰੈਂਡਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ)। ਤੁਸੀਂ ਫਾਈਲ ਦੇ ਸਿਖਰ 'ਤੇ **`"use client"`** ਨਿਰਦੇਸ਼ ਨਾਲ ਵਿੱਚ ਜਾਂਦੇ ਹੋ। ਤੁਹਾਨੂੰ ਉਹਨਾਂ ਦੀ ਲੋੜ ਹੈ ਜਦੋਂ ਤੁਹਾਨੂੰ ਪਰਸਪਰ ਖੁੰਝਲੀ, ਸਥਿਤੀ, ਪ੍ਰਭਾਵ, ਜਾਂ ਬ੍ਰਾਉਜ਼ਰ APIs ਦੀ ਜ਼ਰੂਰਤ ਹੁੰਦੀ ਹੈ। ## Declaring one ```tsx "use client"; // MUST be the first line of the file import { useState } from "react"; export default function Counter() { const [count, setCount] = useState(0); // ✅ hooks work here return ; // ✅ events } ``` ## When you NEED a Client Component ```text ✓ useState / useReducer / useEffect / useRef / useContext ✓ Event handlers (onClick, onChange, onSubmit) ✓ Browser APIs (window, localStorage, navigator, IntersectionObserver) ✓ Third-party libraries that use any of the above (most UI/animation libs) ``` ## The directive cascades to children ਇੱਕ ਫਾਈਲ ਨੂੰ `"use client"` ਦੇ ਤੌਰ ਤੇ ਨਿਸ਼ਾਨਬੰਦੀ ਕਰਨਾ ਇਸ ਨੂੰ ਅਤੇ **ਇਹ ਸਭ ਕੁਝ ਆਯਾਤ ਕਰਦਾ ਹੈ** ਕਲਾਇੰਟ ਬੰਡਲ ਦਾ ਹਿੱਸਾ ਬਣਾਉਂਦਾ ਹੈ। ਇਸ ਲਈ ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋ ਕਿ ਕਲਾਇੰਟ ਸੀਮਾ **ਛੋਟੀਆਂ ਅਤੇ ਦਰਖਤ ਵਿੱਚ ਹੇਠਾਂ** ਹੋਵੇ — "ਕਲਾਇੰਟ ਟਾਪੂ" — ਬਜਾਏ ਟਾਪ-ਲੈਵਲ ਲੇਆਉਟ ਨੂੰ ਕਲਾਇੰਟ ਦੇ ਤੌਰ ਤੇ ਨਿਸ਼ਾਨਬੰਦੀ ਕਰਨ ਦੇ (ਜੋ ਪੂਰੀ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਬ੍ਰਾਉਜ਼ਰ ਬੰਡਲ ਵਿੱਚ ਖਿੱਚ ਦੇਵੇ)। ```tsx // ✅ Good: server page, small client island only where needed export default async function Page() { // Server Component const data = await getData(); return <>; // island is "use client" } ``` ## Passing data from server to client ```tsx // Server Component fetches, passes serializable props down to the client island ``` ਸਰਵਰ ਤੋਂ Client Component ਤੱਕ ਭੇਜੇ ਗਏ Props **ਸਰੀਲਾਈਜ਼ੇਬਲ** ਹੋਣੇ ਚਾਹੀਦੇ ਹਨ (ਕੋਈ ਫੰਕਸ਼ਨ ਨਹੀਂ, ਕੋਈ ਕਲਾਸ ਇੰਸਟੈਂਸ ਨਹੀਂ) ਕਿਉਂਕਿ ਉਹ ਸਰਵਰ→ਕਲਾਇੰਟ ਸੀਮਾ ਪਾਰ ਕਰਦੇ ਹਨ। ## ਇਹ ਮਹੱਤਵਪੂਰਨ ਕਿਉਂ ਹੈ Client Components ਉਹ ਤਰੀਕਾ ਹੈ ਜਿਸ ਨਾਲ ਤੁਸੀਂ ਹੋਰ ਸਰਵਰ-ਪਹਿਲਾਂ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਪਰਸਪਰ ਖੁੰਝਲੀ ਸ਼ਾਮਲ ਕਰਦੇ ਹੋ। ਹੁਨਰ ਉਹਨਾਂ ਨੂੰ ਘੱਟ ਤੋਂ ਘੱਟ ਅਤੇ ਪੱਤਿਆਂ ਤੇ ਰੱਖਣਾ ਹੈ — ਪਰਸਪਰ ਖੁੰਝਲੀ ਜਿੱਥੇ ਲੋੜ ਹੈ, ਹੋਰ ਸਥਾਨਾਂ ਤੇ Server Components — ਤਾਂ ਕਿ ਤੁਸੀਂ ਸਭ ਤੋਂ ਘੱਟ JavaScript ਭੇਜ ਸਕੋ। `"use client"` ਨੂੰ ਦਰਖਤ ਵਿੱਚ ਉੱਚਿਆਂ ਤੇ ਰੱਖਣਾ ਇੱਕ ਆਮ ਗਲਤੀ ਹੈ ਜੋ ਬੰਡਲ ਨੂੰ ਫੁਲਾਉਂਦੀ ਹੈ ਅਤੇ Server Components ਦੇ ਫਾਇਦਿਆਂ ਤੋਂ ਜਦਾਈ ਕਰ ਦਿੰਦੀ ਹੈ।