react static tweets
1.0.0
Vercel 은이 라이브러리의 더 나은 유지 보수 버전 인 React-Tweet를 출시했습니다. 대신 사용하십시오.
트윗을위한 매우 빠른 정적 렌더러.
React-Static-Tweets.vercel.App을 방문하여 트윗 ID를 추가하십시오. 비 SSR 버전을 테스트하려면 /dynamic/<tweetId> 를 추가 할 수도 있습니다.
트위터의 SDK가 끔찍하고 비효율적입니다. 사이트에 트윗을 포함시키기 위해 (SSR 포함)이 솔루션은 훨씬 성능이 뛰어납니다.
이 프로젝트는 정적 트윗 렌더링에 대한 Vercel의 작업을 취하고 사용하기 쉬운 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 구성 요소를 사용하여 렌더링해야합니다.
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.js 13 appDir 로 테스트되었습니다.
여러 트윗이 있고 클라이언트 구성 요소를 사용해도 괜찮은 경우 내장 된 TwitterContextProvider 사용하여 트윗 ID에서 Tweet AST까지지도를 저장하는 것이 좋습니다.
이 예에서는 후드 아래에서 React Context를 사용하는 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 스타일도 가져와야합니다. 다음 .js의 경우 이것들을 pages/_app 에 넣는 것이 좋습니다.
import 'react-static-tweets/styles.css' next/image 사용하여 이미지를로드하기 위해 next.config.js /이미지를 사용하므로 pbs.twimg.com 추가하십시오.
module . exports = {
images : {
domains : [ 'pbs.twimg.com' ]
}
} 다음은 pages/[tweetId].tsx 에 가장 중요한 코드가있는 다음 예제입니다. 이 예제는 Vercel에서 Live를 볼 수 있습니다.
| 패키지 | NPM | 환경 | 설명 |
|---|---|---|---|
| 정적 트윗 | node.js | 트윗을 가져옵니다. | |
| 반응-정적-트윗 | 브라우저 + SSR | Ast. |
react-static-tweets 가능한 한 효율적으로 트윗을 렌더링하기위한 것입니다. Tweet 구성 요소는 이미 SSR 동안 미리 미리 가져온 트윗을 미리 가져 왔다고 가정합니다.
클라이언트 측에서 동적 트윗을 렌더링하는 것이 지원됩니다. 그러나 브라우저에서 사용할 수 없으므로 API 경로에서 fetchTweetAst 포장해야합니다.
example/pages/dynamic/[tweetId].tsx 통해이 작업의 예를 볼 수 있습니다.
저의 주요 기여는 Vercel 팀의 탁월한 작업을 두 개의 분리 된 패키지로 포장하는 것입니다. SSR뿐만 아니라 클라이언트 측 렌더링을위한 트윗 ASTS 및 react-static-tweets 의 서버 측 페치를위한 static-tweets .
.static-tweet 클래스 접두사 포함)을 사용하여 styled-jsx 제거했습니다.MIT © Travis Fischer
트위터에서 나를 팔로우하여 내 OSS 작업을 지원하십시오
