Introducing React Tweet

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

The resulting tweet – statically generated, no iframes required:

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

Copy link to headingImproving 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:

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

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:

Copy link to headingNative Twitter embed

• Demo URL: https://without-react-tweet.vercel.app/

• Client-side JavaScript needed: 560kb

Copy link to headingTwitter embed with iframe

• Demo URL: https://without-react-tweet-iframes.vercel.app/

• Client-side JavaScript needed: 557kb

Copy link to headingreact-tweet

• Demo URL: https://with-react-tweet.vercel.app/

• Client-side JavaScript needed: 16kb

Copy link to headingHow 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.

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.

Copy link to headingGet started with react-tweet

Try out react-tweet today by running the following command:

1
npm i react-tweet

Check out the documentation to learn more.