react static tweets

Aviso de depreciação

A Vercel lançou o React-Tweet, que é uma versão melhor mantida desta biblioteca. Por favor, use isso em vez disso.

---

Reaja tweets estáticos

Renderizador estático extremamente rápido para tweets.

Demonstração

Visite React-static-tweets.vercel.app e anexe seu ID de tweet. Você também pode anexar /dynamic/<tweetId> se deseja testar a versão não-SSR.

Por que?

A incorporação do Twitter SDK é terrivelmente lenta e ineficiente. Para incorporar tweets no seu site (incluindo SSR), esta solução é significativamente mais executada.

Este projeto pega o trabalho de Vercel em tweet estático renderizando e o empacota em dois pacotes NPM fáceis de usar.

Características

• ⚡ Rápido - 10-100X mais rápido do que usar a incorporação do iFrame do Twitter.
• Sólido -usado na produção por super.so, react-notion-x e outros.
• Simples - TypeScript + React.

Instalar

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

Nota: Este projeto atualmente funciona apenas com o Next.js (consulte o #2 para obter mais informações).

Uso

Você precisará pré-buscar o lado do servidor de dados de tweet usando fetchTweetAst e depois renderizá-lo usando o 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 } />
}

Observe que o Tweet é um componente do React Server e foi testado com o próximo.js 13 appDir .

Uso avançado

Se você tiver vários tweets e está bem com o uso de componentes do cliente, recomendamos o uso do TwitterContextProvider embutido para armazenar um mapa do Tweet ID para Tweet AST.

Neste exemplo, estamos usando as importações de componentes do cliente do react-static/tweets/client , que usam o React Context sob o 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

Você precisará importar alguns estilos CSS também. Para Next.js, recomendamos que você os coloque nas pages/_app :

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

Next.js config

Adicione pbs.twimg.com ao seu next.config.js , pois usamos next/image para carregar imagens.

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

Exemplo do próximo.js

Aqui está um exemplo do projeto Next.js, com o código mais importante nas pages/[tweetId].tsx . Você pode visualizar este exemplo ao vivo no vercel.

Pacotes

Pacote	Npm	Ambiente	Descrição
Tweets estáticos		Node.js	Busca tweet asts.
React-static-tweets		Navegador + ssr	Reache renderizador para tweets dado um AST.

Renderização dinâmica do lado do cliente

react-static-tweets é destinado a renderizar tweets da maneira mais eficiente possível. O componente Tweet pressupõe que você já tenha pré-adquirido dados de tweet AST com antecedência, provavelmente durante o SSR.

A renderização de tweets dinâmicos no lado do cliente é suportada; No entanto, você precisará envolver fetchTweetAst em uma rota da API, pois não pode ser usada no navegador.

Você pode visualizar um exemplo disso em ação por example/pages/dynamic/[tweetId].tsx .

Crédito

Minha principal contribuição é empacotar o excelente trabalho da equipe de vercel em dois pacotes isolados: static-tweets para buscar o servidor de tweets e react-static-tweets para renderização do lado do cliente, bem como SSR.

• Inspirado por esta demonstração da equipe de Vercel
• E o repositório subjacente de Luis Alvarez
• A maior parte do código principal é adaptada do blog de Guillermo Rauch
• Converteu a base de código JS em TypeScript
• Removido styled-jsx porque o uso de um arquivo CSS plano (com um prefixo de classe .static-tweet .
• Corrigido alguns pequenos insetos de formatação

Licença

MIT © Travis Fischer

Apoie meu trabalho OSS, seguindo -me no Twitter