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 { value fetchTweetAst } from 'static-tweets'
import { value 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 is an example Next.js project, with the most important code in pages/[tweetId].tsx. You can view this example live on Vercel.

Here is a live demo showing how different types of tweets render.

For more advanced exammples, check out:

• twitter search - An Algolia search UI on top of my twitter history (@transitive_bs).
• react-notion-x - A React renderer for Notion with batteries included. (tweet embed demo)
• nextjs-notion-starter-kit - Production-ready starter kit for building websites with Notion, including static tweet embeds.

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