react static tweets Download - react static tweets Quellcode Download

react static tweets

AI-Quellcode

1.0.0

Herunterladen

Bekanntmachung von Abwertung

Vercel veröffentlicht React-Tweet, eine besser gepflegte Version dieser Bibliothek. Bitte benutzen Sie das stattdessen.

Reagieren statische Tweets

Extrem schnelles statisches Renderer für Tweets.

Demo

Besuchen Sie React-statische Tweets.vercel.app und fügen Sie Ihre Tweet-ID hinzu. Sie können auch anhängen /dynamic/<tweetId> wenn Sie die Nicht-SSR-Version testen möchten.

Warum?

Twitters Einbettungs -SDK ist schrecklich langsam und ineffizient. Um Tweets auf Ihre Website (einschließlich SSR) einzubetten, ist diese Lösung deutlich leistungsfähiger.

Dieses Projekt übernimmt die Arbeit von Vercel zum statischen Tweet-Rendering und packt es in zwei benutzerfreundliche NPM-Pakete ein.

Merkmale

⚡ Schnell - 10-100x schneller als die Iframe -Einbettung von Twitter.
Solid -in der Produktion von Super.so, React-Notion-X und anderen verwendet.
Einfach - TypeScript + React.

Installieren

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

Hinweis: Dieses Projekt funktioniert derzeit nur mit Next.js (siehe #2 für weitere Informationen).

Verwendung

Sie müssen Tweet Data Server-Side mit fetchTweetAst vorab abgeben und dann mit der Tweet Komponente rendern.

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

Beachten Sie, dass Tweet eine React -Server -Komponente ist und mit Next.js 13 appDir getestet wurde.

Erweiterte Verwendung

Wenn Sie mehrere Tweets haben und bei der Verwendung von Client-Komponenten in Ordnung sind, empfehlen wir, die integrierte TwitterContextProvider zu verwenden, um eine Karte von Tweet-ID zum Tweet AST zu speichern.

In diesem Beispiel verwenden wir die Client-Komponentenimporte von react-static/tweets/client , die den React-Kontext unter der Haube verwenden:

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

Stile

Sie müssen auch einige CSS -Stile importieren. Für Next.js empfehlen wir Ihnen, diese in pages/_app einzulegen:

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

Next.js config

Fügen Sie pbs.twimg.com zu Ihrem next.config.js hinzu, da wir next/image Bilder laden.

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

NEXT.JS Beispiel

Hier ist ein Beispiel pages/[tweetId].tsx nächstes. Sie können dieses Beispiel live auf Vercel anzeigen.

Pakete

Paket	NPM	Umfeld	Beschreibung
Statische Tweets		Node.js	Abrufen Tweet Asts.
React-statische Tweets		Browser + SSR	React Renderer für Tweets mit einem AST.

Dynamisches clientseitiges Rendering

react-static-tweets sind für die Wiedergabe von Tweets so effizient wie möglich gedacht. In der Tweet Komponente geht davon aus, dass Sie bereits im Voraus Tweet AST-Daten vorgesehen haben, höchstwahrscheinlich während der SSR.

Das Rendern von dynamischen Tweets auf der Client-Seite wird unterstützt. Sie müssen fetchTweetAst jedoch in einer API -Route einwickeln, da es nicht vom Browser verwendet werden kann.

Sie können ein Beispiel hierfür in Aktion über example/pages/dynamic/[tweetId].tsx anzeigen.

Kredit

Mein Hauptbeitrag ist es, die hervorragende Arbeit des Vercel-Teams in zwei isolierte Pakete zu verpacken: static-tweets für das serverseitige Abnehmen von Tweet-ASTs und react-static-tweets für das clientseitige Rendering sowie für SSR.

Inspiriert von dieser Demo des Vercel -Teams
Und das zugrunde liegende Repo von Luis Alvarez
Der größte Teil des Kerncodes ist aus Guillermo Rauchs Blog angepasst
Konvertierte die JS -Codebasis in TypenScript
Entfernte styled-jsx da die Verwendung einer flachen CSS-Datei (mit einem Prefix .static-tweet Klasse) die Bündelung für NPM erleichtert
Einige kleinere Formatierungsfehler behoben