3 ways to add link previews to a React app (with and without a backend)

Link previews (those little cards with a title, image, and description) make any list of URLs dramatically more scannable. But you can't build them purely client-side: fetching another site's HTML from the browser is blocked by CORS, and even if it weren't, you'd be shipping a full HTML parser to every visitor.

You need something server-side. Here are three ways to do it in a React app, from zero-backend to full DIY.

Option 1: Zero backend — call a metadata API from the client

If your app has no server (static SPA, GitHub Pages, etc.), use a metadata extraction API that supports CORS. I built LinkPeek for exactly this — it returns title, description, image, favicon, site name, OpenGraph and Twitter Card data as JSON.

import { useEffect, useState } from "react";

function LinkCard({ url }) {
  const [meta, setMeta] = useState(null);

  useEffect(() => {
    let alive = true;
    fetch(`https://linkpeek.dpears.workers.dev/v1/preview?url=${encodeURIComponent(url)}`)
      .then(r => r.json())
      .then(data => alive && setMeta(data))
      .catch(() => alive && setMeta({ error: true }));
    return () => { alive = false; };
  }, [url]);

  if (!meta) return <div className="link-card skeleton" />;
  if (meta.error || !meta.title) return <a href={url}>{url}</a>;

  return (
    <a href={url} className="link-card" target="_blank" rel="noopener noreferrer">
      {meta.image && <img src={meta.image} alt="" loading="lazy" />}
      <div>
        <strong>{meta.title}</strong>
        <p>{meta.description?.slice(0, 140)}</p>
        <small>
          {meta.favicon && <img src={meta.favicon} width="14" height="14" alt="" />}
          {meta.siteName ?? new URL(url).hostname}
        </small>
      </div>
    </a>
  );
}

With some card CSS (flex row, rounded corners, muted description text) this renders a Slack-style unfurl. The anonymous tier allows 25 requests a day per IP — enough for development. For production there's a free plan (500/month) and paid tiers via RapidAPI, plus a tiny typed client on npm:

npm i linkpeek-client

import { LinkPeek } from "linkpeek-client";
const lp = new LinkPeek({ rapidApiKey: process.env.RAPIDAPI_KEY });
const meta = await lp.preview("https://github.com");

Option 2: Next.js — fetch server-side, render static

If you're on Next.js, do the extraction at build/request time so the client ships zero fetch logic:

// app/components/LinkCard.jsx (Server Component)
export default async function LinkCard({ url }) {
  const res = await fetch(
    `https://linkpeek.dpears.workers.dev/v1/preview?url=${encodeURIComponent(url)}`,
    { next: { revalidate: 86400 } } // cache 24h
  );
  const meta = await res.json();
  // ...same JSX as above, no useState/useEffect needed
}

Server components + revalidate give you cached previews with no client waterfall — the card is in the initial HTML, which also means it works in RSS readers and with JS disabled.

Option 3: Full DIY

Rolling your own is a fun weekend project. The core is simple — fetch the page, parse <meta property="og:*"> tags — but production hardening is where the time goes:

• Redirects & canonical URLs (short links, tracking wrappers)
• Bot blocking — many big sites serve challenge pages to datacenter IPs
• Relative URLs in og:image and favicons that need resolving
• Fallback chains — og:title → twitter:title → <title>
• SSRF protection — if you fetch user-supplied URLs, you MUST block localhost, RFC-1918 ranges, and internal hostnames, or your preview endpoint is a proxy into your own infrastructure
• Caching — you do not want to re-fetch a URL on every render
• Rate limiting — a public preview endpoint will be abused

I wrote up the sharpest edge I hit (distributed rate limiting on eventually-consistent storage) here, and the whole extractor is open source (MIT) if you want to read a working implementation: github.com/daviscodesbugs/linkpeek.

Which to pick?

Questions welcome — happy to go deeper on any of these in the comments.