Introducing React Tweet

Embed tweets into your React application without sacrificing performance.

Posted by

Luis Alvarez

Senior Solutions Engineer

Steven Tey

Senior Developer Advocate

Lee Robinson

VP of Product

Introducing react-tweet – embed tweets into any React application with a single line of code, without sacrificing performance.

app/page.tsx

import { Tweet } from 'react-tweet'
 
export default function Page() {
  return <Tweet id="1683920951807971329" />
}

The resulting tweet – statically generated, no iframes required:

Vercel

@vercel

·Follow

Introducing `react-tweet`: ◆ 35x less client-side JavaScript than the Twitter <iframe> ◆ React Server Components for built-in data fetching ◆ Works with Next.js, Vite, CRA, and more vercel.com/blog/introduci…

1.8K

Read 74 replies

Some benefits of using react-tweet:

35x less client-side JavaScript than the Twitter's Native embed
Support for React Server Components
Built-in data fetching and caching
Works with any React framework – Next.js, Vite, and Create React App

Improving embeds with Server Components

Historically, embedding tweets has required using Twitter's embedded iframe. This loads 560kb worth of client-side JavaScript, which slows site performance and causes layout shift.

With react-tweet, you no longer need to use iframes. Instead, all you need is a simple React component that is compatible with Next.js, Vite, and Create React App:

app/page.tsx

import { Tweet } from 'react-tweet'
 
export default function Page() {
  return <Tweet id="1683920951807971329" />
}

The resulting embedded tweet has several advantages:

No layout shift or scrolling jumps (Cumulative Layout Shift)
Improved UX with instantly visible tweets in the browser (no lazy loading)
Build with the powerful React component abstraction.

To demonstrate this performance improvement, here's a comparison between the native Twitter embed, iframe embed, and react-tweet:

Native Twitter embed

Demo URL: https://without-react-tweet.vercel.app/
Client-side JavaScript needed: 560kb

Twitter embed with iframe

Demo URL: https://without-react-tweet-iframes.vercel.app/
Client-side JavaScript needed: 557kb

`react-tweet`

Demo URL: https://with-react-tweet.vercel.app/
Client-side JavaScript needed: 16kb

How `react-tweet` works

Under the hood, react-tweet reverse-engineers the Twitter's Embed API to fetch data for a given tweet and renders it in the same style as Twitter's embedded iframe.

·Follow

You don't need to rely on Twitter API v2 to fetch tweets on your own, saving you money and making it easier to add tweets to your site.