react static tweets

Avis de dépréciation

Vercel a publié React-Tweet qui est une version mieux entretenue de cette bibliothèque. Veuillez l'utiliser à la place.

---

Réagir les tweets statiques

Rendu statique extrêmement rapide pour les tweets.

Démo

Visitez react-statit-tweets.vercel.app et ajoutez votre identifiant de tweet. Vous pouvez également annexer /dynamic/<tweetId> si vous souhaitez tester la version non SSR.

Pourquoi?

Le SDK intégrant de Twitter est horriblement lent et inefficace. Pour intégrer des tweets sur votre site (y compris SSR), cette solution est nettement plus performante.

Ce projet prend le travail de Vercel sur le rendu statique de tweet et le fait en place dans deux packages NPM faciles à utiliser.

Caractéristiques

• ⚡ Rapide - 10-100x plus vite que d'utiliser l'intégration d'Iframe de Twitter.
• Solid - utilisé dans la production par Super.So, React-Notion-X et autres.
• Simple - TypeScript + React.

Installer

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

Remarque: Ce projet ne fonctionne actuellement qu'avec Next.js (voir # 2 pour plus d'informations).

Usage

Vous devrez prédéfinir le côté du serveur Tweet Data à l'aide fetchTweetAst , puis de le rendre à l'aide du composant 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 } />
}

Notez que Tweet est un composant React Server et a été testé avec Next.js 13 appDir .

Utilisation avancée

Si vous avez plusieurs tweets et que vous utilisez des composants clients, nous vous recommandons d'utiliser le TwitterContextProvider intégré pour stocker une carte de Tweet ID pour tweeter AST.

Dans cet exemple, nous utilisons les importations de composants clients à partir de react-static/tweets/client qui utilisent le contexte React sous le capot:

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

Styles

Vous devrez également importer des styles CSS. Pour next.js, nous vous recommandons de les mettre en pages/_app :

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

Next.js config

Ajoutez pbs.twimg.com à votre next.config.js car nous utilisons next/image pour charger des images.

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

Exemple suivant.js

Voici un exemple de projet Next.js, avec le code le plus important dans pages/[tweetId].tsx . Vous pouvez voir cet exemple en direct sur Vercel.

Packages

Emballer	NPM	Environnement	Description
tweets statiques		Node.js	Rechet Tweet ASTS.
react-static-tweets		Navigateur + SSR	React Renderer pour les tweets compte tenu d'un AST.

Rendu dynamique côté client

react-static-tweets est destiné à rendre les tweets aussi efficacement que possible. Le composant Tweet suppose que vous avez déjà prélevé les données de tweet AST à l'avance, très probablement pendant la RSS.

Le rendu des tweets dynamiques sur le côté client est pris en charge; Cependant, vous devrez envelopper fetchTweetAst dans une route API car il ne peut pas être utilisé à partir du navigateur.

Vous pouvez visualiser un exemple de ceci en action via example/pages/dynamic/[tweetId].tsx .

Crédit

Ma principale contribution est d'emballer l'excellent travail de l'équipe de Vercel en deux packages isolés: static-tweets pour la récupération côté serveur des AST de tweet et react-static-tweets pour le rendu côté client ainsi que la RSS.

• Inspiré par cette démo de l'équipe Vercel
• Et le dépôt sous-jacent de Luis Alvarez
• La majeure partie du code de base est adaptée du blog de Guillermo Rauch
• Converti la base de code JS en dactylographie
• Supprimé styled-jsx car l'utilisation d'un fichier CSS plat (avec un préfixe de classe .static-tweet ) facilite le regroupement de NPM
• Correction de quelques bugs de formatage mineur

Licence

MIT © Travis Fischer

Soutenez mon travail OSS en me suivant sur Twitter