react static tweets

ประกาศการคัดค้าน

vercel react-tweet ที่ปล่อยออกมาซึ่งเป็นเวอร์ชันที่ดีกว่าของไลบรารีนี้ โปรดใช้แทน

---

ตอบสนองทวีตคงที่

การเรนเดอร์คงที่อย่างรวดเร็วมากสำหรับทวีต

การสาธิต

เยี่ยมชม React-static-tweets.vercel.app และต่อท้ายรหัสทวีตของคุณ นอกจากนี้คุณยังสามารถผนวก /dynamic/<tweetId> หากคุณต้องการทดสอบเวอร์ชันที่ไม่ใช่ SSR

ทำไม

การฝัง SDK ของ Twitter นั้นช้าและไม่มีประสิทธิภาพอย่างมาก สำหรับการฝังทวีตในเว็บไซต์ของคุณ (รวมถึง 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 Server และได้รับการทดสอบด้วย next.js 13 appDir

การใช้งานขั้นสูง

หากคุณมีทวีตหลายตัวและใช้งานส่วนประกอบไคลเอนต์เราขอแนะนำให้ใช้ TwitterContextProvider ในตัวเพื่อจัดเก็บแผนที่จากทวีต ID ไปยังทวีต AST

ในตัวอย่างนี้เรากำลังใช้การนำเข้าส่วนประกอบไคลเอนต์จาก react-static/tweets/client ซึ่งใช้ React Context ภายใต้ฮูด:

 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 config

เพิ่ม 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	React Renderer สำหรับทวีตที่ได้รับ AST

การแสดงผลฝั่งไคลเอ็นต์แบบไดนามิก

react-static-tweets มีไว้สำหรับการแสดงผลทวีตอย่างมีประสิทธิภาพที่สุดเท่าที่จะทำได้ ส่วนประกอบ Tweet ถือว่าคุณได้รับข้อมูล AST ทวีตล่วงหน้าล่วงหน้าซึ่งเป็นไปได้มากที่สุดในช่วง SSR

รองรับการแสดงผลทวีตแบบไดนามิกที่ฝั่งไคลเอ็นต์ได้รับการสนับสนุน อย่างไรก็ตามคุณจะต้องห่อ fetchTweetAst ในเส้นทาง API เนื่องจากไม่สามารถใช้งานได้จากเบราว์เซอร์

คุณสามารถดูตัวอย่างของการดำเนินการนี้ผ่าน example/pages/dynamic/[tweetId].tsx

เครดิต

ผลงานหลักของฉันคือการบรรจุงานที่ยอดเยี่ยมของทีม Vercel เป็นสองแพ็คเกจที่แยกได้: static-tweets สำหรับการดึงทวีต ASTS และ react-static-tweets สำหรับการเรนเดอร์ฝั่งไคลเอ็นต์รวมถึง SSR

• แรงบันดาลใจจากการสาธิตนี้จากทีม Vercel
• และ repo พื้นฐานโดย Luis Alvarez
• รหัสหลักส่วนใหญ่ดัดแปลงมาจากบล็อกของ Guillermo Rauch
• แปลง JS Codebase เป็น typeScript
• ลบ styled-jsx เนื่องจากการใช้ไฟล์ CSS แบบแบน (พร้อมคำนำหน้าคลาส .static-tweet ) ทำให้การรวมกลุ่มสำหรับ NPM ง่ายขึ้น
• แก้ไขข้อบกพร่องการจัดรูปแบบเล็กน้อย

ใบอนุญาต

MIT © Travis Fischer

สนับสนุนงาน OSS ของฉันโดยติดตามฉันบน Twitter