react static tweets

Pemberitahuan Deprecation

Vercel merilis react-tweet yang merupakan versi yang lebih baik dari perpustakaan ini. Harap gunakan itu sebagai gantinya.

---

Bereaksi tweet statis

Renderer statis yang sangat cepat untuk tweet.

Demo

Kunjungi react-static-tweets.vercel.app dan tambahkan ID tweet Anda. Anda juga dapat menambahkan /dynamic/<tweetId> jika Anda ingin menguji versi non-SSR.

Mengapa?

Twitter yang menanamkan SDK sangat lambat dan tidak efisien. Untuk menanamkan tweet di situs Anda (termasuk SSR), solusi ini secara signifikan lebih banyak kinerja.

Proyek ini mengambil karya Vercel pada rendering tweet statis dan mengemasnya menjadi dua paket NPM yang mudah digunakan.

Fitur

• ⚡ Cepat - 10-100x lebih cepat daripada menggunakan embedding iframe Twitter.
• Solid -Digunakan dalam Produksi oleh Super.SO, React-Notion-X, dan lainnya.
• Sederhana - naskah + bereaksi.

Memasang

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

Catatan: Proyek ini saat ini hanya berfungsi dengan Next.js (lihat #2 untuk info lebih lanjut).

Penggunaan

Anda harus membuat pra-pengambilan tweet data server menggunakan fetchTweetAst dan kemudian membuatnya menggunakan komponen 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 } />
}

Perhatikan bahwa Tweet adalah komponen reaksi server, dan telah diuji dengan appDir 13s.js 13.

Penggunaan lanjutan

Jika Anda memiliki beberapa tweet dan baik-baik saja dengan menggunakan komponen klien, maka kami sarankan menggunakan TwitterContextProvider bawaan bawaan untuk menyimpan peta dari Tweet ID ke Tweet AST.

Dalam contoh ini, kami menggunakan impor komponen klien dari react-static/tweets/client yang menggunakan konteks React di bawah kap:

 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 >
  )
} 

Gaya

Anda harus mengimpor beberapa gaya CSS juga. Untuk Next.js, kami sarankan Anda meletakkannya di pages/_app :

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

Config next.js

Tambahkan pbs.twimg.com ke next.config.js Anda karena kami menggunakan next/image untuk memuat gambar.

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

Contoh selanjutnya

Berikut adalah contoh proyek Next.js, dengan kode paling penting di pages/[tweetId].tsx . Anda dapat melihat contoh ini secara langsung di Vercel.

Paket

Kemasan	NPM	Lingkungan	Keterangan
tweet statis		Node.js	Mengambil tweet asts.
react-static-tweet		Browser + SSR	React Renderer untuk tweet yang diberikan AST.

Rendering sisi klien dinamis

react-static-tweets dimaksudkan untuk merender tweet seefisien mungkin. Komponen Tweet mengasumsikan bahwa Anda sudah melakukan tweet data tweet sebelumnya, kemungkinan besar selama SSR.

Rendering tweet dinamis di sisi klien didukung; Namun, Anda harus membungkus fetchTweetAst di rute API karena tidak dapat digunakan dari browser.

Anda dapat melihat contoh ini dalam tindakan melalui example/pages/dynamic/[tweetId].tsx .

Kredit

Kontribusi utama saya adalah mengemas karya Vercel yang sangat baik menjadi dua paket terisolasi: static-tweets untuk pengambilan sisi server dari tweet asts dan react-static-tweets untuk rendering sisi klien serta SSR.

• Terinspirasi oleh demo ini dari tim Vercel
• Dan repo yang mendasari oleh Luis Alvarez
• Sebagian besar kode inti diadaptasi dari blog Guillermo Rauch
• Mengonversi basis kode JS menjadi naskah
• Dihapus styled-jsx karena menggunakan file CSS datar (dengan awalan kelas .static-tweet ) membuat bundling untuk NPM lebih mudah
• Memperbaiki beberapa bug pemformatan kecil

Lisensi

MIT © Travis Fischer

Dukung pekerjaan OSS saya dengan mengikuti saya di Twitter