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.
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.
Install
npm install react-static-tweets static-tweets date-fns
# or
yarn add react-static-tweets static-tweets date-fns
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} />
}
Add pbs.twimg.com
to your next.config.js
since we use next/image
to load images.
module.exports = {
images: {
domains: ['pbs.twimg.com']
}
}
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