react static tweets
1.0.0
Vercelは、このライブラリのよりよく維持されたバージョンであるReact-Tweetをリリースしました。代わりにそれを使用してください。
ツイート用の非常に高速な静的レンダラー。
React-static-tweets.vercel.appにアクセスして、ツイートIDを追加してください。 SSR以外のバージョンをテストする場合は、追加/dynamic/<tweetId>を追加することもできます。
Twitterの埋め込みSDKは恐ろしく遅く、非効率的です。サイトにツイートを埋め込むと（SSRを含む）、このソリューションは非常にパフォーマンスが高くなります。
このプロジェクトは、静的ツイートレンダリングに関するVercelの作業を行い、2つの使いやすいNPMパッケージにパッケージ化します。
npm install react-static-tweets static-tweets date-fns
# or
yarn add react-static-tweets static-tweets date-fns注：このプロジェクトは現在、 next.jsでのみ機能します（詳細については＃2を参照）。
fetchTweetAstを使用してTweet Data Server側を事前に解放し、 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サーバーコンポーネントであり、next.js 13 appDirでテストされていることに注意してください。
複数のツイートがあり、クライアントコンポーネントを使用しても問題ない場合は、組み込みのTwitterContextProviderを使用してツイートIDからマップを保存してASTをツイートすることをお勧めします。
この例では、フードの下でReactコンテキストを使用するreact-static/tweets/clientからのクライアントコンポーネントのインポートを使用しています。
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/imageを使用して画像をロードするため、 pbs.twimg.com next.config.jsに追加します。
module . exports = {
images : {
domains : [ 'pbs.twimg.com' ]
}
} 以下は、 pages/[tweetId].tsxで最も重要なコードを備えた次の例です。この例はvercelでライブで表示できます。
| パッケージ | npm | 環境 | 説明 |
|---|---|---|---|
| 静的ツイート | node.js | ASTをツイートします。 | |
| React-Static-Tweets | ブラウザ + SSR | ASTを与えられたツイートに対してレンダラーを反応します。 |
react-static-tweetsツイートを可能な限り効率的にレンダリングすることを目的としています。 Tweetコンポーネントは、SSRの間に、おそらくおそらくSSRの間にASTデータを事前に事前に解放していることを前提としています。
クライアント側での動的ツイートのレンダリングがサポートされています。ただし、ブラウザからは使用できないため、 fetchTweetAst APIルートでラップする必要があります。
この例をexample/pages/dynamic/[tweetId].tsxを介して実行する例を表示できます。
私の主な貢献は、Vercelチームの優れた作業を2つの孤立したパッケージにパッケージ化することです。サーバー側のTweet ASTのフェッチングのためのstatic-tweetsと、クライアント側のレンダリングとSSR用のreact-static-tweetsです。
styled-jsxを削除しました。フラットCSSファイルを使用して（ .static-tweetクラスのプレフィックスを使用）、NPMのバンドルが簡単になるためMIT©Travis Fischer
Twitterで私をフォローして、私のOSSの仕事をサポートしてください
