import useSWRImmutable from "swr/immutable"; import { useErrorBoundary } from "react-error-boundary"; import commaNumber from "comma-number"; import Loading from "../Loading"; import fetcher from "../../lib/helpers/fetcher"; import type { PageStats } from "../../types"; export type HitCounterProps = { slug: string; }; const HitCounter = ({ slug }: HitCounterProps) => { const { showBoundary } = useErrorBoundary(); // use immutable SWR to avoid double (or more) counting views: // https://swr.vercel.app/docs/revalidation#disable-automatic-revalidations const { data, error } = useSWRImmutable( `/api/count/?${new URLSearchParams({ slug, })}`, fetcher ); // fail somewhat silently, see error boundary in PostMeta component if (error) { showBoundary(`${error}`); return null; } // show spinning loading indicator if data isn't fetched yet if (!data) { return ; } // we have data! return ( {commaNumber(data.hits)} ); }; export default HitCounter;