transitive-bullshit / React Static Tweets
Programming Languages
Projects that are alternatives of or similar to React Static Tweets
React Static Tweets
Extremely fast static renderer for tweets.
Why?
Twitter's embedding SDK is horribly slow and inefficient. For embedding tweets on your site (including SSR), this solution is 10-100x faster! 🔥
This project takes Vercel's work on static tweet rendering and packages it up into two easy-to-use NPM packages.
Here's a before and after which makes it clear how big of a difference this makes in practice. The first page uses Twitter's official iframe embedding SDK, and the second page uses react-static-tweets
.
This project is being used in production by super.so.
Features
- ⚡ Fast - 10-100x faster than using Twitter's iframe widget.
- 🔥 Solid - Used in production by super.so, addpotion.so, Twitter Search and react-notion-x.
- 🚀 Simple - TypeScript + React.
Usage
The easiest way to get started is to render tweets client-side (which will fetch the tweet data on-the-fly).
import React from 'react'
import { Tweet } from 'react-static-tweets'
export default Example({ tweetId }) => (
<Tweet id={tweetId} />
)
For more optimized SSR usage, you'll want to pre-fetch the tweet AST data server-side:
import React from 'react'
import { fetchTweetAst } from 'static-tweets'
import { Tweet } from 'react-static-tweets'
const tweetId = '1358199505280262150'
export const getStaticProps = async () => {
try {
const tweetAst = await fetchTweetAst(tweetId)
return {
props: {
tweetId,
tweetAst
},
revalidate: 10
}
} catch (err) {
console.error('error fetching tweet info', err)
throw err
}
}
export default function Example({ tweetId, tweetAst }) {
return <Tweet id={tweetId} ast={tweetAst} />
}
Styles
You'll need to import some CSS styles as well. If you're using Next.js, we recommend you put these in pages/_app
:
import 'react-static-tweets/styles.css'
Next.js Example
Here's a full Next.js example project with the most important code in pages/[tweetId]
.tsx.
You can check out an example hosted live on Vercel. A more in-depth example via twitter search which provides an Algolia search UI on top of my personal twitter history (@transitive_bs).
For an example of more advanced usage and customization, check out nextjs-notion-starter-kit.
Packages
Package | NPM | Docs | Environment | Description |
---|---|---|---|---|
react-static-tweets | docs | Browser + SSR | Fast React renderer for Tweets. | |
static-tweets | docs | Node.js | Fetches tweet ASTs. |
Credit
My main contribution is packaging the Vercel team's excellent work into two isolated packages: static-tweets
for server-side fetching of tweet ASTs and react-static-tweets
for client-side rendering as well as SSR.
- Inspired by this demo from the Vercel team
- And the underlying repo by Luis Alvarez
- Most of the core code is adapted from Guillermo Rauch's blog
- Converted the JS codebase to TypeScript
- Removed
styled-jsx
because using a flat CSS file (with a.static-tweet
class prefix) makes bundling for NPM easier - Fixed some minor formatting bugs
License
MIT © Travis Fischer
Support my OSS work by following me on twitter