Next.js 500 kļūdas novēršana e-komercijas lietotnēs, pievienojot jaunus produktus

Kad nepārtraukta e-komercijas darbplūsma pārtrūkst

E-komercijas platformas izstrāde rada savus izaicinājumus, jo īpaši, integrējot modernas sistēmas, piemēram, Next.js ar izturīgām aizmugurprogrammām, piemēram, Laravel. Jūsu iecerētā nevainojamā pieredze var tikt traucēta, ja rodas neparedzētas kļūdas. 500 iekšējā servera kļūda ir viens no šādiem murgiem, kas var izraisīt paniku un apjukumu. 😟

Nesen es saskāros ar šo problēmu projektā, kas tika mitināts vietnē Digitālais okeāns. Sākumā viss šķita kārtībā — mājaslapā bez žagas tika rādīti jauni produkti. Taču brīdī, kad mēģināju pāriet uz produkta detalizētas informācijas lapu vai virzīju kursoru virs produkta, izmantojot komponentu Saite, baiļotā kļūda 500 parādījās.

Tas, kas šo jautājumu padarīja mulsinošu, bija tā nekonsekvence. Lokāli lietotne darbojās nevainojami, pat atdarinot ražošanas un iestudēšanas vidi. Iestudēšanas izvietošana arī darbojās labi, bet ražošana? Lūk, kur tas neizdevās. Šie noslēpumi var pārbaudīt izstrādātāja pacietību un problēmu novēršanas prasmes.

Tas man atgādināja laiku, kad mana automašīna neizskaidrojami saplīsa pēc perfektas braukšanas ceļa brauciena laikā. Tāpat kā lietotnes atkļūdošana, jūs pārbaudāt visu — degvielu, riepas un pat neskaidras problēmas, piemēram, aizsērējušus filtrus. Tāpat šīs kļūdas atrisināšana prasīja metodisku pieeju un daudz izmēģinājumu un kļūdu. 🚗💻

Risinājuma izpratne: koda sadalīšana

Nodrošinātie skripti novērš bieži sastopamu problēmu Next.js lietojumprogrammas: dinamiskā maršrutēšana un ISR (Incremental Static Regeneration) izaicinājumi. Pirmais skripts izmanto React Query prefetchQuery metode datu iegūšanai un kešatmiņai pirms lapu renderēšanas. Tas nodrošina, ka produkta informācija ir pieejama, kad lietotājs pāriet uz produkta informācijas lapu, novēršot izpildlaika ielādes aizkavi. Tas ir tāpat kā iepriekšēja kinobiļetes pasūtīšana, lai izvairītos no gaidīšanas rindā. 🎟️ Šī proaktīvā ielāde samazina lapas ielādes laiku un uzlabo lietotāja pieredzi.

Otrajā skriptā getStaticPaths funkcija dinamiski ģenerē maršrutus produktiem, izmantojot aizmugursistēmas API. Norādot atkāpšanās: “bloķēšana”, tas nodrošina, ka jauni produkti tiek pasniegti pēc pieprasījuma, kad tiem tiek piekļūts pirmo reizi. Šī metode ir ļoti svarīga e-komercijas platformām ar tūkstošiem produktu, jo tā ļauj izvairīties no visu iespējamo lapu iepriekšējas renderēšanas izveides laikā. Uztveriet to kā tikai cepumu cepšanu, ja kāds tos pasūta, nevis iepriekš piepildiet savu virtuvi ar katru garšu. 🍪

Trešā skripta integrācija dehidrēt iekšā getStaticProps ļauj servera puses datus nosūtīt priekšgalam kā serializētu stāvokli. Tas ir īpaši noderīgi SEO, jo tas nodrošina, ka lapās, kas tiek renderētas, izmantojot ISR, joprojām ir nepieciešamie metadati, lai meklētājprogrammas varētu pārmeklēt. Tas ir līdzīgs ēdiena pagatavošanai mājās un ideālai iesaiņošanai piegādei, lai tas izskatītos pievilcīgi un pēc ierašanās būtu gatavs ēšanai. 🥡 Tas uzlabo lietojumprogrammas redzamību un veiktspēju meklētājprogrammās.

Visbeidzot, kļūdu apstrādei ir izšķiroša nozīme. Komandām patīk nav atrasts: taisnība nodrošiniet, lai nederīgi maršruti graciozi novirzītu lietotājus uz 404. lapu, nevis avarētu lietojumprogrammu. Tikmēr iestatīšana kešatmiņa: "bez kešatmiņas" API izsaukumiem garantē, ka vienmēr tiek iegūti jaunākie dati. Šīs funkcijas padara lietojumprogrammu stabilu un lietotājam draudzīgu. Iedomājieties, ka atjaunināt viesnīcas ierakstu, bet joprojām redzat novecojušu informāciju — tas satrauktu lietotājus! Šie skripti novērš šādus scenārijus, nodrošinot, ka vienmēr tiek parādīta jaunākā produkta informācija.

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

Inkrementālās statiskās reģenerācijas (ISR) padziļināta izpēte

Inkrementālā statiskā reģenerācija (ISR) ir jaudīga funkcija Next.js kas ļauj atjaunināt esošās lapas, nepārbūvējot visu lietojumprogrammu. Šī iespēja ir būtiska liela mēroga lietotnēm, jo ​​īpaši e-komercijas platformām, kur dati bieži mainās, piemēram, produktu saraksti vai cenu atjauninājumi. Iestatot atkārtoti apstiprināt īpašums iekšā getStaticProps, izstrādātāji var noteikt, cik bieži lapa tiek atkārtoti ģenerēta fonā. Iedomājieties, ka grāmatnīca katru dienu pievieno jaunus nosaukumus — ISR nodrošina, ka vietne tiek atjaunināta bez pilnīgas pārkārtošanas. 📚

Viens no būtiskiem ISR aspektiem ir efektīva atkāpšanās stāvokļu apstrāde. Izmantojot fallback: 'blocking', kā parādīts iepriekšējā piemērā, nodrošina, ka jauni vai reti maršruti tiek ģenerēti pēc pieprasījuma, kad tiem tiek piekļūts pirmo reizi. Tas samazina sākotnējo izveides laiku un ir īpaši noderīgi lietojumprogrammām ar tūkstošiem lappušu. Reāls piemērs varētu būt ceļojumu vietne, kas dinamiski veido lapas mazāk zināmiem galamērķiem tikai tad, kad lietotāji tos meklē, ietaupot resursus un nodrošinot efektivitāti. ✈️

Vēl viens ISR izaicinājums ir kļūdu pārvaldība. Ja aizmugursistēmas API neizdodas atgriezt datus, ISR, iespējams, var ģenerēt bojātu lapu. Iekļaujot pareizu kļūdu apstrādi tādās funkcijās kā fetch un atgriežoties notFound: true šādos gadījumos izstrādātāji var novērst šo scenāriju. Šī pieeja ne tikai nodrošina lietotāja pieredzi, bet arī novērš SEO sodus no meklētājprogrammām, kuras indeksē bojātās lapas. Šī prakse padara ISR par svarīgu rīku lietojumprogrammu mērogošanai, vienlaikus saglabājot veiktspēju un uzticamību.