React सर्व्हर कंपोनंट्स: स्ट्रीमिंग आणि सिलेक्टिव्ह हायड्रेशन - एक विस्तृत मार्गदर्शक

React सर्व्हर कंपोनंट्स (RSC) हे React ॲप्लिकेशन्स तयार करण्याच्या पद्धतीत एक महत्त्वाचा बदल दर्शवतात, ज्यामुळे कार्यक्षमता आणि वापरकर्त्याच्या अनुभवात लक्षणीय सुधारणा होते. कंपोनंट रेंडरिंग सर्व्हरवर हलवून, RSCs जलद इनिशियल पेज लोड्स, क्लायंट-साइड JavaScript मध्ये घट आणि सुधारित SEO सक्षम करतात. हा गाइड RSCs चा विस्तृत आढावा प्रदान करतो, स्ट्रीमिंग आणि सिलेक्टिव्ह हायड्रेशनच्या संकल्पना शोधतो आणि आधुनिक वेब डेव्हलपमेंटमध्ये त्यांचे प्रत्यक्ष उपयोजन दर्शवितो.

React सर्व्हर कंपोनंट्स काय आहेत?

पारंपारिकपणे, React ॲप्लिकेशन्स क्लायंट-साइड रेंडरिंग (CSR) वर मोठ्या प्रमाणावर अवलंबून असतात. ब्राउझर JavaScript बंडल्स डाउनलोड करते, ते कार्यान्वित करते आणि नंतर UI रेंडर करते. या प्रक्रियेमुळे विलंब होऊ शकतो, विशेषत: हळू नेटवर्क किंवा उपकरणांवर. सर्व्हर-साइड रेंडरिंग (SSR) ही समस्या सोडवण्यासाठी सादर केले गेले, जिथे इनिशियल HTML सर्व्हरवर रेंडर केले जाते आणि क्लायंटला पाठवले जाते, ज्यामुळे फर्स्ट कॉन्टेंटफुल पेंट (FCP) सुधारते. तथापि, SSR ला अजूनही क्लायंटवर संपूर्ण ॲप्लिकेशन हायड्रेट करणे आवश्यक आहे, जे computationally महाग असू शकते.

React सर्व्हर कंपोनंट्स एक वेगळा दृष्टिकोन देतात. ते तुमच्या ॲप्लिकेशनचे काही भाग JavaScript म्हणून क्लायंटला न पाठवता थेट सर्व्हरवर रेंडर करण्यास परवानगी देतात. यामुळे अनेक फायदे होतात:

• कमी क्लायंट-साइड JavaScript: डाउनलोड, पार्स आणि कार्यान्वित करण्यासाठी कमी JavaScript म्हणजे जलद इनिशियल पेज लोड्स आणि सुधारित कार्यक्षमता, विशेषत: कमी-शक्तीच्या उपकरणांवर.
• सुधारित कार्यक्षमता: सर्व्हर कंपोनंट्स थेट बॅकएंड रिसोर्सेस ॲक्सेस करू शकतात, क्लायंटकडून API कॉल्सची आवश्यकता कमी करतात आणि लेटन्सी कमी करतात.
• वर्धित SEO: सर्व्हर-रेंडर केलेले HTML शोध इंजिनद्वारे सहजपणे इंडेक्स केले जाते, ज्यामुळे SEO रँकिंग सुधारते.
• सरलीकृत डेव्हलपमेंट: डेव्हलपर्स जटिल डेटा फेचिंग स्ट्रॅटेजीशिवाय बॅकएंड रिसोर्सेससह अखंडपणे एकत्रित होणारे कंपोनंट्स लिहू शकतात.

सर्व्हर कंपोनंट्सची मुख्य वैशिष्ट्ये:

• केवळ सर्व्हरवर एक्झिक्युशन: सर्व्हर कंपोनंट्स केवळ सर्व्हरवर चालतात आणि window किंवा document सारखे ब्राउझर-विशिष्ट API वापरू शकत नाहीत.
• डायरेक्ट डेटा ॲक्सेस: सर्व्हर कंपोनंट्स डेटाबेस, फाइल सिस्टीम आणि इतर बॅकएंड रिसोर्सेस थेट ॲक्सेस करू शकतात.
• शून्य क्लायंट-साइड JavaScript: ते क्लायंट-साइड JavaScript बंडल आकारात योगदान देत नाहीत.
• डिक्लेरेटिव्ह डेटा फेचिंग: डेटा फेचिंग थेट कंपोनंटमध्ये हाताळले जाऊ शकते, ज्यामुळे कोड स्वच्छ आणि समजण्यास सोपा होतो.

स्ट्रीमिंग समजून घेणे

स्ट्रीमिंग हे एक तंत्र आहे जे सर्व्हरला संपूर्ण पृष्ठ रेंडर होण्याची प्रतीक्षा करण्याऐवजी UI चे भाग उपलब्ध होताच क्लायंटला पाठवण्याची परवानगी देते. हे ॲप्लिकेशनच्या कथित कार्यक्षमतेत लक्षणीय सुधारणा करते, विशेषत: एकाधिक डेटा डिपेंडेंसी असलेल्या जटिल पृष्ठांसाठी. व्हिडिओ स्ट्रीम पाहण्यासारखे याचा विचार करा - तुम्ही संपूर्ण व्हिडिओ डाउनलोड होण्याची प्रतीक्षा करण्याची गरज नाही; पुरेसा डेटा उपलब्ध होताच तुम्ही पाहणे सुरू करू शकता.

React सर्व्हर कंपोनंट्ससह स्ट्रीमिंग कसे कार्य करते:

1. सर्व्हर पृष्ठाचा इनिशियल शेल रेंडर करणे सुरू करतो, ज्यामध्ये स्टॅटिक कंटेंट आणि प्लेसहोल्डर कंपोनंट्स समाविष्ट असू शकतात.
2. डेटा उपलब्ध होताच, सर्व्हर पृष्ठाच्या वेगवेगळ्या भागांसाठी रेंडर केलेले HTML क्लायंटला स्ट्रीम करतो.
3. क्लायंट स्ट्रीम केलेल्या कंटेंटसह UI हळूहळू अपडेट करतो, जलद आणि अधिक प्रतिसाद देणारा वापरकर्ता अनुभव प्रदान करतो.

स्ट्रीमिंगचे फायदे:

• जलद टाइम टू फर्स्ट बाइट (TTFB): इनिशियल HTML क्लायंटला खूप लवकर पाठवले जाते, ज्यामुळे इनिशियल लोडिंग वेळ कमी होतो.
• सुधारित कथित कार्यक्षमता: वापरकर्त्यांना लवकरच स्क्रीनवर कंटेंट दिसू लागतो, जरी संपूर्ण पृष्ठ पूर्णपणे रेंडर झाले नसले तरी.
• उत्तम वापरकर्ता अनुभव: स्ट्रीमिंग अधिक आकर्षक आणि प्रतिसाद देणारा वापरकर्ता अनुभव तयार करते.

स्ट्रीमिंगचे उदाहरण:

एका सोशल मीडिया फीडची कल्पना करा. स्ट्रीमिंगसह, मूलभूत लेआउट आणि पहिले काही पोस्ट रेंडर केले जाऊ शकतात आणि त्वरित क्लायंटला पाठवले जाऊ शकतात. जसा सर्व्हर डेटाबेसवरून अधिक पोस्ट फेच करतो, तसतसे ते क्लायंटला स्ट्रीम केले जातात आणि फीडमध्ये जोडले जातात. हे वापरकर्त्यांना सर्व पोस्ट लोड होण्याची प्रतीक्षा न करता फीड लवकर ब्राउझ करण्यास अनुमती देते.

सिलेक्टिव्ह हायड्रेशन

हायड्रेशन ही सर्व्हर-रेंडर केलेले HTML क्लायंटवर इंटरॲक्टिव्ह बनवण्याची प्रक्रिया आहे. पारंपारिक SSR मध्ये, संपूर्ण ॲप्लिकेशन हायड्रेट केले जाते, जी एक वेळखाऊ प्रक्रिया असू शकते. दुसरीकडे, सिलेक्टिव्ह हायड्रेशन तुम्हाला फक्त इंटरॲक्टिव्ह असणे आवश्यक असलेले कंपोनंट्स हायड्रेट करण्याची परवानगी देते, ज्यामुळे क्लायंट-साइड JavaScript आणखी कमी होते आणि कार्यक्षमता सुधारते. हे स्टॅटिक आणि इंटरॲक्टिव्ह कंटेंटच्या मिश्रणासह पृष्ठांसाठी विशेषतः उपयुक्त आहे.

सिलेक्टिव्ह हायड्रेशन कसे कार्य करते:

1. सर्व्हर संपूर्ण पृष्ठासाठी इनिशियल HTML रेंडर करतो.
2. क्लायंट फक्त इंटरॲक्टिव्ह कंपोनंट्स, जसे की बटणे, फॉर्म आणि इंटरॲक्टिव्ह घटक निवडकपणे हायड्रेट करतो.
3. स्टॅटिक कंपोनंट्स अनहायड्रेटेड राहतात, ज्यामुळे क्लायंटवर कार्यान्वित केलेल्या JavaScript ची मात्रा कमी होते.

सिलेक्टिव्ह हायड्रेशनचे फायदे:

• कमी क्लायंट-साइड JavaScript: कार्यान्वित करण्यासाठी कमी JavaScript म्हणजे जलद इनिशियल पेज लोड्स आणि सुधारित कार्यक्षमता.
• सुधारित टाइम टू इंटरॲक्टिव्ह (TTI): पृष्ठ पूर्णपणे इंटरॲक्टिव्ह होण्यासाठी लागणारा वेळ कमी होतो, ज्यामुळे उत्तम वापरकर्ता अनुभव मिळतो.
• ऑप्टिमाइज्ड रिसोर्स युटिलायझेशन: क्लायंटचे रिसोर्सेस अधिक कार्यक्षमतेने वापरले जातात, कारण फक्त आवश्यक कंपोनंट्स हायड्रेट केले जातात.

सिलेक्टिव्ह हायड्रेशनचे उदाहरण:

एका ई-कॉमर्स उत्पादन पृष्ठाचा विचार करा. उत्पादन वर्णन, प्रतिमा आणि रेटिंग्ज सामान्यत: स्टॅटिक कंटेंट असतात. तथापि, "ॲड टू कार्ट" बटण आणि क्वांटिटी सिलेक्टर इंटरॲक्टिव्ह आहेत. सिलेक्टिव्ह हायड्रेशनसह, फक्त "ॲड टू कार्ट" बटण आणि क्वांटिटी सिलेक्टर हायड्रेट करणे आवश्यक आहे, तर उर्वरित पृष्ठ अनहायड्रेटेड राहते, ज्यामुळे लोडिंगचा वेग वाढतो आणि कार्यक्षमता सुधारते.

स्ट्रीमिंग आणि सिलेक्टिव्ह हायड्रेशन एकत्र करणे

React सर्व्हर कंपोनंट्सची खरी शक्ती स्ट्रीमिंग आणि सिलेक्टिव्ह हायड्रेशन एकत्र करण्यात आहे. इनिशियल HTML स्ट्रीम करून आणि फक्त इंटरॲक्टिव्ह कंपोनंट्स निवडकपणे हायड्रेट करून, तुम्ही कार्यक्षमतेत लक्षणीय सुधारणा करू शकता आणि खरोखर प्रतिसाद देणारा वापरकर्ता अनुभव तयार करू शकता.

एकाधिक विजेट्स असलेल्या डॅशबोर्ड ॲप्लिकेशनची कल्पना करा. स्ट्रीमिंगसह, डॅशबोर्डचे मूलभूत लेआउट रेंडर केले जाऊ शकते आणि त्वरित क्लायंटला पाठवले जाऊ शकते. जसा सर्व्हर प्रत्येक विजेटसाठी डेटा फेच करतो, तसतसे ते रेंडर केलेले HTML क्लायंटला स्ट्रीम करते आणि क्लायंट फक्त इंटरॲक्टिव्ह विजेट्स, जसे की चार्ट आणि डेटा टेबल्स निवडकपणे हायड्रेट करतो. हे वापरकर्त्यांना सर्व विजेट्स लोड आणि हायड्रेट होण्याची प्रतीक्षा न करता डॅशबोर्डशी लवकर संवाद साधण्यास अनुमती देते.

Next.js सह प्रत्यक्ष अंमलबजावणी

Next.js हे एक लोकप्रिय React फ्रेमवर्क आहे जे React सर्व्हर कंपोनंट्स, स्ट्रीमिंग आणि सिलेक्टिव्ह हायड्रेशनसाठी अंगभूत सपोर्ट पुरवते, ज्यामुळे तुमच्या प्रोजेक्टमध्ये हे तंत्रज्ञान लागू करणे सोपे होते. Next.js 13 आणि त्यानंतरच्या आवृत्त्यांनी RSCs ला एक मुख्य वैशिष्ट्य म्हणून स्वीकारले आहे.

Next.js मध्ये सर्व्हर कंपोनंट तयार करणे:

डीफॉल्टनुसार, Next.js प्रोजेक्टच्या app डिरेक्टरीमधील कंपोनंट्सना सर्व्हर कंपोनंट्स मानले जाते. तुम्हाला कोणतीही विशेष डायरेक्टिव्ह किंवा ॲनोटेशन जोडण्याची आवश्यकता नाही. येथे एक उदाहरण आहे:

            // app/components/MyServerComponent.js
import { getData } from './data';

async function MyServerComponent() {
  const data = await getData();

  return (
    <div>
      <h2>Data from Server</h2>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default MyServerComponent;

            

              
                Copy
              
            
          

या उदाहरणामध्ये, MyServerComponent getData फंक्शन वापरून थेट सर्व्हरवरून डेटा फेच करते. हा कंपोनंट सर्व्हरवर रेंडर केला जाईल आणि परिणामी HTML क्लायंटला पाठवला जाईल.

Next.js मध्ये क्लायंट कंपोनंट तयार करणे:

क्लायंट कंपोनंट तयार करण्यासाठी, तुम्हाला फाइलच्या शीर्षस्थानी "use client" डायरेक्टिव्ह जोडण्याची आवश्यकता आहे. हे Next.js ला क्लायंटवर कंपोनंट रेंडर करण्यास सांगते. क्लायंट कंपोनंट्स ब्राउझर-विशिष्ट API वापरू शकतात आणि वापरकर्त्याच्या संवादांना हाताळू शकतात.

            // app/components/MyClientComponent.js
"use client";

import { useState } from 'react';

function MyClientComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default MyClientComponent;

            

              
                Copy
              
            
          

या उदाहरणामध्ये, MyClientComponent कंपोनंटची स्थिती व्यवस्थापित करण्यासाठी useState हुक वापरते. हा कंपोनंट क्लायंटवर रेंडर केला जाईल आणि वापरकर्ता त्याच्याशी संवाद साधू शकतो.

सर्व्हर आणि क्लायंट कंपोनंट्स मिसळणे:

तुम्ही तुमच्या Next.js ॲप्लिकेशनमध्ये सर्व्हर आणि क्लायंट कंपोनंट्स मिसळू शकता. सर्व्हर कंपोनंट्स क्लायंट कंपोनंट्स इम्पोर्ट आणि रेंडर करू शकतात, परंतु क्लायंट कंपोनंट्स थेट सर्व्हर कंपोनंट्स इम्पोर्ट करू शकत नाहीत. सर्व्हर कंपोनंटवरून क्लायंट कंपोनंटमध्ये डेटा पास करण्यासाठी, तुम्ही तो प्रॉप्स म्हणून पास करू शकता.

            // app/page.js
import MyServerComponent from './components/MyServerComponent';
import MyClientComponent from './components/MyClientComponent';

async function Page() {
  return (
    <div>
      <MyServerComponent />
      <MyClientComponent />
    </div>
  );
}

export default Page;

            

              
                Copy
              
            
          

या उदाहरणामध्ये, Page कंपोनंट एक सर्व्हर कंपोनंट आहे जो MyServerComponent आणि MyClientComponent दोन्ही रेंडर करतो.

सर्व्हर कंपोनंट्समध्ये डेटा फेचिंग:

सर्व्हर कंपोनंट्स क्लायंटकडून API कॉल्सची आवश्यकता न घेता थेट बॅकएंड रिसोर्सेस ॲक्सेस करू शकतात. तुम्ही कंपोनंटमध्ये थेट डेटा फेच करण्यासाठी async/await सिंटॅक्स वापरू शकता.

            // app/components/MyServerComponent.js

async function getData() {
  const res = await fetch('https://api.example.com/data');
  if (!res.ok) {
    throw new Error('Failed to fetch data');
  }
  return res.json();
}

async function MyServerComponent() {
  const data = await getData();

  return (
    <div>
      <h2>Data from Server</h2>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default MyServerComponent;

            

              
                Copy
              
            
          

या उदाहरणामध्ये, getData फंक्शन बाह्य API मधून डेटा फेच करते. MyServerComponent getData फंक्शनच्या निकालाची प्रतीक्षा करते आणि UI मध्ये डेटा रेंडर करते.

वास्तविक जगातील उदाहरणे आणि वापर प्रकरणे

React सर्व्हर कंपोनंट्स, स्ट्रीमिंग आणि सिलेक्टिव्ह हायड्रेशन खालील प्रकारच्या ॲप्लिकेशन्ससाठी विशेषतः योग्य आहेत:

• ई-कॉमर्स वेबसाइट्स: उत्पादन पृष्ठे, श्रेणी पृष्ठे आणि शॉपिंग कार्ट्स जलद इनिशियल पेज लोड्स आणि सुधारित कार्यक्षमतेचा लाभ घेऊ शकतात.
• कंटेंट-हेवी वेबसाइट्स: ब्लॉग, न्यूज वेबसाइट्स आणि डॉक्युमेंटेशन साइट्स जलद कंटेंट वितरीत करण्यासाठी आणि SEO सुधारण्यासाठी स्ट्रीमिंगचा लाभ घेऊ शकतात.
• डॅशबोर्ड आणि ॲडमिन पॅनेल्स: एकाधिक विजेट्स असलेले जटिल डॅशबोर्ड क्लायंट-साइड JavaScript कमी करण्यासाठी आणि इंटरॲक्टिव्हिटी सुधारण्यासाठी सिलेक्टिव्ह हायड्रेशनचा लाभ घेऊ शकतात.
• सोशल मीडिया प्लॅटफॉर्म: फीड्स, प्रोफाइल्स आणि टाइमलाइन कंटेंट हळूहळू वितरीत करण्यासाठी आणि वापरकर्ता अनुभव सुधारण्यासाठी स्ट्रीमिंग वापरू शकतात.

उदाहरण 1: आंतरराष्ट्रीय ई-कॉमर्स वेबसाइट

जागतिक स्तरावर उत्पादने विकणारी ई-कॉमर्स वेबसाइट वापरकर्त्याच्या स्थानावर आधारित डेटाबेसवरून थेट उत्पादन तपशील फेच करण्यासाठी RSCs वापरू शकते. पृष्ठाचे स्टॅटिक भाग (उत्पादन वर्णन, प्रतिमा) सर्व्हरवर रेंडर केले जातात, तर इंटरॲक्टिव्ह घटक (कार्टमध्ये जोडा बटण, क्वांटिटी सिलेक्टर) क्लायंटवर हायड्रेट केले जातात. स्ट्रीमिंग हे सुनिश्चित करते की वापरकर्त्याला मूलभूत उत्पादन माहिती त्वरित दिसते, तर उर्वरित कंटेंट पार्श्वभूमीवर लोड होतो.

उदाहरण 2: जागतिक बातम्या प्लॅटफॉर्म

जागतिक स्तरावरील प्रेक्षकांना लक्ष्य करणारे न्यूज प्लॅटफॉर्म वापरकर्त्याची भाषा आणि प्रदेशानुसार वेगवेगळ्या स्रोतांकडून बातम्यांचे लेख फेच करण्यासाठी RSCs वापरू शकते. स्ट्रीमिंग वेबसाइटला प्रारंभिक पृष्ठ लेआउट आणि हेडलाइन्स त्वरीत वितरीत करण्यास अनुमती देते, तर संपूर्ण लेख पार्श्वभूमीवर लोड होतात. कमेंट विभाग आणि सोशल शेअरिंग बटणे यांसारख्या इंटरॲक्टिव्ह घटकांना हायड्रेट करण्यासाठी सिलेक्टिव्ह हायड्रेशन वापरले जाऊ शकते.

React सर्व्हर कंपोनंट्स वापरण्यासाठी सर्वोत्तम पद्धती

React सर्व्हर कंपोनंट्स, स्ट्रीमिंग आणि सिलेक्टिव्ह हायड्रेशनचा जास्तीत जास्त फायदा घेण्यासाठी, खालील सर्वोत्तम पद्धतींचा विचार करा:

• सर्व्हर आणि क्लायंट कंपोनंट्स ओळखा: तुमच्या ॲप्लिकेशनचे काळजीपूर्वक विश्लेषण करा आणि कोणते कंपोनंट्स सर्व्हरवर रेंडर केले जाऊ शकतात आणि कोणते क्लायंटवर रेंडर करणे आवश्यक आहे ते ठरवा.
• डेटा फेचिंग ऑप्टिमाइझ करा: सर्व्हरवरून क्लायंटकडे हस्तांतरित केलेल्या डेटाची मात्रा कमी करण्यासाठी कार्यक्षम डेटा फेचिंग तंत्रांचा वापर करा.
• कॅशिंगचा लाभ घ्या: सर्व्हरवरील लोड कमी करण्यासाठी आणि कार्यक्षमता सुधारण्यासाठी कॅशिंग स्ट्रॅटेजी लागू करा.
• कार्यक्षमतेचे निरीक्षण करा: कार्यक्षमतेतील अडचणी ओळखण्यासाठी आणि त्यांचे निराकरण करण्यासाठी कार्यप्रदर्शन मॉनिटरिंग टूल्स वापरा.
• प्रोग्रेसिव्ह एन्हांसमेंट: JavaScript अक्षम असले तरीही तुमचे ॲप्लिकेशन कार्य करण्यासाठी डिझाइन करा, सर्व वापरकर्त्यांना मूलभूत स्तरावरील कार्यक्षमता प्रदान करा.

आव्हाने आणि विचार

React सर्व्हर कंपोनंट्स महत्त्वपूर्ण फायदे देत असले तरी, लक्षात ठेवण्यासाठी काही आव्हाने आणि विचार देखील आहेत:

• गुंतागुंत: RSCs लागू केल्याने तुमच्या ॲप्लिकेशनमध्ये गुंतागुंत वाढू शकते, विशेषत: जर तुम्ही सर्व्हर-साइड रेंडरिंग आणि स्ट्रीमिंगशी परिचित नसाल तर.
• डीबगिंग: पारंपारिक क्लायंट-साइड कंपोनंट्स डीबग करण्यापेक्षा RSCs डीबग करणे अधिक कठीण असू शकते, कारण तुम्हाला सर्व्हर आणि क्लायंट दोन्हीचा विचार करणे आवश्यक आहे.
• टूलिंग: RSCs च्या आसपासचे टूलिंग अजूनही विकसित होत आहे, त्यामुळे तुम्हाला काही मर्यादा किंवा समस्या येऊ शकतात.
• शिकण्याचा वक्र: RSCs प्रभावीपणे समजून घेण्यासाठी आणि लागू करण्यासाठी शिकण्याचा वक्र आहे.

निष्कर्ष

React सर्व्हर कंपोनंट्स, स्ट्रीमिंग आणि सिलेक्टिव्ह हायड्रेशन वेब डेव्हलपमेंटमध्ये महत्त्वपूर्ण प्रगती दर्शवतात. कंपोनंट रेंडरिंग सर्व्हरवर हलवून, हे तंत्रज्ञान जलद इनिशियल पेज लोड्स, कमी क्लायंट-साइड JavaScript आणि सुधारित SEO सक्षम करतात. लक्षात ठेवण्यासाठी काही आव्हाने आणि विचार असले तरी, RSCs चे फायदे निर्विवाद आहेत आणि ते React इकोसिस्टमचा एक मानक भाग बनण्याची शक्यता आहे. हे तंत्रज्ञान स्वीकारून, तुम्ही जलद, अधिक कार्यक्षम आणि अधिक वापरकर्ता-अनुकूल वेब ॲप्लिकेशन्स तयार करू शकता.

पुढील संसाधने

• React 18 अधिकृत घोषणा
• Next.js ॲप राउटर डॉक्युमेंटेशन
• React सर्व्हर कंपोनंट्स - Patterns.dev