गैट्सबी रिएक्ट पर आधारित एक शक्तिशाली स्थिर साइट जनरेटर है जो डेवलपर्स को तेज और स्केलेबल वेबसाइट और एप्लिकेशन बनाने में सक्षम बनाता है। प्रभावी वेबसाइट बनाने का एक प्रमुख पहलू उपयोगकर्ताओं को कुशलतापूर्वक डेटा प्रदर्शित करना है। गैट्सबी में, ग्राफक्यूएल, रिएक्ट घटकों और हेडलेस सीएमएस, एपीआई और स्थानीय फ़ाइलों जैसे तीसरे पक्ष के डेटा स्रोतों के संयोजन का उपयोग करके डेटा प्रदर्शन प्राप्त किया जा सकता है।

इस लेख में, हम डेटा को प्रभावी ढंग से प्रस्तुत करने के लिए प्रमुख सिद्धांतों, रणनीतियों और सर्वोत्तम प्रथाओं पर ध्यान केंद्रित करते हुए गैट्सबी एप्लिकेशन में डेटा लाने और प्रदर्शित करने की प्रक्रिया का पता लगाएंगे।

1. गैट्सबी की डेटा परत को समझना

गैट्सबी की डेटा परत ग्राफक्यूएल के आसपास बनाई गई है, जो एक क्वेरी भाषा के रूप में कार्य करती है जो डेवलपर्स को बिल्कुल उसी डेटा का अनुरोध करने की अनुमति देती है जिसकी उन्हें आवश्यकता होती है। गैट्सबी ग्राफक्यूएल के साथ गहराई से एकीकृत होता है, जिससे मार्कडाउन फाइलों, जेएसओएन फाइलों या बाहरी एपीआई जैसे विभिन्न स्रोतों से डेटा खींचना और इसे रिएक्ट घटकों के भीतर प्रदर्शित करना आसान हो जाता है।

गैट्सबी में डेटा प्रदर्शित करने के चरणों में आम तौर पर शामिल हैं:

• बाहरी या आंतरिक स्रोत से डेटा प्राप्त करना
• ग्राफक्यूएल क्वेरीज़ का उपयोग करके डेटा को संरचित करना
• रिएक्ट घटकों का उपयोग करके डेटा प्रदर्शित करना

2. गैट्सबी में ग्राफक्यूएल क्वेरीज़ सेट करना

गैट्सबी एक अंतर्निहित ग्राफक्यूएल परत के साथ आता है जो आपको अपने डेटा स्रोतों तक आसानी से पहुंचने की अनुमति देता है। आप यहां से डेटा निकालने के लिए ग्राफक्यूएल क्वेरीज़ का उपयोग कर सकते हैं:

• स्थानीय फ़ाइलें जैसे मार्कडाउन या JSON
• कंटेंटफुल, स्ट्रैपी, या वर्डप्रेस जैसे सीएमएस प्लेटफॉर्म
• एपीआई और डेटाबेस

उदाहरण 1: मार्कडाउन डेटा को क्वेरी करना

मान लीजिए आप एक ब्लॉग बना रहे हैं, और आपने अपनी पोस्ट मार्कडाउन फ़ाइलों में लिखी हैं। आप गैट्सबी के गैट्सबी-ट्रांसफॉर्मर-रिमार्क प्लगइन का उपयोग करके मार्कडाउन फ़ाइलों को क्वेरी कर सकते हैं और सामग्री को अपने रिएक्ट घटकों में प्रदर्शित कर सकते हैं।

export const query = graphql`
  query BlogPostQuery {
    allMarkdownRemark {
      edges {
        node {
          frontmatter {
            title
            date
          }
          excerpt
        }
      }
    }
  }
`

फिर आप JSX का उपयोग करके अपने घटक में प्राप्त ब्लॉग पोस्ट प्रस्तुत कर सकते हैं:

const Blog = ({ data }) => (
  

    {data.allMarkdownRemark.edges.map(({ node }) => (
      

        
{node.frontmatter.title}
        
{node.excerpt}
        {node.frontmatter.date}
      
    ))}
  
)

उदाहरण 2: सीएमएस से डेटा क्वेरी करना (संतोषजनक)

यदि आप कंटेंटफुल जैसे हेडलेस सीएमएस का उपयोग कर रहे हैं, तो आप गैट्सबी-सोर्स-कंटेंटफुल प्लगइन इंस्टॉल करके अपने डेटा को क्वेरी कर सकते हैं, जो गैट्सबी को कंटेंटफुल के एपीआई के साथ एकीकृत करता है। यहां कंटेंटफुल से ब्लॉग पोस्ट लाने का एक उदाहरण दिया गया है:

export const query = graphql`
  query ContentfulBlogPostQuery {
    allContentfulBlogPost {
      edges {
        node {
          title
          publishedDate(formatString: "MMMM Do, YYYY")
          body {
            childMarkdownRemark {
              excerpt
            }
          }
        }
      }
    }
  }
`

अब आप डेटा को उसी तरह प्रस्तुत कर सकते हैं जैसे आप मार्कडाउन के साथ करते हैं:

const Blog = ({ data }) => (
  

    {data.allContentfulBlogPost.edges.map(({ node }) => (
      

        
{node.title}
        
{node.body.childMarkdownRemark.excerpt}
        {node.publishedDate}
      
    ))}
  
)

3. एपीआई के माध्यम से बाहरी डेटा प्रस्तुत करना

हालांकि गैट्सबी के स्थिर डेटा स्रोत (उदाहरण के लिए, मार्कडाउन, सीएमएस) बहुत अच्छे हैं, ऐसे मामले भी हो सकते हैं जहां आपको एपीआई से गतिशील रूप से बाहरी डेटा लाने की आवश्यकता हो सकती है। आप डेटा लाने और उसे क्लाइंट साइड पर प्रदर्शित करने के लिए रिएक्ट में यूज़इफेक्ट हुक का उपयोग कर सकते हैं। उदाहरण के लिए, यहां बताया गया है कि आप REST एंडपॉइंट या ग्राफक्यूएल सेवा जैसे बाहरी एपीआई से डेटा कैसे प्राप्त कर सकते हैं:

import React, { useEffect, useState } from "react";

const DataDisplay = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    // Fetch data from an external API
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(result => setData(result))
      .catch(error => console.error('Error fetching data:', error));
  }, []);

  return (
    

      {data.map(item => (
        

          
{item.name}
          
{item.description}
        
      ))}
    
  );
};

export default DataDisplay;

4. गैट्सबी के साथ डेटा डिस्प्ले को अनुकूलित करना

गैट्सबी डेटा प्रदर्शन को अनुकूलित करने और प्रदर्शन को बढ़ाने के कई तरीके प्रदान करता है:

पृष्ठ पर अंक लगाना

बड़े डेटासेट प्रदर्शित करते समय, पेज लोड समय को बेहतर बनाने और सामग्री को अधिक प्रबंधनीय बनाने के लिए डेटा को पेजिनेट करना आवश्यक है। गैट्सबी के क्रिएटपेज एपीआई का उपयोग पेजिनेटेड पेजों को गतिशील रूप से उत्पन्न करने के लिए किया जा सकता है।

const Blog = ({ pageContext, data }) => {
  const { currentPage, numPages } = pageContext;

  return (
    

      {data.allMarkdownRemark.edges.map(({ node }) => (
        

          
{node.frontmatter.title}
          
{node.excerpt}
        
      ))}

      
    
  );
};

लोड करते हुए आलस आना

आलसी लोडिंग एक ऐसी तकनीक है जो गैर-आवश्यक संसाधनों को लोड करने में देरी करती है, जिससे प्रदर्शन में सुधार होता है। उदाहरण के लिए, गैट्सबी की गैट्सबी-इमेज छवियों को अनुकूलित कर सकती है, और रिएक्ट.आलसी या गतिशील आयात घटकों की लोडिंग को विलंबित कर सकता है।

import { LazyLoadImage } from 'react-lazy-load-image-component';

स्थैतिक साइट निर्माण

गैट्सबी की निर्माण प्रक्रिया पृष्ठों को स्थिर HTML में प्री-रेंडर करती है, जिससे प्रदर्शन में उल्लेखनीय सुधार होता है। हालाँकि, यह आपको क्लाइंट-साइड रेंडरिंग का उपयोग करके रनटाइम पर गतिशील सामग्री लाने और इंजेक्ट करने की भी अनुमति देता है।

5. गैट्सबी के साथ डेटा विज़ुअलाइज़ेशन

डेटा को प्रभावी ढंग से प्रदर्शित करने में कभी-कभी चार्ट और ग्राफ़ जैसे विज़ुअलाइज़ेशन शामिल होते हैं। आप विज़ुअल डेटा प्रतिनिधित्व प्रस्तुत करने के लिए अपने गैट्सबी प्रोजेक्ट में चार्ट.जेएस या डी3.जेएस जैसी डेटा विज़ुअलाइज़ेशन लाइब्रेरी को एकीकृत कर सकते हैं।

import { Line } from "react-chartjs-2";

const data = {
  labels: ['January', 'February', 'March', 'April', 'May'],
  datasets: [
    {
      label: 'Sales',
      data: [65, 59, 80, 81, 56],
      fill: false,
      backgroundColor: 'rgb(75, 192, 192)',
      borderColor: 'rgba(75, 192, 192, 0.2)',
    },
  ],
};

const MyChart = () => (
  

    
Sales Over Time
    
  
);

निष्कर्ष

गैट्सबी में डेटा प्रदर्शित करना एक लचीली और कुशल प्रक्रिया है, ग्राफक्यूएल और इसके रिएक्ट-आधारित आर्किटेक्चर के साथ इसके एकीकरण के लिए धन्यवाद। चाहे आप स्थानीय फ़ाइलों, सीएमएस, या एपीआई से डेटा प्राप्त कर रहे हों, गैट्सबी समृद्ध डेटा प्रदर्शन क्षमताओं के साथ उच्च-प्रदर्शन वेब अनुप्रयोगों के निर्माण के लिए एक ठोस आधार प्रदान करता है। पेजिनेशन, आलसी लोडिंग और अन्य अनुकूलन तकनीकों को लागू करके, आप यह सुनिश्चित कर सकते हैं कि बड़े डेटासेट को संभालने पर भी आपकी गैट्सबी साइट तेज़ और प्रतिक्रियाशील बनी रहे।