react static tweets

Aviso de deprecación

Vercel lanzó React-Tweet, que es una versión mejor mantenida de esta biblioteca. Por favor, use eso en su lugar.

---

Tweets estáticos reaccionarios

Representador estático extremadamente rápido para tweets.

Manifestación

Visite React-Static-Tweets.vercel.app y agregue su ID de tweet. También puede agregar /dynamic/<tweetId> si desea probar la versión que no es SSR.

¿Por qué?

El SDK de incrustación de Twitter es horriblemente lento e ineficiente. Para la incrustación de tweets en su sitio (incluida la SSR), esta solución es significativamente más desempeñada.

Este proyecto toma el trabajo de Vercel en la representación de tweet estática y lo empaqueta en dos paquetes de NPM fáciles de usar.

Características

• ⚡ Rápido : 10-100x más rápido que usar la incrustación de iframe de Twitter.
• Sólido -Utilizado en producción por Super.SO, React-Notion-X y otros.
• Simple - TypeScript + React.

Instalar

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

Nota: Este proyecto actualmente solo funciona con Next.js (ver #2 para obtener más información).

Uso

Deberá prefachar prefabistar el lado del servidor de datos Tweet usando fetchTweetAst y luego renderizarlo utilizando el componente 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 } />
}

Tenga en cuenta que Tweet es un componente del servidor React, y se ha probado con Next.js 13 appDir .

Uso avanzado

Si tiene múltiples tweets y está de acuerdo con el uso de componentes del cliente, le recomendamos usar el TwitterContextProvider incorporado para almacenar un mapa de Tweet ID a Tweet AST.

En este ejemplo, estamos utilizando las importaciones del componente del cliente de react-static/tweets/client que usan el contexto React bajo el capó:

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

Estilos

También necesitará importar algunos estilos CSS. Para Next.js, le recomendamos que los ponga en pages/_app :

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

Next.js config

Agregue pbs.twimg.com a su next.config.js ya que usamos next/image para cargar imágenes.

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

Ejemplo de Next.js

Aquí hay un ejemplo de ejemplo Next.js, con el código más importante en pages/[tweetId].tsx . Puede ver este ejemplo en vivo en Vercel.

Paquetes

Paquete	Npm	Ambiente	Descripción
tweets estáticos		Nodo.js	Obtiene tweet Asts.
tweets reaccionados		Navegador + SSR	React Renderer para tweets dado un AST.

Representación dinámica del lado del cliente

react-static-tweets está destinado a representar tweets de la manera más eficiente posible. El componente Tweet supone que ya ha feticado los datos AST de tweet previamente con anticipación, muy probablemente durante la SSR.

Se admite tweets dinámicos en el lado del cliente; Sin embargo, necesitará envolver fetchTweetAst en una ruta API ya que no se puede usar desde el navegador.

Puede ver un ejemplo de esto en acción a través de example/pages/dynamic/[tweetId].tsx .

Crédito

Mi principal contribución es empacar el excelente trabajo del equipo de Vercel en dos paquetes aislados: static-tweets para la obtención de tweet ASTS y react-static-tweets para la representación del lado del cliente y la SSR.

• Inspirado en esta demostración del equipo Vercel
• Y el repositorio subyacente de Luis Alvarez
• La mayor parte del código central está adaptado del blog de Guillermo Rauch
• Convertido la base de código JS a TypeScript
• Eliminado styled-jsx porque usar un archivo CSS plano (con un prefijo de clase .static-tweet ) hace que la agrupación para NPM sea más fácil
• Se corrigió algunos errores de formato menores

Licencia

MIT © Travis Fischer

Apoye mi trabajo de OSS siguiéndome en Twitter