Geolocalizzazione IP in React: un componente per la posizione del visitatore

Prima di iniziare

• Un account Watch-IP e una chiave visitatore pubblicabile con l'origine della tua app (sviluppo e produzione) nell'elenco di origini consentite.
• React 18 o versioni successive — il comportamento di doppia invocazione di StrictMode descritto di seguito è specifico della modalità di sviluppo.
• @digitload/watch-ip-sdk installato (npm install @digitload/watch-ip-sdk).

1. Crea un hook useVisitorGeo

Racchiudi la chiamata getGeo() dell'SDK in un hook che tiene traccia dello stato di caricamento/risultato/errore e annulla la richiesta se il componente viene smontato prima che si risolva.

import { useEffect, useState } from "react";
import { WatchIP, type GeoResponse } from "@digitload/watch-ip-sdk";

const client = new WatchIP("YOUR_PUBLISHABLE_KEY");

export function useVisitorGeo() {
  const [geo, setGeo] = useState<GeoResponse | null>(null);
  const [status, setStatus] = useState<"loading" | "ready" | "error">("loading");

  useEffect(() => {
    const controller = new AbortController();

    client
      .getGeo({ signal: controller.signal })
      .then((result) => {
        setGeo(result);
        setStatus("ready");
      })
      .catch((err) => {
        if (err.name !== "AbortError") setStatus("error");
      });

    return () => controller.abort();
  }, []);

  return { geo, status };
}

2. Perché la richiesta può partire due volte in sviluppo

Lo StrictMode di React monta, smonta e rimonta intenzionalmente ogni componente una volta in sviluppo, per far emergere gli effetti che non si ripuliscono da soli. Questo significa che l'effetto di questo hook viene eseguito due volte, ed è qui che conta l'AbortController visto sopra: la prima richiesta viene annullata dalla funzione di pulizia prima che si risolva, quindi solo una vera chiamata getGeo() arriva effettivamente a completamento. Omettere la chiamata di annullamento non comprometterebbe la correttezza — GET /v1/geo è una lettura — ma lascerebbe una richiesta ridondante ancora in corso e un aggiornamento di stato che l'istanza scartata non utilizza mai.

3. Mostra gli stati di caricamento, risultato e fallback

Usa l'hook nello stesso modo in cui useresti qualsiasi altro hook di dati, mantenendo visibile un valore predefinito sensato finché status non esce da 'loading'.

function RegionBanner() {
  const { geo, status } = useVisitorGeo();

  if (status === "loading") return <p>Rilevamento della tua regione…</p>;
  if (status === "error" || !geo?.country) return <p>Regione predefinita in uso</p>;
  return <p>Contenuti per {geo.city ?? geo.country}</p>;
}

4. Rispetta una scelta esplicita del visitatore

Stessa regola della guida JavaScript semplice: verifica se esiste una preferenza memorizzata prima di applicare il paese suggerito, e ricorri al risultato dell'hook solo quando non esiste ancora alcuna preferenza.

const preferred = localStorage.getItem("preferredCountry");
const country = preferred ?? geo?.country ?? "US";

Errori e casi limite

Un'origine non consentita fallisce prima che il tuo codice veda una risposta normale — aggiungi prima gli URL di sviluppo e produzione della tua app alle origini consentite della chiave. Ogni campo di GeoResponse tranne ip e isEUCountry è nullable, quindi status === 'ready' da solo non basta; controlla anche lo specifico campo che stai per mostrare, come fa il fallback sopra con geo?.country.

Passo successivo

Usi Next.js? Il suo modello di rendering lato server cambia dove questa richiesta può essere eseguita in sicurezza — consulta la guida Next.js per la suddivisione client/server e uno schema server con chiave segreta per gli IP forniti.