Three ways to add link previews in React: from no-backend to full DIY

Link previews — cards showing a title, image, and description for a URL — cannot be built purely client-side in React because browser CORS restrictions block cross-origin HTML fetches. For static sites or SPAs with no backend, developers can use a third-party metadata extraction API such as LinkPeek, which returns OpenGraph and Twitter Card data as JSON. Next.js and Remix users can handle extraction in server components at build or request time, enabling cached previews that appear in the initial HTML without any client-side fetch logic. Those building their own solution must account for challenges including bot blocking, SSRF protection, relative URL resolution, and rate limiting. The choice of approach depends on whether the project has a backend, uses a server-rendering framework, or requires high-volume or custom handling.