React Server Component और Client Component में क्या फर्क है, और आप कैसे तय करते हैं कि किसे इस्तेमाल करना है?

Server Components सिर्फ server पर चलते हैं, request या build के वक्त, और अपना code कभी browser तक नहीं भेजते; वे सीधे किसी database query का await कर सकते हैं पर state, effects या event handlers इस्तेमाल नहीं कर सकते। Client Components पर use client लिखा होता है, वे browser में hydrate होते हैं और interactivity संभालते हैं। डिफॉल्ट server रखिए, और client की सीमा को पेड़ में जितना नीचे धकेल सकें, धकेलिए।

मैं इसे ऐसे सोचता हूं कि Server Components data लाने और markup बनाने के लिए हैं, और Client Components हर उस चीज के लिए जिसे user छूता है। Server Component server पर चलता है, तो मैं उसके अंदर ही किसी query का await कर सकता हूं, और वह code या उसकी dependencies browser bundle में जाती ही नहीं। बदले में सौदा यह है कि न useState, न useEffect, न onClick। जिस पल मुझे इनमें से कोई चाहिए, मैं उस file के ऊपर use client लगा देता हूं, और वह जो कुछ import करती है वह भी client bundle में शामिल हो जाता है। तो मेरा डिफॉल्ट server है और मैं सीमा को जितना नीचे धकेल सकूं, धकेलता हूं। मेरे पिछले project में एक dashboard था जहां सिर्फ filter dropdown और chart का tooltip interactive थे, तो वे दो छोटे client components बने और बाकी page, जिसमें एक काफी भारी markdown renderer भी था, server पर ही रहा। लोग जिस चीज पर फिसलते हैं वह यह कि सीमा पार करने वाले props का serializable होना जरूरी है, तो आप कोई function नीचे नहीं भेज सकते। मैं उसकी जगह server पर render हुए children को client shell में भेजने वाला pattern इस्तेमाल करता हूं।