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工作