सर्वर साइड रेंडरिंग

reelkit के सभी पैकेज सर्वर पर चलते हैं। इन्हें Next.js, Remix, Angular Universal या किसी भी SSR सेटअप में import और रेंडर करें।

यह कैसे काम करता है

core स्लाइडर कंट्रोलर शुद्ध logic है और बनाते समय DOM को नहीं छूता। जेस्चर listeners, कीबोर्ड इवेंट और एनिमेशन सिर्फ़ क्लाइंट साइड के lifecycle hooks में जुड़ते हैं।

SSR के दौरान Reel कंपोनेंट शुरू में दिखने वाली स्लाइड (आम तौर पर 3: पिछली, मौजूदा, अगली) के साथ एक स्टैटिक कंटेनर रेंडर करता है। Hydration पर यह जेस्चर, कीबोर्ड और व्हील कंट्रोलर जोड़ता है, जिससे सब कुछ इंटरैक्टिव हो जाता है।

पैकेज	SSR के लिए सुरक्षित	टिप्पणी
`@reelkit/core`	हाँ	शुद्ध logic, import या निर्माण के समय कोई ब्राउज़र API नहीं
`@reelkit/react`	हाँ	Reel और ReelIndicator सर्वर पर मान्य HTML रेंडर करते हैं
`@reelkit/angular`	हाँ	Standalone कंपोनेंट, Angular Universal के साथ SSR में काम करते हैं
`@reelkit/vue`	हाँ	कंपोनेंट और composables, Nuxt 3 के साथ SSR में काम करते हैं
`@reelkit/react-reel-player`	हाँ	बंद होने पर (`isOpen=false`) कुछ भी रेंडर नहीं करता
`@reelkit/react-lightbox`	हाँ	बंद होने पर (`isOpen=false`) कुछ भी रेंडर नहीं करता
`@reelkit/angular-reel-player`	हाँ	बंद होने पर (`isOpen=false`) कुछ भी रेंडर नहीं करता
`@reelkit/angular-lightbox`	हाँ	बंद होने पर (`isOpen=false`) कुछ भी रेंडर नहीं करता
`@reelkit/stories-core`	हाँ	फ़्रेमवर्क से स्वतंत्र, DOM तक कोई पहुँच नहीं
`@reelkit/react-stories-player`	हाँ	बंद होने पर (`isOpen=false`) कुछ भी रेंडर नहीं करता

Next.js App Router

Reel ब्राउज़र इवेंट और refs का इस्तेमाल करता है, इसलिए यह Client Component के रूप में चलता है। जिस फ़ाइल में Reel इस्तेमाल हो, उसके सबसे ऊपर "use client" directive जोड़ें:

tsx

आप Server Component में डेटा fetch करके उसे नीचे पास कर सकते हैं:

tsx

Next.js Pages Router

Pages Router बिना किसी अतिरिक्त कॉन्फ़िगरेशन के काम करता है। कंपोनेंट SSR के दौरान रेंडर होता है और क्लाइंट पर hydrate होता है:

tsx

SSR के साथ रिस्पॉन्सिव साइज़

size prop को पूरी तरह छोड़ दें। size न देने पर Reel क्लाइंट पर ResizeObserver के ज़रिए अपना कंटेनर खुद नापता है। SSR के दौरान स्लाइडर एक खाली कंटेनर रेंडर करता है; hydration पर वह नापकर तुरंत स्लाइड रेंडर कर देता है:

tsx

अपने-आप साइज़ कैसे काम करता है

size छोड़ने पर कंटेनर का साइज़ CSS से तय होना चाहिए (parent flex/grid, तय width/height या प्रतिशत)। पहला माप पूरा होने तक स्लाइडर कुछ भी रेंडर नहीं करता, फिर नापे गए आकार को भरता है और आगे के resize पर अपने-आप प्रतिक्रिया देता है।

तय साइज़ (मैन्युअल तरीका)

पिक्सेल-स्तर के नियंत्रण के लिए तय size prop पास करें। SSR के दौरान window.innerWidth उपलब्ध नहीं होता, इसलिए एक डिफ़ॉल्ट दें और mount पर उसे अपडेट करें:

tsx

सुझाव

ऐसा डिफ़ॉल्ट साइज़ चुनें जो आपके सबसे आम viewport से मेल खाए (जैसे mobile-first)। अगर असली viewport अलग है, तो hydration पर स्लाइडर तुरंत खुद को ठीक कर लेगा।

Overlay कंपोनेंट

ReelPlayerOverlay और LightboxOverlay isOpen={false} होने पर कुछ भी रेंडर नहीं करते, इसलिए ये डिफ़ॉल्ट रूप से SSR के लिए सुरक्षित हैं। ये अपना portal सिर्फ़ खुलने पर mount करते हैं (आम तौर पर क्लाइंट पर यूज़र की किसी क्रिया से):

tsx

Angular Universal / SSR

सभी Angular कंपोनेंट SSR के लिए सुरक्षित हैं। स्लाइडर कंट्रोलर ब्राउज़र API तक पहुँच को afterRenderEffect तक टाल देता है। Overlay कंपोनेंट isOpen=false होने पर कुछ भी रेंडर नहीं करते, इसलिए सर्वर रेंडरिंग के दौरान कोई markup नहीं बनाते।

typescript

Nuxt 3

ReelKit के Vue कंपोनेंट Nuxt 3 के साथ सीधे काम करते हैं। Reel ब्राउज़र API (टच इवेंट, ResizeObserver) इस्तेमाल करता है, इसलिए उसे <ClientOnly> कंपोनेंट में लपेटें या .client.vue suffix इस्तेमाल करें:

vue

Feed कंपोनेंट Reel को सामान्य तरीके से इस्तेमाल करता है:

vue

SSR के साथ रिस्पॉन्सिव साइज़

अपने-आप माप के लिए size prop छोड़ दें। Reel अपने parent के 100% आकार में फ़िट हो जाता है। SSR के दौरान यह खाली कंटेनर रेंडर करता है; hydration पर नापकर स्लाइड रेंडर करता है:

vue

Core को सीधे इस्तेमाल करना

किसी कस्टम फ़्रेमवर्क इंटीग्रेशन के लिए @reelkit/core सीधे इस्तेमाल करते समय आप कंट्रोलर सर्वर पर बना सकते हैं। attach() और observe() क्लाइंट पर कॉल करें:

typescript

सारांश

क्या सीधे काम करता है

सर्वर पर reelkit का कोई भी पैकेज import करना
SSR के दौरान स्लाइडर कंपोनेंट रेंडर करना (मान्य स्टैटिक HTML बनता है)
सर्वर पर कंट्रोलर बनाना
isOpen=false होने पर overlay कंपोनेंट

किन बातों का ध्यान रखें

अपने-आप माप के लिए size छोड़ दें, या viewport पर आधारित आकार इस्तेमाल करते समय एक डिफ़ॉल्ट दें
core को सीधे इस्तेमाल करते समय सर्वर पर attach()/observe() कॉल न करें