Para oferecer uma ótima experiência ao usuário do site, precisamos otimizar o tempo de carregamento da primeira página inicial e a capacidade de resposta da página à interação. Quanto mais rápido sua página responder à entrada do usuário – melhor.
Reagir 18 foi projetado para ajudar a melhorar a interatividade com recursos como hidratação seletiva de Suspense
para tornar a hidratação não bloqueante e nos dar mais transparência sobre como nosso arquitetônico escolhas afetarão a experiência do usuário e o desempenho do nosso aplicativo. O React 18 faz grandes melhorias de desempenho e adiciona suporte para Suspense
na renderização do lado do servidor (SSR), permitindo servir partes de um aplicativo de forma assíncrona, você pode agrupar uma parte lenta do seu aplicativo dentro do componente Suspense, informando ao React para atrasar o carregamento do componente lento.
A renderização do lado do servidor permite gerar HTML a partir de componentes React no servidor e enviar esse HTML para seus usuários. O SSR permite que seus usuários vejam o conteúdo da página antes que seu pacote JavaScript seja carregado e executado, após o qual o código JavaScript é carregado e mesclado com o HTML, anexando manipuladores de eventos – o que é hidratação. Ao contrário do streaming HTML tradicional, ele não precisa acontecer na ordem de cima para baixo.
Com o Suspense
, você pode dizer ao React para enviar HTML para outros componentes primeiro junto com o HTML para o placeholder, como um spinner de carregamento. Melhora significativamente a experiência do usuário e a latência percebida pelo usuário.
Existem duas características principais de SSR em React 18 desbloqueado por Suspense:
- Streaming de HTML no servidor.
- Hidratação Seletiva no cliente.
Vamos explorar Abordagens de busca de dados do React de useEffect
e Suspense
tente comparar soluções práticas de busca de dados de back-end, no nosso caso escolhemos um CMS headless rápido e intuitivo Cosmic. Nossos exemplos de código você pode conferir por um link StackBlitz.
Integração Cosmic Headless CMS
Para buscar dados, usamos CMS sem cabeça cósmico é um sistema de gerenciamento de conteúdo somente back-end (CMS) é um sistema de gerenciamento de conteúdo somente back-end (CMS), que é construído desde o início como um repositório de conteúdo que torna o conteúdo acessível. Para integrar e obter valores do Cosmic, precisamos instalar o módulo Cosmic em seu projeto.
npm i cosmicjs yarn add cosmicjs
Em seguida, crie um conta cósmica gratuita e vai para Painel Cósmico Your Bucket > Settings > API Access
e encontre seu slug de bucket e chave de leitura de API e adicione-os à criação da função de busca cósmica fetchDataByType
solicite ao seu bucket cósmico e busque o conteúdo das categorias criadas por Consulta cósmica tipo categories
.
import Cosmic from 'cosmicjs'; const bucket = Cosmic().bucket({ slug: 'your_cosmic_slug', read_key: 'your_cosmic_read_key',
}); export async function fetchDataByType(objectType = 'categories') { const params = { query: { type: objectType, }, props: 'title,slug,id,metadata', sort: '-created_at', }; try { const data = await bucket.getObjects(params); return data.objects; } catch (error) { return { error }; }
}
O Cosmic também fornece recursos poderosos de modelagem de conteúdo que permitem que você crie qualquer tipo de publicação de conteúdo super-rápido e multicanal, para criar uma vez e publicar em qualquer lugar.
Busca ao renderizar
Abordagem de busca na renderização a solicitação de rede é acionada no próprio componente após a montagem, a solicitação não é acionada até que o componente seja renderizado. Se você não escrever uma função de limpeza que ignore respostas obsoletas, você notará um condição de corrida (em React) quando duas solicitações de dados ligeiramente diferentes foram feitas e o aplicativo exibe um resultado diferente dependendo de qual solicitação é concluída primeiro. De fato no React 18, se você habilitar o StrictMode em sua aplicação, no modo de desenvolvimento você descobrirá que usando useEffect será invocado duas vezes, pois agora o React irá montar seu componente, desmontar e depois montá-lo novamente, para verificar se seu código está funcionando corretamente.
Vamos corrigir uma condição de corrida de busca de dados aproveitando a useEffect
função de limpeza. Se concordarmos em fazer várias solicitações, mas renderizar apenas o último resultado, podemos usar um sinalizador booleano isMount
:
import React, { useEffect, useState } from 'react';
import Category from './components/Category';
import { fetchDataByType } from './cosmic.js'; const App = () => { const [categories, setCategories] = useState([]); const getCategories = async () => { const result = await fetchDataByType('categories'); if (result.length) { setCategories(result); } }; useEffect(() => { let isMount = true; if (isMount) { getCategories(); } return () => { isMount = false; }; }, []); return ( <div className={cn('container', styles.container)}> <div className={styles.sidebar}> <div className={styles.collections}> {categories?.map((category) => ( <Category key={category.id} info={category} /> ))} </div> </div> </div> );
}; export default App;
Além disso, se um componente for renderizado várias vezes (como normalmente ocorre), o efeito anterior será limpo antes de executar o próximo efeito.
Nesse caso, ainda temos uma condição de corrida no sentido de que várias solicitações ao Cosmic estarão em andamento, mas apenas os resultados da última serão usados.
Tambem como Dan Abramov explica, Busca ao renderizar fornece navegação lenta entre as telas. Se você tem componentes pai e filho ambos fazendo buscas useEffects
, o componente filho não poderá nem começar a buscar até que o componente pai termine de buscar. Esses tipos de problemas de desempenho são muito comuns em aplicativos de página única e causam muito mais lentidão do que "re-renderização excessiva" e se tivermos um aplicativo complexo com várias solicitações paralelas, veremos diferentes partes do aplicativo sendo carregadas em ordem aleatória . O comportamento mais natural para um aplicativo é renderizar as coisas de cima para baixo.
Renderizar conforme busca
Abordagem de renderização conforme você busca nos permite começar a renderizar nosso componente imediatamente após acionar a solicitação de rede e começamos a renderizar praticamente imediatamente após iniciar a solicitação de rede.
Suspense para busca de dados
Com o Suspense, não esperamos a resposta voltar antes de começar a renderizar e reduzir o Tempo Total de Bloqueio (TBT) do nosso exemplo de 106ms para 56ms.
O conjunto de recursos simultâneos da equipe principal do React para facilitar a busca de dados no React. Expectativa está entre eles e visa simplificar o gerenciamento de estados de carregamento em componentes React. É um recurso para gerenciar operações assíncronas em um aplicativo React e também permite usar <Suspense>
para “esperar” declarativamente por qualquer outra coisa, incluindo dados, e não precisar mais esperar que todo o JavaScript seja carregado para começar a hidratar partes da página.
Primeiro, acionamos a solicitação de rede antes de renderizar qualquer componente na linha um. No principal App
componente, nós envolvemos ambos Category
e Cards
, Main
componentes em separado Suspense
componentes com seus fallbacks.
Quando App
monta pela primeira vez, ele tenta renderizar Category
e isso aciona o resourseCategories.read()
linha. Se os dados ainda não estiverem prontos (ou seja, a solicitação não foi resolvida), eles são comunicados de volta ao Suspense, que então renderiza <p>Loading…</p>
. A mesma coisa acontece para Cards
e Main
import React, { Suspense } from 'react'; const App = () => { return ( <main> <Suspense fallback={<p>Loading.....</p>}> <Cards /> </Suspense> <div> <Suspense fallback={<p>Loading.....</p>}> <Category /> </Suspense> </div> </main> );
}; export default App;
Suspense
não é uma nova interface para buscar dados, pois esse trabalho ainda é delegado a bibliotecas como fetch ou Axios, e Suspense
trabalho real é apenas dizer “mostre este código enquanto estiver carregando e mostre isso quando estiver pronto”, nada mais do que isso.
Envolva sua lógica de busca wrapPromise.js
Também precisamos de lógica de busca de wrap, para lançar uma exceção quando nossos componentes estão carregando os dados ou falharam, mas simplesmente retornar a resposta assim que o Promise
é resolvido com sucesso e se ainda estiver pendente, ele devolve a Promessa.
function wrapPromise(promise) { let status = 'pending'; let response; const suspender = promise.then( res => { status = 'success'; response = res.objects; }, err => { status = 'error'; response = err; }, ); const handler = { pending: () => { throw suspender; }, error: () => { throw response; }, default: () => response, }; const read = () => { const result = handler[status] ? handler[status]() : handler.default(); return result; }; return { read };
} export default wrapPromise;
No final da wrapPromise
função verificará o estado de nossa promessa e retornará um objeto contendo o read
funciona como um método, e é com isso que nossos componentes React irão interagir para recuperar o valor da Promise.
Agora precisamos envolver as funções de chamada cósmica para wrapPromise
:
export function fetchDataByType(objectType = 'categories') { const params = { query: { type: objectType, }, props: 'title,slug,id,metadata', sort: '-created_at', }; const data = bucket.getObjects(params); return wrapPromise(data);
}
O acima é apenas uma abstração para funções de busca cósmica com Suspense
e buscar uma vez.
Leia os dados no componente
Uma vez que tudo está embrulhado no lado de busca das coisas, queremos usá-lo em nosso componente. Então, o que está acontecendo quando chamamos o componente, o read()
A função começará a lançar exceções até que seja totalmente resolvida e, quando isso acontecer, continuará com o restante do código, no nosso caso, para renderizá-lo.
import React from 'react';
import { fetchDataByType } from '../../cosmic.js';
import styles from '../../styles/Collection.module.scss'; const resourseCategories = fetchDataByType(); const Category = () => { const categories = resourseCategories.read(); const renderCategories = categories?.map((info) => ( <div key={info?.id} className={styles.user}> <div className={styles.avatar}> <img className={styles.image} src={info?.metadata?.image?.imgix_url} alt="Avatar" /> </div> <div className={styles.description}> <div className={styles.name}>{info?.metadata?.title}</div> <div className={styles.money} dangerouslySetInnerHTML={{ __html: info?.content }} /> </div> </div> )); return <div className={styles.collections}>{renderCategories}</div>;
}; export default Category;
O componente pai
Suspense
dá ao React acesso a estados pendentes em nossas aplicações e é por isso que o React sabe que uma chamada de rede está acontecendo, isso nos permite renderizar um componente de fallback declarativamente enquanto espera.
import React, { Suspense } from 'react';
import Cards from './components/Cards';
import Category from './components/Category';
import Main from './components/Main';
import styles from './styles/Collection.module.scss'; const App = () => { return ( <div className={styles.wrapper}> <div className={cn('section-pb', styles.section)}> <div className={cn('container', styles.container)}> <div className={styles.row}> <Suspense fallback={<p>Loading.....</p>}> <Main /> <Cards /> </Suspense> </div> <div className={styles.sidebar}> <div className={styles.info}> Collections <span className={styles.smile} role="img" aria-label="fire"> 🔥 </span> </div> <Suspense fallback={<p>Loading.....</p>}> <Category /> </Suspense> </div> </div> </div> </div> );
}; export default App;
Conclusão
Agora, com a Suspense
, você pode dividir seu aplicativo em unidades pequenas e independentes que podem ser renderizadas por conta própria sem o restante do aplicativo, permitindo que o conteúdo esteja disponível para o usuário ainda mais rápido do que antes. Exploramos as várias abordagens de busca de dados para comparação.
Experimente em seu próprio projeto e nos dê seu feedback. Você pode começar com Cosmic para um CMS rápido para testar a busca de dados com Suspense
para sites e aplicativos.
- Conteúdo com tecnologia de SEO e distribuição de relações públicas. Seja amplificado hoje.
- Platoblockchain. Inteligência Metaverso Web3. Conhecimento Ampliado. Acesse aqui.
- Fonte: https://www.codementor.io/nairage/react-18-suspense-fetch-data-from-a-headless-cms-1wh1armfwa
- a
- Sobre
- acima
- Acesso
- acessível
- Adiciona
- Vantagem
- afetar
- Depois de
- visa
- Todos os Produtos
- Permitindo
- permite
- entre
- e
- api
- app
- Aplicação
- aplicações
- se aproxima
- Aplicativos
- disponível
- avatar
- Axios
- em caminho duplo
- Back-end
- Backend
- Porque
- antes
- Melhor
- entre
- bloqueio
- Inferior
- Break
- Bug
- construído
- Pacote
- chamada
- Pode obter
- Cartões
- casas
- Categorias
- Categoria
- Causar
- verificar
- criança
- escolhas
- Escolha
- cliente
- cms
- código
- coleções
- como
- comum
- comparar
- comparação
- Completa
- integrações
- componente
- componentes
- conclusão
- concorrente
- condição
- conteúdo
- continuar
- núcleo
- crio
- criado
- Criar
- dados,
- atraso
- entregar
- Dependendo
- projetado
- Desenvolvimento
- diferente
- monitores
- Não faz
- fazer
- não
- mais fácil
- efeito
- permitir
- erro
- Mesmo
- Evento
- tudo
- exemplo
- exemplos
- exceção
- vasta experiência
- Explica
- explorar
- Explorado
- fracassado
- RÁPIDO
- mais rápido
- Característica
- Funcionalidades
- retornos
- Encontre
- Fogo
- Primeiro nome
- primeira vez
- Fixar
- da
- totalmente
- função
- funções
- gerar
- ter
- OFERTE
- dá
- Go
- ótimo
- acontecer
- acontece
- ajudar
- Como funciona o dobrador de carta de canal
- HTML
- HTTPS
- imagem
- imediatamente
- melhorar
- melhorias
- in
- Incluindo
- do estado inicial,
- entrada
- instalar
- integrar
- integração
- interagir
- interação
- interatividade
- Interface
- intuitivo
- IT
- se
- JavaScript
- Trabalho
- Chave
- Tipo
- Sobrenome
- Latência
- Comprimento
- Permite
- bibliotecas
- Line
- LINK
- carregar
- carregamento
- cargas
- mais
- lote
- moldadas
- a Principal
- principal
- fazer
- FAZ
- Fazendo
- de grupos
- gestão
- mescla
- metadados
- método
- Moda
- módulo
- mais
- MONTE
- múltiplo
- natural
- Navegação
- você merece...
- rede
- Novo
- Próximo
- objeto
- objetos
- OK
- ONE
- Operações
- Otimize
- ordem
- Outros
- próprio
- Paralelo
- parte
- peças
- atuação
- espaço reservado
- platão
- Inteligência de Dados Platão
- PlatãoData
- possível
- poderoso
- Prática
- bastante
- anterior
- problemas
- projeto
- promessa
- devidamente
- fornecer
- fornece
- publicar
- Publishing
- Links
- Corrida
- acaso
- RE
- Reagir
- Leia
- pronto
- reais
- percebendo
- reduzir
- representação
- torna
- repositório
- solicitar
- pedidos
- resolvidas
- resposta
- DESCANSO
- resultar
- Resultados
- retorno
- mesmo
- telas
- sentido
- de servir
- conjunto
- Configurações
- vários
- mostrar
- de forma considerável
- simplificar
- simplesmente
- ligeiramente diferente
- lento
- pequeno
- So
- Soluções
- começo
- começado
- Estado
- Unidos
- Status
- Ainda
- de streaming
- sucesso
- entraram com sucesso
- ajuda
- .
- tomar
- Profissionais
- teste
- A
- deles
- coisa
- coisas
- tempo
- vezes
- Título
- para
- topo
- Total
- tradicional
- Transparência
- desencadear
- desencadeado
- desencadeando
- tipos
- tipicamente
- unidades
- us
- usar
- Utilizador
- Experiência do Usuário
- usuários
- ux
- valor
- Valores
- vário
- esperar
- Esperando
- webp
- Site
- sites
- O Quê
- O que é a
- qual
- enquanto
- precisarão
- dentro
- sem
- trabalhar
- seria
- embrulho
- Envolvido
- escrever
- XML
- investimentos
- Youtube
- zefirnet