புதிய தயாரிப்புகளைச் சேர்க்கும்போது E-Commerce ஆப்ஸில் Next.js 500 பிழையைச் சரிசெய்தல்

தடையற்ற ஈ-காமர்ஸ் பணிப்பாய்வு முறிந்தால்

ஈ-காமர்ஸ் தளத்தை உருவாக்குவது அதன் சொந்த சவால்களைக் கொண்டுவருகிறது, குறிப்பாக நவீன கட்டமைப்புகளை ஒருங்கிணைக்கும் போது Next.js லாராவெல் போன்ற வலுவான பின்தளங்களுடன். எதிர்பாராத பிழைகள் ஏற்படும் போது நீங்கள் கற்பனை செய்யும் தடையற்ற அனுபவம் தடைபடலாம். 500 இன்டர்னல் சர்வர் பிழை என்பது பீதியையும் குழப்பத்தையும் ஏற்படுத்தக்கூடிய ஒரு கனவு. 😟

சமீபத்தில், நான் ஹோஸ்ட் செய்யப்பட்ட ஒரு திட்டத்தில் இந்த சரியான சிக்கலை எதிர்கொண்டேன் டிஜிட்டல் பெருங்கடல். ஆரம்பத்தில் எல்லாம் நன்றாகத் தெரிந்தது-முகப்புப்பக்கம் புதிய தயாரிப்புகளை விக்கல்கள் இல்லாமல் காட்டியது. ஆனால் நான் தயாரிப்பு விவரம் பக்கத்திற்கு செல்ல முயற்சித்த அல்லது இணைப்பு கூறுகளைப் பயன்படுத்தி ஒரு தயாரிப்பின் மீது வட்டமிட முயற்சித்த தருணத்தில், பயங்கரமான 500 பிழை அதன் தலையை உயர்த்தியது.

இந்த சிக்கலை குழப்பமடையச் செய்தது அதன் முரண்பாடு. உள்நாட்டில், உற்பத்தி மற்றும் காட்சி சூழல்களைப் பிரதிபலிக்கும் போது கூட, பயன்பாடு குறைபாடற்ற முறையில் வேலை செய்தது. ஸ்டேஜிங் வரிசைப்படுத்தலும் நன்றாக வேலை செய்தது, ஆனால் உற்பத்தி? அங்குதான் அது தோல்வியடைந்தது. இந்த மர்மங்கள் டெவலப்பரின் பொறுமை மற்றும் சரிசெய்தல் திறன்களை சோதிக்கலாம்.

ஒரு சாலைப் பயணத்தின் போது சரியாக ஓடிய பிறகு என் கார் விவரிக்க முடியாதபடி பழுதடைந்த நேரத்தை இது எனக்கு நினைவூட்டியது. பயன்பாட்டைப் பிழைத்திருத்தம் செய்வது போல், எரிபொருள், டயர்கள் மற்றும் அடைபட்ட வடிகட்டிகள் போன்ற தெளிவற்ற சிக்கல்கள் அனைத்தையும் சரிபார்க்கலாம். இதேபோல், இந்த பிழையை தீர்ப்பதற்கு ஒரு முறையான அணுகுமுறை மற்றும் நிறைய சோதனை மற்றும் பிழை தேவைப்பட்டது. 🚗💻

தீர்வைப் புரிந்துகொள்வது: குறியீட்டை உடைத்தல்

வழங்கப்பட்ட ஸ்கிரிப்டுகள் பொதுவான சிக்கலைக் குறிப்பிடுகின்றன Next.js பயன்பாடுகள்: டைனமிக் ரூட்டிங் மற்றும் ISR (அதிகரிக்கும் நிலையான மீளுருவாக்கம்) சவால்கள். முதல் ஸ்கிரிப்ட் ரியாக் வினலைப் பயன்படுத்துகிறது prefetchQuery பக்கங்களை ரெண்டரிங் செய்வதற்கு முன் தரவைப் பெறுவதற்கும் தேக்குவதற்கும் முறை. பயனர் தயாரிப்பு விவரம் பக்கத்திற்குச் செல்லும்போது தயாரிப்பு விவரங்கள் கிடைப்பதை இது உறுதிசெய்கிறது, இயக்க நேரத்தைப் பெறுவதில் தாமதத்தைத் தடுக்கிறது. வரிசையில் காத்திருப்பதைத் தவிர்க்க திரைப்பட டிக்கெட்டை முன்கூட்டியே ஆர்டர் செய்வது போன்றது. 🎟️ இந்த செயலூக்கமான பெறுதல் பக்க சுமை நேரங்களைக் குறைத்து பயனர் அனுபவத்தை மேம்படுத்துகிறது.

இரண்டாவது எழுத்தில், தி getStaticPaths செயல்பாடு பின்தளத்தில் API ஐப் பயன்படுத்தி தயாரிப்புகளுக்கான வழிகளை மாறும் வகையில் உருவாக்குகிறது. குறிப்பிடுவதன் மூலம் பின்னடைவு: 'தடுத்தல்', புதிய தயாரிப்புகள் முதல் முறையாக அணுகும்போது தேவைக்கேற்ப வழங்கப்படுவதை இது உறுதி செய்கிறது. ஆயிரக்கணக்கான தயாரிப்புகளைக் கொண்ட ஈ-காமர்ஸ் தளங்களுக்கு இந்த முறை முக்கியமானது, ஏனெனில் இது உருவாக்க நேரத்தில் சாத்தியமான அனைத்து பக்கங்களையும் முன்-ரெண்டர் செய்வதைத் தவிர்க்கிறது. உங்கள் சமையலறையை ஒவ்வொரு சுவையுடனும் முன்பே நிரப்புவதற்குப் பதிலாக யாராவது ஆர்டர் செய்தால் குக்கீகளை பேக்கிங் செய்வதாக நினைத்துப் பாருங்கள். 🍪

மூன்றாவது ஸ்கிரிப்ட்டின் ஒருங்கிணைப்பு நீரிழப்பு உள்ளே getStaticProps சேவையக பக்க தரவுகளை வரிசைப்படுத்தப்பட்ட நிலையாக முன்பகுதிக்கு அனுப்ப அனுமதிக்கிறது. இது SEO க்கு மிகவும் பயனுள்ளதாக இருக்கும், ஏனெனில் இது ISR வழியாக கொடுக்கப்பட்ட பக்கங்கள் இன்னும் தேடுபொறிகள் வலம் வருவதற்கு தேவையான மெட்டாடேட்டாவைக் கொண்டிருப்பதை உறுதி செய்கிறது. இது வீட்டில் ஒரு உணவைத் தயாரிப்பதற்கும், டெலிவரிக்காக அதை பேக்கேஜிங் செய்வதற்கும் ஒப்பானது, இதனால் அது கவர்ச்சிகரமானதாகவும், வந்தவுடன் சாப்பிட தயாராக இருக்கும். 🥡 இது தேடுபொறிகளில் பயன்பாட்டின் தெரிவுநிலை மற்றும் செயல்திறனை மேம்படுத்துகிறது.

இறுதியாக, பிழை கையாளுதல் ஒரு முக்கிய பங்கு வகிக்கிறது. போன்ற கட்டளைகள் கிடைக்கவில்லை: உண்மை தவறான வழிகள், பயன்பாட்டை செயலிழக்கச் செய்வதற்குப் பதிலாக, பயனர்களை 404 பக்கத்திற்குத் திருப்பி விடுகின்றன என்பதை உறுதிப்படுத்தவும். இதற்கிடையில், அமைத்தல் கேச்: 'நோ-கேச்' API அழைப்புகளுக்கு சமீபத்திய தரவு எப்பொழுதும் பெறப்படும் என்பதற்கு உத்தரவாதம் அளிக்கிறது. இந்த அம்சங்கள் பயன்பாட்டை வலுவாகவும் பயனர் நட்புடனும் ஆக்குகின்றன. ஹோட்டல் பட்டியலைப் புதுப்பித்தாலும், காலாவதியான தகவலைப் பார்ப்பதை கற்பனை செய்து பாருங்கள் - இது பயனர்களை ஏமாற்றும்! இந்த ஸ்கிரிப்டுகள் இதுபோன்ற காட்சிகளைத் தடுக்கின்றன, சமீபத்திய தயாரிப்பு விவரங்கள் எப்போதும் காட்டப்படுவதை உறுதி செய்கிறது.

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

அதிகரிக்கும் நிலையான மீளுருவாக்கத்தை (ISR) ஆழமாக ஆராய்தல்

அதிகரிக்கும் நிலையான மீளுருவாக்கம் (ISR) ஒரு சக்திவாய்ந்த அம்சமாகும் Next.js முழு பயன்பாட்டையும் மீண்டும் உருவாக்காமல் இருக்கும் பக்கங்களை புதுப்பிக்க இது உங்களை அனுமதிக்கிறது. பெரிய அளவிலான பயன்பாடுகளுக்கு, குறிப்பாக தயாரிப்பு பட்டியல்கள் அல்லது விலையிடல் புதுப்பிப்புகள் போன்ற தரவு அடிக்கடி மாறும் மின்-வணிக தளங்களுக்கு இந்த திறன் அவசியம். அமைப்பதன் மூலம் மறுமதிப்பீடு உள்ள சொத்து getStaticProps, பின்னணியில் ஒரு பக்கம் எவ்வளவு அடிக்கடி மீண்டும் உருவாக்கப்படுகிறது என்பதை டெவலப்பர்கள் தீர்மானிக்க முடியும். ஒரு புத்தகக் கடை தினசரி புதிய தலைப்புகளைச் சேர்ப்பதை கற்பனை செய்து பாருங்கள் - ஐஎஸ்ஆர் தளம் முழுவதுமாக மறுபயன்பாடு இல்லாமல் புதுப்பிக்கப்படுவதை உறுதி செய்கிறது. 📚

ISR இன் ஒரு முக்கியமான அம்சம் பின்வாங்கும் நிலைகளை திறம்பட கையாள்வது. பயன்படுத்தி fallback: 'blocking', முந்தைய எடுத்துக்காட்டில் காட்டப்பட்டுள்ளபடி, புதிய அல்லது அரிய வழிகள் முதல் முறையாக அணுகும்போது தேவைக்கேற்ப உருவாக்கப்படுவதை உறுதி செய்கிறது. இது ஆரம்ப கட்ட நேரத்தை குறைக்கிறது மற்றும் ஆயிரக்கணக்கான பக்கங்களைக் கொண்ட பயன்பாடுகளுக்கு குறிப்பாக பயனுள்ளதாக இருக்கும். ஒரு நிஜ உலக உதாரணம், பயனர்கள் தேடும் போது, ​​வளங்களைச் சேமித்து, செயல்திறனை உறுதி செய்யும் போது, ​​குறைவான அறியப்படாத இடங்களுக்கான பக்கங்களை மாறும் வகையில் உருவாக்கும் பயணத் தளமாக இருக்கலாம். ✈️

ISR இன் மற்றொரு சவால் பிழை மேலாண்மை. ஒரு பின்தள API தரவை வழங்கத் தவறினால், ISR ஆனது உடைந்த பக்கத்தை உருவாக்கலாம். போன்ற செயல்பாடுகளில் சரியான பிழை கையாளுதலை இணைப்பதன் மூலம் fetch மற்றும் திரும்பும் notFound: true இதுபோன்ற சந்தர்ப்பங்களில், டெவலப்பர்கள் இந்த சூழ்நிலையைத் தடுக்கலாம். இந்த அணுகுமுறை பயனர் அனுபவத்தைப் பாதுகாப்பது மட்டுமல்லாமல், உடைந்த பக்கங்களை அட்டவணைப்படுத்தும் தேடுபொறிகளிலிருந்து எஸ்சிஓ அபராதங்களையும் தவிர்க்கிறது. இந்த நடைமுறைகள் செயல்திறன் மற்றும் நம்பகத்தன்மையை பராமரிக்கும் போது பயன்பாடுகளை அளவிடுவதற்கான ஒரு முக்கிய கருவியாக ISR ஆக்குகிறது.