Norsk nettbutikk avslørt: Derfor kan din SPA ødelegge synligheten i Google

Den største svakheten med en ren SPA-arkitektur er risikoen for såkalte "soft 404"-feil . Hvis en bruker eller Googles robot prøver å nå en side som ikke finnes (f.eks. /product/ikke-eksisterende-produkt), vil serveren ofte returnere en HTTP 200-svar (OK) med det tomme app-shellet. Først da JavaScript kjører, vil appen oppdage feilen og vise en "ikke funnet"-melding. For Google ser dette ut som en gyldig side, og den kan bli indeksert, noe som er svært uheldig.

Videre advarer Google mot å bruke dynamisk rendering (å servere en forhåndsrendret versjon kun for søkeroboter) som en permanent løsning . Dette anses som en midlertidig løsning som skaper ekstra kompleksitet. Den anbefalte, moderne tilnærmingen er server-side rendering (SSR), static site generation (SSG) eller en hybrid løsning der serveren sender ferdig HTML med alt innhold .

Tekniske detaljer og svakheter i produktdata

Analysen avslører også flere tekniske inkonsekvenser i produktdatabasen. For eksempel lagres stock (lagerbeholdning) direkte på produktet, samtidig som det finnes en variants-array som også inneholder varianter . Størrelser som XXL og 2XL brukes om hverandre, og farger som

ink navy

Ink Navy

Betalingsflyten og sikkerhetshensyn

En interessant oppdagelse er hvordan betalingsflyten er skrudd sammen. Når en kunde fullfører et kjøp med PayPal, sender nettleseren en forespørsel til backend-serveren. Det er kritisk at serveren IKKE stoler på priser eller rabatter som sendes fra nettleseren, men at den i stedet beregner disse på nytt basert på data fra databasen . Hvis ikke, kan en ondsinnet bruker enkelt endre på prisen i forespørselen og få produktet billigere. Analysen peker på at denne typen integrasjoner krever robust idempotens, transaksjonshåndtering og en tydelig state machine for å unngå oversalg og feil .

Veien videre: En hybrid tilnærming

For nettbutikker som ønsker både en unik brukeropplevelse og god synlighet i Google, anbefales en hybrid tilnærming . I stedet for en ren SPA, bør man bruke et rammeverk som Next.js som tilbyr server-side rendering eller Incremental Static Regeneration (ISR). Dette gir rask sideinnlasting med ferdig HTML samtidig som man beholder den gode interaktiviteten til en React-app.

Konklusjonen er klar: Den eksisterende plattformen har mange gode intensjoner, men for å lykkes med SEO og sikre en skalerbar fremtid, må man investere i en forbedret rendringsstrategi og rydde opp i datamodellen. Å bygge et eget system kan gi stor kontroll, men det krever også kontinuerlig vedlikehold og en forståelse for hvordan moderne søkemotorer fungerer .