react static tweets

折舊通知

Vercel發布了React-Tweet，這是該庫的更好維護版本。請改用。

---

反應靜態推文

推文的非常快速的靜態渲染器。

演示

訪問react static-tweets.vercel.app並附加您的推文ID。如果要測試非SSR版本，也可以附加/dynamic/<tweetId> 。

為什麼？

Twitter的嵌入SDK非常緩慢且效率低下。對於在您的網站上嵌入推文（包括SSR），此解決方案的性能要多得多。

該項目將Vercel在靜態推文渲染上的工作進行了處理，並將其包裝成兩個易於使用的NPM軟件包。

特徵

• ⚡快速-10-100倍，比使用Twitter的iFrame嵌入速度快。
• 固體- 由Super.So，React-Notion-X等用於生產。
• 簡單- 打字稿 + React。

安裝

npm install react-static-tweets static-tweets date-fns
# or
yarn add react-static-tweets static-tweets date-fns

注意：此項目當前僅與Next.js一起使用（有關更多信息，請參見＃2）。

用法

您需要使用fetchTweetAst預先提取Tweet數據服務器端，然後使用Tweet組件進行渲染。

 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 : {
        tweetAst
      } ,
      revalidate : 10
    }
  } catch ( err ) {
    console . error ( 'error fetching tweet' , err )

    throw err
  }
}

export default function Example ( { tweetAst } ) {
  return < Tweet ast = { tweetAst } />
}

請注意， Tweet是一個React Server組件，已通過Next進行了測試。 JS13 appDir 。

高級用法

如果您有多個推文，並且可以使用客戶端組件，那麼我們建議使用內置的TwitterContextProvider存儲從Tweet ID到Tweet AST的地圖。

在此示例中，我們使用的是從react-static/tweets/client在引擎蓋下使用React上下文：

 import React from 'react'
import pMap from 'p-map'
import { fetchTweetAst } from 'static-tweets'
import { TweetClient , TwitterContextProvider } from 'react-static-tweets/client'

// NOTE: You'll likely infer your list of tweets by introspecting your page's
// content from a CMS.
const tweetIds = [
  '1358199505280262150' ,
  '1374492662061953034' ,
  '1358199505280262150'
  // ...
]

export const getStaticProps = async ( ) => {
  try {
    // Fetch all tweet ASTs statically
    const tweetAsts = await pMap ( tweetIds , fetchTweetAst , {
      concurrency : 4
    } )

    // Create a map from tweet ID to tweet AST
    const tweetAstMap = tweetIds . reduce ( ( tweetId , map , index ) => ( {
      ... map ,
      [ tweetId ] : tweetAsts [ index ]
    } ) )

    return {
      props : {
        tweetAstMap
      } ,
      revalidate : 60
    }
  } catch ( err ) {
    console . error ( 'error fetching tweets' , err )

    throw err
  }
}

export default function Example ( { tweetAstMap } ) {
  return (
    < TwitterContextProvider value = { { tweetAstMap } } >
      { tweetIds . map ( ( tweetId ) => (
        < div key = { tweetId } >
          { /* 
          There's no need to pass the tweet AST directly if it is provided via TwitterContextProvider. This is nice in situations where you're 
          rendering tweets in deeply nested component trees.
          */ }
          < TweetClient id = { tweetId } />
        </ div >
      ) ) }
    </ TwitterContextProvider >
  )
} 

樣式

您還需要導入一些CSS樣式。對於next.js，我們建議您將其放入pages/_app中：

 import 'react-static-tweets/styles.css' 

Next.js配置

由於我們使用next/image來加載圖像，因此將pbs.twimg.com添加到您的next.config.js 。

 module . exports = {
  images : {
    domains : [ 'pbs.twimg.com' ]
  }
} 

next.js示例

這是一個示例Next.js項目，在pages/[tweetId].tsx中具有最重要的代碼。您可以在Vercel上觀看此示例。

軟件包

包裹	NPM	環境	描述
靜態特性		node.js	獲取推文。
反應靜態特性		瀏覽器 + SSR	給定AST的推文的React渲染器。

動態客戶端渲染

react-static-tweets目的是盡可能高效地渲染推文。該Tweet組件假設您已經提前預先提前了Tweet AST數據，很可能在SSR期間。

支持客戶端上的動態推文；但是，您需要將fetchTweetAst包裹在API路由中，因為它不能從瀏覽器中使用。

您可以通過example/pages/dynamic/[tweetId].tsx查看此操作中的示例。

信用

我的主要貢獻是將Vercel團隊的出色工作包裝到兩個孤立的軟件包中：用於服務器端獲取ASTS和react-static-tweets的static-tweets用於客戶端渲染以及SSR。

• 受Vercel團隊的演示的啟發
• 以及路易斯·阿爾瓦雷斯（Luis Alvarez）的基礎回購
• 大多數核心代碼均根據Guillermo Rauch的博客改編
• 將JS代碼庫轉換為打字稿
• 刪除了styled-jsx ，因為使用Flat CSS文件（帶有.static-tweet類前綴）使NPM的捆綁更加容易
• 修復了一些較小的格式錯誤

執照

麻省理工學院©Travis Fischer

通過在Twitter上關注我來支持我的OSS工作