How to prerender Tweets without using the official Twitter APIs
- Published at
- Updated at
- Reading time
- 4min
Disclaimer: I gave up on using the undocumented Twitter API endpoint because it's unpredictable. Twitter wants to save free API calls and ideally get rid of free and API-based data scraping. The API endpoint described below (cdn) fails randomly and returns empty response bodies. It's a terrible developer experience because all calls return a 200 status code.
It could be that the Twitter infra is struggling but I'm sure Twitter will continue changing the API to make it harder to use.
Also, using the API endpoint locally worked fine for me, but in my Netlify builds I got plenty 404s and even more empty response bodies so I assume some IP blocking is also at play here. 😢
For now, I'll switch to publishing Tweet screenshots on this blog. Relying on the unofficial Twitter API probably wasn't a good idea in the first place.
Vercel released a new React component the other day — react-tweet. And people seem to be excited!
What's the deal?
Twitter (or X or Dodge or whatever it's called tomorrow) has been an absolute mess since Elmo took over. And all the silly changes aside, the changes to the Twitter ecosystem are pretty bad. New API regulations and rules affected the entire Twitter ecosystem. And yes, I'm bitter about all this nonsense (RIP @randomMDN)... But bots and the disappointed community aside, Twitter was and is an invaluable information source for news, tech and everything happening in this world.
Suppose you're a blogger; how can you embed Tweets in your articles today?
The easy solution is to use Twitter's native embed functionality at publish. Paste a Tweet URL, embed the provided code and you're ready.
Here's the Vercel tweet as an embed.
<blockquote class="twitter-tweet">
<p lang="en" dir="ltr">Introducing `react-tweet`:<br><br>◆ 35x less client-side JavaScript than the Twitter <iframe><br>◆ React Server Components for built-in data fetching<br>◆ Works with Next.js, Vite, CRA, and more<a href="https://t.co/CMH9A1IGjV">https://t.co/CMH9A1IGjV</a></p>
— Vercel (@vercel) <a href="https://twitter.com/vercel/status/1683920951807971329?ref_src=twsrc%5Etfw">July 25, 2023</a>
</blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
It's good for progressive enhancement that the Tweet content is included in the provided snippet, but note the included script element: it loads 28KB of compressed JavaScript that renders the tweet (and probably does many other things). And while the script isn't super heavy, who knows what wild functionality Twitter will put into your sites in the future?
Do you remember when Twitter removed content on your sites when Tweets were deleted? I'm still puzzled by this quick and later reverted change.
In summary, the native Twitter embed needs 3rd party JavaScript (widget), loads slowly and has privacy and security implications. If you're a developer, there are better solutions!
Back in the day, you could use Twitter's APIs to fetch Tweets and render them to work around the embed issues. When the ecosystem was still healthy and functioning, you could create a Twitter app, fiddle with the authentication and fetch all needed info to render a Tweet. It was cumbersome, but it worked.
But what can you do now that the ecosystem has been wrecked so badly?
The Vercel release post points to the solution:
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.
The key is that Twitter's original widget talks to an open API at cdn. This API includes most of the needed data to render a Tweet on your sites (unfortunately, retweet count is unavailable). Reverse engineering the response takes some time but is worth it because, as Vercel says, "react-tweet uses 35x less client-side JavaScript than the Twitter's Native embed".
Let me tell you a secret... The Tweet above is also pre-rendered in my 11ty-powered site and uses 0KB JavaScript. I guess it uses ∞ times less JavaScript, then?
My implementation is pretty hacked together and not ready to be open sourced. But if you want to peek at it, drop me a line, and I share the code.
Where does this bring us with Tweet embeds? If you're using React, go for react-tweet because Vercel ships high-quality things. Easy-peasy.
But if you're not in the React ecosystem and want to ship infinity-times less JavaScript to embed a Tweet, have fun reverse engineering! It's a nice coding exercise.
Update: In August 2023 it looks like Twitter "secured" the API with a required token. Luckily, our friends at Vercel reverce engineered the API yet again.
Yes? Cool! You might want to check out Web Weekly for more web development articles. The last edition went out 3 days ago.
Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.