Oprava chyby Next.js 500 v aplikáciách elektronického obchodu pri pridávaní nových produktov

Keď sa preruší bezproblémový pracovný tok elektronického obchodu

Vývoj platformy elektronického obchodu prináša svoj vlastný súbor výziev, najmä pri integrácii moderných rámcov, ako je napr Next.js s robustnými backendmi, ako je Laravel. Bezproblémový zážitok, ktorý si predstavujete, môže byť narušený, keď sa vyskytnú neočakávané chyby. Interná chyba servera 500 je nočnou morou, ktorá môže spôsobiť paniku a zmätok. 😟

Nedávno som čelil presne tomuto problému v projekte hosťovanom na Digitálny oceán. Všetko sa spočiatku zdalo v poriadku – domovská stránka zobrazovala nové produkty bez štikútania. Ale v momente, keď som sa pokúsil prejsť na stránku s podrobnosťami o produkte alebo umiestniť kurzor myši na produkt pomocou komponentu Link, objavila sa obávaná chyba 500.

To, čo robilo tento problém záhadným, bola jeho nekonzistentnosť. Lokálne aplikácia fungovala bezchybne, dokonca aj pri napodobňovaní produkčných a inscenačných prostredí. Inscenačné nasadenie tiež fungovalo dobre, ale produkcia? Tam to zlyhalo. Tieto záhady môžu otestovať trpezlivosť vývojára a zručnosti pri riešení problémov.

Pripomenulo mi to časy, keď sa mi auto nevysvetliteľne pokazilo po perfektnom chode počas výletu. Rovnako ako pri ladení aplikácie skontrolujete všetko – palivo, pneumatiky a dokonca aj nejasné problémy, ako sú upchaté filtre. Podobne aj riešenie tejto chyby si vyžadovalo metodický prístup a veľa pokusov a omylov. 🚗💻

Pochopenie riešenia: Prelomenie kódu

Poskytnuté skripty riešia bežný problém v Next.js aplikácie: dynamické smerovanie a výzvy ISR (Incremental Static Regeneration). Prvý skript využíva React Query prefetchQuery metóda na načítanie a ukladanie údajov do vyrovnávacej pamäte pred vykreslením stránok. Tým sa zaistí, že podrobnosti o produkte budú dostupné, keď používateľ prejde na stránku s podrobnosťami o produkte, čím sa zabráni oneskoreniam pri načítaní. Je to ako predobjednať si lístok do kina, aby ste sa vyhli čakaniu v rade. 🎟️ Toto proaktívne načítavanie znižuje časy načítania stránky a zlepšuje používateľskú skúsenosť.

V druhom skripte, getStaticPaths dynamicky generuje trasy pre produkty pomocou backendového API. Upresnením náhrada: 'blokovanie'zaisťuje, že nové produkty sa doručujú na požiadanie pri prvom prístupe. Táto metóda je kľúčová pre platformy elektronického obchodu s tisíckami produktov, pretože sa vyhýba predbežnému vykresľovaniu všetkých možných stránok počas zostavovania. Predstavte si to ako pečenie koláčikov, keď si ich niekto objedná, namiesto toho, aby ste si vopred naplnili kuchyňu všetkými príchuťami. 🍪

Integrácia tretieho skriptu dehydratovať v getStaticProps umožňuje odovzdanie údajov na strane servera do frontendu ako serializovaný stav. To je užitočné najmä pre SEO, pretože zaisťuje, že stránky vykresľované prostredníctvom ISR stále obsahujú potrebné metadáta, ktoré majú vyhľadávače prehľadávať. Je to podobné ako príprava jedla doma a jeho dokonalé balenie na doručenie, aby vyzeralo príťažlivo a bolo pripravené na konzumáciu hneď po príchode. 🥡 To zvyšuje viditeľnosť a výkon aplikácie vo vyhľadávačoch.

Napokon, kritickú úlohu zohráva spracovanie chýb. Príkazy ako notFound: true zabezpečiť, že neplatné trasy elegantne presmerujú používateľov na stránku 404 namiesto zlyhania aplikácie. Medzitým nastavenie cache: 'no-cache' pre volania API zaručuje, že sa vždy načítajú najnovšie údaje. Vďaka týmto vlastnostiam je aplikácia robustná a užívateľsky príjemná. Predstavte si, že aktualizujete zoznam hotela, ale stále vidíte zastarané informácie – frustrovalo by to používateľov! Tieto skripty zabraňujú takýmto scenárom a zabezpečujú, že sa vždy zobrazia najnovšie podrobnosti o produkte.

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

Hĺbkové skúmanie prírastkovej statickej regenerácie (ISR).

Incremental Static Regeneration (ISR) je výkonná funkcia v Next.js ktorý vám umožňuje aktualizovať existujúce stránky bez prestavby celej aplikácie. Táto schopnosť je nevyhnutná pre rozsiahle aplikácie, najmä platformy elektronického obchodu, kde sa údaje často menia, ako sú napríklad zoznamy produktov alebo aktualizácie cien. Nastavením znovu overiť majetok v getStaticProps, môžu vývojári určiť, ako často sa stránka znovu generuje na pozadí. Predstavte si kníhkupectvo, ktoré denne pridáva nové tituly – ISR zaisťuje, že stránka zostane aktualizovaná bez úplného premiestnenia. 📚

Jedným z kľúčových aspektov ISR je efektívne zvládanie núdzových stavov. Používanie fallback: 'blocking', ako je uvedené v predchádzajúcom príklade, zaisťuje, že nové alebo zriedkavé trasy sú generované na požiadanie pri prvom prístupe. To znižuje počiatočný čas zostavenia a je to užitočné najmä pre aplikácie s tisíckami strán. Príkladom zo skutočného sveta môže byť cestovateľská stránka, ktorá dynamicky vytvára stránky pre menej známe destinácie iba vtedy, keď ich používatelia hľadajú, čím šetrí zdroje a zabezpečuje efektivitu. ✈️

Ďalšou výzvou s ISR je správa chýb. Ak backend API nedokáže vrátiť údaje, ISR môže potenciálne vygenerovať nefunkčnú stránku. Začlenením správneho spracovania chýb do funkcií ako fetch a návratom notFound: true v takýchto prípadoch môžu vývojári tomuto scenáru zabrániť. Tento prístup nielenže chráni používateľskú skúsenosť, ale tiež zabraňuje postihom SEO zo strany vyhľadávacích nástrojov, ktoré indexujú nefunkčné stránky. Tieto postupy robia z ISR životne dôležitý nástroj na škálovanie aplikácií pri zachovaní výkonu a spoľahlivosti.