Retting av Next.js 500-feilen i e-handelsapper når du legger til nye produkter

Når en sømløs arbeidsflyt for e-handel bryter

Å utvikle en e-handelsplattform gir sine egne utfordringer, spesielt når man integrerer moderne rammeverk som Next.js med robuste backends som Laravel. Den sømløse opplevelsen du ser for deg kan bli forstyrret når uventede feil oppstår. En 500 intern serverfeil er et slikt mareritt som kan forårsake panikk og forvirring. 😟

Nylig møtte jeg akkurat dette problemet i et prosjekt som ble arrangert på Digitalt hav. Alt virket bra til å begynne med – hjemmesiden viste nye produkter uten problemer. Men i det øyeblikket jeg prøvde å navigere til en produktdetaljside eller sveve over et produkt ved hjelp av Link-komponenten, reiste den fryktede 500-feilen hodet.

Det som gjorde dette problemet forvirrende var dets inkonsekvens. Lokalt fungerte appen feilfritt, selv når den etterlignet produksjons- og oppsetningsmiljøer. Iscenesettelsen fungerte også bra, men produksjon? Det var der det mislyktes. Disse mysteriene kan teste en utvikleres tålmodighet og feilsøkingsferdigheter.

Det minnet meg om en gang da bilen min brøt sammen på uforklarlig vis etter å ha kjørt perfekt under en biltur. Som å feilsøke en app, sjekker du alt – drivstoff, dekk og til og med obskure problemer som tette filtre. På samme måte krevde å løse denne feilen en metodisk tilnærming og mye prøving og feiling. 🚗💻

Forstå løsningen: Bryte ned koden

De medfølgende skriptene løser et vanlig problem i Next.js applikasjoner: dynamisk ruting og ISR (Incremental Static Regeneration) utfordringer. Det første skriptet utnytter React Query prefetchQuery metode for å hente og hurtigbufre data før gjengivelse av sider. Dette sikrer at produktdetaljene er tilgjengelige når brukeren navigerer til produktdetaljsiden, og forhindrer forsinkelser i henting under kjøretid. Det er som å forhåndsbestille en kinobillett for å unngå å stå i kø. 🎟️ Denne proaktive hentingen reduserer sideinnlastingstiden og forbedrer brukeropplevelsen.

I det andre manuset getStaticPaths funksjonen genererer dynamisk ruter for produkter ved hjelp av backend API. Ved å spesifisere fallback: 'blokkering', sikrer det at nye produkter serveres på forespørsel når de åpnes for første gang. Denne metoden er avgjørende for e-handelsplattformer med tusenvis av produkter, siden den unngår forhåndsgjengivelse av alle mulige sider under byggetiden. Tenk på det som bare å bake småkaker når noen bestiller dem i stedet for å fylle kjøkkenet ditt med hver smak på forhånd. 🍪

Det tredje skriptets integrasjon av dehydrere i getStaticProps lar dataene på serversiden sendes til frontend som en serialisert tilstand. Dette er spesielt nyttig for SEO, siden det sikrer at sider som gjengis via ISR fortsatt inneholder de nødvendige metadataene for søkemotorer å gjennomsøke. Det ligner på å tilberede en rett hjemme og pakke den perfekt for levering slik at den ser tiltalende ut og er klar til å spises ved ankomst. 🥡 Dette forbedrer synligheten og ytelsen til applikasjonen i søkemotorer.

Til slutt spiller feilhåndtering en kritisk rolle. Kommandoer som notFound: sant sikre at ugyldige ruter omdirigerer brukere til en 404-side i stedet for å krasje applikasjonen. I mellomtiden innstilling cache: 'no-cache' for API-kall garanterer at de nyeste dataene alltid hentes. Disse funksjonene gjør applikasjonen robust og brukervennlig. Tenk deg å oppdatere en hotelloppføring, men fortsatt se utdatert informasjon – det ville frustrert brukerne! Disse skriptene forhindrer slike scenarier, og sikrer at de nyeste produktdetaljene alltid vises.

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

Utforsker inkrementell statisk regenerering (ISR) i dybden

Inkrementell statisk regenerering (ISR) er en kraftig funksjon i Next.js som lar deg oppdatere eksisterende sider uten å gjenoppbygge hele applikasjonen. Denne muligheten er avgjørende for apper i stor skala, spesielt e-handelsplattformer der dataene endres ofte, for eksempel produktoppføringer eller prisoppdateringer. Ved å stille inn revalidere eiendom i getStaticProps, kan utviklere bestemme hvor ofte en side skal genereres på nytt i bakgrunnen. Se for deg en bokhandel som legger til nye titler daglig – ISR sikrer at nettstedet forblir oppdatert uten en fullstendig omdistribuering. 📚

Et avgjørende aspekt ved ISR er å håndtere reservetilstander effektivt. Bruker fallback: 'blocking', som vist i det tidligere eksemplet, sikrer at nye eller sjeldne ruter genereres på forespørsel når de åpnes for første gang. Dette reduserer den første byggetiden og er spesielt nyttig for applikasjoner med tusenvis av sider. Et eksempel fra den virkelige verden kan være et reisenettsted som dynamisk oppretter sider for mindre kjente destinasjoner bare når brukere søker etter dem, sparer ressurser og sikrer effektivitet. ✈️

En annen utfordring med ISR er feilhåndtering. Hvis en backend API ikke klarer å returnere data, kan ISR potensielt generere en ødelagt side. Ved å innlemme riktig feilhåndtering i funksjoner som fetch og returnerer notFound: true i slike tilfeller kan utviklere forhindre dette scenariet. Denne tilnærmingen sikrer ikke bare brukeropplevelsen, men unngår også SEO-straff fra søkemotorer som indekserer ødelagte sider. Disse praksisene gjør ISR til et viktig verktøy for å skalere applikasjoner samtidig som ytelse og pålitelighet opprettholdes.