react static tweets تنزيل - react static tweets تنزيل رمز المصدر

react static tweets

كود الذكاء الاصطناعي

1.0.0

تنزيل

إشعار الإهمال

أصدرت Vercel React-Tweet وهي نسخة أفضل من هذه المكتبة. الرجاء استخدام ذلك بدلاً من ذلك.

رد فعل التغريدات الثابتة

عارض ثابت للغاية للتغريدات.

العرض التوضيحي

تفضل بزيارة React-Static-Tweets.vercel.app وإلحاق معرف التغريد الخاص بك. يمكنك أيضًا إلحاق /dynamic/<tweetId> إذا كنت ترغب في اختبار إصدار غير SSR.

لماذا؟

تضمين Twitter SDK بطيء بشكل فظيع وغير فعال. لتضمين التغريدات على موقعك (بما في ذلك SSR) ، يكون هذا الحل أكثر أداءً.

يأخذ هذا المشروع عمل Vercel على عرض تغريدة ثابتة وحزمه في حزم اثنين من حزم NPM سهلة الاستخدام.

سمات

⚡ سريع - 10-100x أسرع من استخدام التضمين IFRAME من Twitter.
صلبة -تستخدم في الإنتاج بواسطة super.so و React-Notion-X وغيرها.
بسيط - TypeScript + 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 .

 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 المدمج لتخزين خريطة من معرف التغريد إلى 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'

config next.js

أضف pbs.twimg.com إلى next.config.js لأننا نستخدم next/image لتحميل الصور.

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

مثال next.js

فيما يلي مثال NEXT.JS ، مع أهم رمز في pages/[tweetId].tsx . يمكنك عرض هذا المثال على الهواء مباشرة على Vercel.

حزم

طَرد	NPM	بيئة	وصف
طلاءات ثابتة		node.js	تجلب تغرد asts.
رد الفعل-التغريدات		متصفح + SSR	رد فعل العارض للتغريدات أعطى AST.

تقديم جانب العميل الديناميكي

تهدف react-static-tweets إلى تقديم التغريدات بأكبر قدر ممكن من الكفاءة. يفترض مكون Tweet أنك بالفعل قد قمت بالفعل بتغريد بيانات AST Twitt في وقت مبكر ، على الأرجح خلال SSR.

يتم دعم تقديم تغريدات ديناميكية على جانب العميل ؛ ومع ذلك ، ستحتاج إلى لف fetchTweetAst في طريق API لأنه لا يمكن استخدامه من المتصفح.

يمكنك عرض مثال على ذلك في العمل عبر example/pages/dynamic/[tweetId].tsx .

ائتمان

مساهمتي الرئيسية هي تعبئة عمل فريق Vercel الممتاز في حزمتين معزولين: static-tweets لجلب من جانب الخادم من ASTS Tweet و react-static-tweets لتقديم جانب العميل وكذلك SSR.