नए उत्पाद जोड़ते समय ई-कॉमर्स ऐप्स में Next.js 500 त्रुटि को ठीक करना

जब एक निर्बाध ई-कॉमर्स वर्कफ़्लो टूट जाता है

ई-कॉमर्स प्लेटफ़ॉर्म विकसित करने में कई चुनौतियाँ आती हैं, खासकर जब आधुनिक ढाँचे को एकीकृत किया जाता है अगला.जे.एस लारवेल जैसे मजबूत बैकएंड के साथ। अप्रत्याशित त्रुटियाँ उत्पन्न होने पर आप जिस निर्बाध अनुभव की कल्पना करते हैं वह बाधित हो सकता है। 500 आंतरिक सर्वर त्रुटि एक ऐसा दुःस्वप्न है जो घबराहट और भ्रम पैदा कर सकता है। 😟

हाल ही में, मुझे होस्ट किए गए एक प्रोजेक्ट में इसी सटीक समस्या का सामना करना पड़ा डिजिटल महासागर. शुरू में सब कुछ ठीक लग रहा था - मुखपृष्ठ पर बिना किसी रुकावट के नए उत्पाद प्रदर्शित थे। लेकिन जैसे ही मैंने किसी उत्पाद विवरण पृष्ठ पर नेविगेट करने या लिंक घटक का उपयोग करके किसी उत्पाद पर मँडराने की कोशिश की, खतरनाक 500 त्रुटि ने अपना सिर उठा लिया।

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

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

समाधान को समझना: कोड को तोड़ना

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

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

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

अंततः, त्रुटि प्रबंधन एक महत्वपूर्ण भूमिका निभाता है। जैसे आदेश नहीं मिला: सत्य सुनिश्चित करें कि अमान्य रूट एप्लिकेशन को क्रैश करने के बजाय उपयोगकर्ताओं को 404 पेज पर रीडायरेक्ट करें। इस बीच, सेटिंग कैश: 'नो-कैश' एपीआई कॉल के लिए गारंटी देता है कि नवीनतम डेटा हमेशा प्राप्त किया जाता है। ये सुविधाएं एप्लिकेशन को मजबूत और उपयोगकर्ता के अनुकूल बनाती हैं। एक होटल सूची को अपडेट करने की कल्पना करें लेकिन फिर भी पुरानी जानकारी देखें - यह उपयोगकर्ताओं को निराश करेगा! ये स्क्रिप्ट ऐसे परिदृश्यों को रोकती हैं, यह सुनिश्चित करते हुए कि नवीनतम उत्पाद विवरण हमेशा प्रदर्शित होते हैं।

const axios = require('axios');
const baseURL = 'https://your-backend-api.com';

async function fetchProductDetails(slug) {
  try {
    const response = await axios.get(`${baseURL}/api/product/${slug}`);
    return response.data;
  } catch (error) {
    console.error('Error fetching product details:', error.message);
    throw new Error('Could not fetch product details');
  }
}

module.exports = fetchProductDetails;
// Unit Test Example
const fetchProductDetails = require('./fetchProductDetails');
test('Should fetch valid product details', async () => {
  const data = await fetchProductDetails('test-product');
  expect(data).toHaveProperty('name');
});

export async function getStaticPaths() {
  try {
    const res = await fetch(`${baseURL}/api/all-product`, { cache: 'no-cache' });
    const { data } = await res.json();
    const paths = data.map(product => ({
      params: { product_slug: product.slug },
    }));
    return { paths, fallback: 'blocking' };
  } catch (error) {
    console.error('Error fetching paths:', error.message);
    return { paths: [], fallback: 'blocking' };
  }
}
// Add additional error handling for 500 responses

import { dehydrate, QueryClient } from '@tanstack/react-query';
import { fetchProductDetails } from './api/fetchProductDetails';

export async function getStaticProps(context) {
  const { product_slug } = context.params;
  const queryClient = new QueryClient();
  try {
    await queryClient.prefetchQuery(['productDetails', { product_slug }], () => fetchProductDetails(product_slug));
    return {
      props: { dehydratedState: dehydrate(queryClient) },
      revalidate: 10,
    };
  } catch (error) {
    console.error('Error prefetching product data:', error.message);
    return {
      notFound: true,
    };
  }
}
// Modularized prefetching ensures maintainability

वृद्धिशील स्थैतिक पुनर्जनन (आईएसआर) की गहराई से खोज

वृद्धिशील स्थैतिक पुनर्जनन (आईएसआर) एक शक्तिशाली विशेषता है अगला.जे.एस जो आपको संपूर्ण एप्लिकेशन का पुनर्निर्माण किए बिना मौजूदा पृष्ठों को अपडेट करने की अनुमति देता है। यह क्षमता बड़े पैमाने के ऐप्स के लिए आवश्यक है, विशेष रूप से ई-कॉमर्स प्लेटफ़ॉर्म के लिए जहां डेटा अक्सर बदलता रहता है, जैसे उत्पाद लिस्टिंग या मूल्य निर्धारण अपडेट। सेटिंग करके पुनः सत्यापित में संपत्ति getStaticProps, डेवलपर्स यह निर्धारित कर सकते हैं कि पृष्ठभूमि में कोई पृष्ठ कितनी बार पुन: उत्पन्न होता है। कल्पना कीजिए कि एक किताब की दुकान प्रतिदिन नए शीर्षक जोड़ रही है - आईएसआर यह सुनिश्चित करता है कि साइट पूर्ण पुनर्नियोजन के बिना अद्यतन रहे। 📚

आईएसआर का एक महत्वपूर्ण पहलू फॉलबैक राज्यों को प्रभावी ढंग से संभालना है। का उपयोग करते हुए fallback: 'blocking', जैसा कि पिछले उदाहरण में दिखाया गया है, यह सुनिश्चित करता है कि पहली बार एक्सेस करने पर नए या दुर्लभ मार्ग ऑन-डिमांड उत्पन्न होते हैं। यह प्रारंभिक निर्माण समय को कम करता है और हजारों पृष्ठों वाले अनुप्रयोगों के लिए विशेष रूप से उपयोगी है। वास्तविक दुनिया का एक उदाहरण एक यात्रा साइट हो सकती है जो कम-ज्ञात गंतव्यों के लिए गतिशील रूप से पृष्ठ तभी बनाती है जब उपयोगकर्ता उन्हें खोजते हैं, संसाधनों की बचत करते हैं और दक्षता सुनिश्चित करते हैं। ✈️

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