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

Support my OSS work by following me on twitter twitter

podviaznikov / react-static-tweets