React Server Components आपके एप्लिकेशन गढ़ने का तरीका कैसे बदलते हैं?

Server Components सिर्फ सर्वर पर चलते हैं, ब्राउज़र को कोई JavaScript नहीं भेजते, और सीधे डेटा await कर सकते हैं, जिससे fetch और useEffect और loading state वाली ज़्यादातर पाइपिंग हट जाती है। use client से चिह्नित Client Components अब भी interactivity, state और ब्राउज़र के APIs संभालते हैं। आप डेटा लाने का काम ऊपर server components में धकेलते हैं और client components को छोटे पत्तों जैसा रखते हैं, जिससे bundle सिकुड़ता है और डेटा का झरना सर्वर की तरफ चला जाता है।

मुझे जो मानसिक मॉडल जमा वह यह कि सीमा कोई folder नहीं, serialization की सीमा है। Server Components सर्वर पर render होते हैं और उनका कोड ब्राउज़र तक कभी नहीं पहुंचता, तो वहां इस्तेमाल हुई कोई भारी markdown या date library client पर शून्य किलोबाइट की पड़ती है। वे component के अंदर ही सीधे डेटाबेस कॉल await कर सकते हैं। जिस भी चीज़ में state, effects या कोई event handler है उसे ऊपर use client लिखकर Client Component बनना होगा, और उसमें जाने वाले props serializable होने चाहिए, तो आप functions या class instances नहीं, डेटा भेजते हैं। व्यवहार में इसका मतलब है कि मेरे पेड़ नीचे तक server components होते हैं जिनके छोटे interactive पत्ते होते हैं, और मैं सर्वर से लाया डेटा props में भेजता हूं। हाल के एक प्रोजेक्ट में जो ट्रेड-ऑफ मुझे मिला वह code review में मानसिक बोझ था, क्योंकि लोग एक छोटे से button के लिए parent पर use client लगा देते थे और चुपचाप पूरा subtree client पर खींच लाते थे। आखिर में हमने इसे पकड़ने के लिए एक lint नियम और CI में bundle size की जांच जोड़ी।