Vercel launched a brand new React part the opposite day — react-tweet. And other people appear to be excited!
Introducing `react-tweet`:
◆ 35x much less client-side JavaScript than the Twitter <iframe>
◆ React Server Elements for built-in information fetching
◆ Works with Subsequent.js, Vite, CRA, and extra
What is the deal?
Twitter (or X or Dodge or no matter it is known as tomorrow) has been an absolute mess since Elmo took over. And all of the foolish modifications apart, the modifications to the Twitter ecosystem are fairly unhealthy. New API laws and guidelines affected all the Twitter ecosystem. And sure, I am bitter about all this nonsense (RIP @randomMDN)… However bots and the disillusioned group apart, Twitter was and is a useful data supply for information, tech and all the things occurring on this world.
Suppose you are a blogger; how are you going to embed Tweets in your articles right this moment?
The straightforward resolution is to make use of Twitter’s native embed performance at publish. Paste a Tweet URL, embed the offered code and also you’re prepared.
This is the Vercel tweet as an embed.
<blockquote class="twitter-tweet">
<p lang="en" dir="ltr">Introducing `react-tweet`:<br><br>◆ 35x much less client-side JavaScript than the Twitter <iframe><br>◆ React Server Elements for built-in information fetching<br>◆ Works with Subsequent.js, Vite, CRA, and extra<a href="https://t.co/CMH9A1IGjV">https://t.co/CMH9A1IGjV</a></p>
— Vercel (@vercel) <a href="https://twitter.com/vercel/standing/1683920951807971329?ref_src=twsrcpercent5Etfw">July 25, 2023</a>
</blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
It is good for progressive enhancement that the Tweet content material is included within the offered snippet, however notice the included script component: it hundreds 28KB of compressed JavaScript that renders the tweet (and possibly does many different issues). And whereas the script is not tremendous heavy, who is aware of what wild performance Twitter will put into your websites sooner or later?
In abstract, the native Twitter embed wants third celebration JavaScript (widget), hundreds slowly and has privateness and safety implications. For those who’re a developer, there are higher options!
Again within the day, you might use Twitter’s APIs to fetch Tweets and render them to work across the embed points. When the ecosystem was nonetheless wholesome and functioning, you might create a Twitter app, fiddle with the authentication and fetch all wanted information to render a Tweet. It was cumbersome, but it surely labored.
However what are you able to do now that the ecosystem has been wrecked so badly?
The Vercel launch put up factors to the answer:
The hot button is that Twitter’s authentic widget talks to an open API at cdn. This API contains many of the wanted information to render a Tweet in your websites (sadly, retweet depend is unavailable). Reverse engineering the response takes a while however is price it as a result of, as Vercel says, “react-tweet makes use of 35x much less client-side JavaScript than the Twitter’s Native embed”.
Let me inform you a secret… The Tweet above can also be pre-rendered in my 11ty-powered website and makes use of 0KB JavaScript. I suppose it makes use of ∞ occasions much less JavaScript, then?
My implementation is fairly hacked collectively and never able to be open sourced. However if you wish to peek at it, drop me a line, and I share the code.
The place does this deliver us with Tweet embeds? For those who’re utilizing React, go for react-tweet as a result of Vercel ships high-quality issues. Straightforward-peasy.
However if you happen to’re not within the React ecosystem and wish to ship infinity-times much less JavaScript to embed a Tweet, have enjoyable reverse engineering! It is a good coding train.
