Reagire 18 Suspense recuperare i dati da un CMS headless

Per offrire un'esperienza utente eccezionale del sito Web, è necessario ottimizzare il tempo di caricamento della prima pagina iniziale e la reattività della pagina all'interazione. Più velocemente la tua pagina risponde all'input dell'utente, meglio è.

Reagisci 18 è stato progettato per migliorare l'interattività con funzionalità come idratazione selettiva con Suspense per rendere l'idratazione non bloccante e fornirci una maggiore trasparenza su come la nostra architettonico le scelte influiranno sull'esperienza utente e sulle prestazioni della nostra app. React 18 apporta importanti miglioramenti alle prestazioni e aggiunge il supporto per Suspense sul rendering lato server (SSR) che consente di servire parti di un'app in modo asincrono, puoi avvolgere una parte lenta della tua app all'interno del componente Suspense, dicendo a React di ritardare il caricamento del componente lento.

Reagisci 18 è stato recentemente rilasciato con funzionalità progettate per migliorare l'interattività. Funzionalità come idratazione selettiva con Suspense per rendere l'idratazione non bloccante e fornirci una maggiore trasparenza su come la nostra architettonico le scelte influiranno sull'esperienza utente e sulle prestazioni della nostra app. React 18 aggiunge il supporto per Suspense sul rendering lato server (SSR) che consente di servire parti di un'app in modo asincrono, puoi avvolgere una parte lenta della tua app all'interno del componente Suspense, dicendo a React di ritardare il caricamento del componente lento.

Il rendering lato server ti consente di generare HTML dai componenti React sul server e di inviare quell'HTML ai tuoi utenti. SSR consente agli utenti di vedere il contenuto della pagina prima del caricamento e dell'esecuzione del bundle JavaScript, dopodiché il codice JavaScript viene caricato e unito all'HTML, allegando gestori di eventi, il che è idratazione. A differenza dello streaming HTML tradizionale, non è necessario che avvenga nell'ordine dall'alto verso il basso.

Con Suspense, puoi dire a React di inviare prima l'HTML per altri componenti insieme all'HTML per il segnaposto, come uno spinner di caricamento. Migliora significativamente l'esperienza dell'utente e la latenza percepita dall'utente.

Ci sono due principali caratteristiche SSR in Reagire 18 sbloccato da Suspense:

• Streaming HTML sul server.
• Idratazione selettiva sul cliente.

Esploriamo Reagire Approcci di recupero dati con useEffect ed Suspense prova a confrontare i dati di backend recuperando soluzioni pratiche, nel nostro caso scegliamo un CMS headless veloce e intuitivo Cosmico. I nostri esempi di codice puoi controllare tramite un link StackBlitz.

Integrazione Cosmic Headless CMS

Per il recupero dei dati utilizziamo CMS cosmico senza testa è un sistema di gestione dei contenuti (CMS) solo back-end è un sistema di gestione dei contenuti (CMS) solo back-end, creato da zero come repository di contenuti che rende i contenuti accessibili. Per integrare e ottenere valori da Cosmic, dobbiamo installare il modulo Cosmic nel tuo progetto.

npm i cosmicjs

yarn add cosmicjs

Quindi creare un conto cosmico gratuito e andare a Cruscotto cosmico Your Bucket > Settings > API Access e trova lo slug Bucket e la chiave di lettura API e aggiungili alla creazione della funzione di recupero cosmico fetchDataByType richiesta al tuo secchio cosmico e recupera i contenuti delle categorie create da Domanda cosmica Digitare 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 };
  }
}

Cosmic fornisce anche potenti funzionalità di modellazione dei contenuti che ti consentono di creare qualsiasi tipo di contenuto pubblicazione super veloce e multicanale, per creare una sola volta e pubblicare ovunque.

Recupero al rendering

Approccio fetch-on-render la richiesta di rete viene attivata nel componente stesso dopo il montaggio, la richiesta non viene attivata finché il componente non esegue il rendering. Se non scrivi una funzione di pulizia che ignori le risposte obsolete, noterai a condizione di gara (in React) quando sono state effettuate due richieste di dati leggermente diverse e l'applicazione visualizza un risultato diverso a seconda di quale richiesta viene completata per prima. Infatti su React 18, se abiliti StrictMode nella tua applicazione, in modalità sviluppo scoprirai che usando useEffect verrà invocato due volte, perché ora React monterà il tuo componente, smonterà e poi lo rimonterà, per verificare se il tuo codice funziona correttamente.

Risolviamo una condizione di gara per il recupero dei dati sfruttando il useEffect funzione di pulizia. Se siamo d'accordo con diverse richieste, ma solo con il rendering dell'ultimo risultato, possiamo usare un flag 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;

Inoltre, se un componente esegue il rendering più volte (come in genere), l'effetto precedente viene ripulito prima di eseguire l'effetto successivo.

In questo caso, abbiamo ancora una race condition, nel senso che più richieste a Cosmic saranno in volo, ma verranno utilizzati solo i risultati dell'ultima.

Anche come Dan Abramov spiega, Recupero al rendering fornisce una navigazione lenta tra le schermate. Se hai componenti padre e figlio entrambi stanno facendo il recupero useEffects, il componente figlio non può nemmeno avviare il recupero finché il componente padre non termina il recupero. Questi tipi di problemi di prestazioni sono molto comuni nelle app a pagina singola e causano molta più lentezza rispetto al "rendering eccessivo" e se abbiamo un'applicazione complessa con più richieste parallele, vedremmo diverse parti del caricamento dell'applicazione in ordine casuale . Il comportamento più naturale per un'applicazione è quello di eseguire il rendering delle cose dall'alto verso il basso.

Rendering durante il recupero

Approccio render-as-you-fetch ci consente di iniziare il rendering del nostro componente immediatamente dopo aver attivato la richiesta di rete e iniziamo il rendering praticamente immediatamente dopo aver avviato la richiesta di rete.

Suspense per il recupero dei dati

Con Suspense, non aspettiamo che la risposta ritorni prima di iniziare il rendering e ridurre il Total Blocking Time (TBT) del nostro esempio da 106 ms a 56 ms.

Il set di funzionalità simultanee del team principale di React per semplificare il recupero dei dati in React. Suspense è tra questi e mira a semplificare la gestione degli stati di caricamento nei componenti React. È una funzionalità per la gestione delle operazioni asincrone in un'app React e ti consente anche di utilizzare <Suspense> per "aspettare" dichiarativamente qualsiasi altra cosa, inclusi i dati, e non dover più attendere il caricamento di tutto il JavaScript per iniziare a idratare parti della pagina.

Innanzitutto, attiviamo la richiesta di rete prima di eseguire il rendering di qualsiasi componente sulla linea uno. Nel principale App componente, avvolgiamo entrambi  Category ed Cards, Main componenti separatamente Suspense componenti con i loro fallback.

Quando App monta per la prima volta, prova a renderizzare Category e questo fa scattare il resourseCategories.read() linea. Se i dati non sono ancora pronti (cioè la richiesta non è stata risolta), vengono comunicati a Suspense, che quindi rende <p>Loading…</p>. La stessa cosa accade per Cards ed 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 non è una nuova interfaccia per recuperare i dati, poiché quel lavoro è ancora delegato a librerie come fetch o Axios e Suspense il vero lavoro è semplicemente dire "mostra questo codice durante il caricamento e mostralo quando è finito", niente di più.

Avvolgi la tua logica di recupero wrapPromise.js

Abbiamo anche bisogno della logica di recupero del wrapping, per generare un'eccezione quando i nostri componenti stanno caricando i dati o non è riuscito, ma poi semplicemente restituire la risposta una volta che il Promise viene risolto con successo e, se è ancora in sospeso, annulla la 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;

Alla fine del wrapPromise la funzione verificherà lo stato della nostra promessa, quindi restituirà un oggetto contenente il read funzionano come un metodo, e questo è ciò con cui i nostri componenti React interagiranno per recuperare il valore della Promessa.

Ora dovremo avvolgere le funzioni di chiamata cosmica in 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);
}

Quanto sopra è solo un'astrazione per le funzioni di recupero cosmico con Suspense e prendi una volta.

Leggi i dati nel componente

Una volta che tutto è stato risolto sul lato del recupero delle cose, vogliamo usarlo nel nostro componente. Quindi cosa sta succedendo quando chiamiamo il componente, il read() la funzione inizierà a generare eccezioni fino a quando non sarà completamente risolta e, quando ciò accadrà, continuerà con il resto del codice, nel nostro caso per eseguirne il rendering.

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;

Il componente padre

Suspense fornisce a React l'accesso agli stati in sospeso nelle nostre applicazioni ed è per questo che React sa che è in corso una chiamata di rete, questo ci consente di eseguire il rendering di un componente di fallback in modo dichiarativo durante l'attesa.

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;

Conclusione

Ora, con Suspense, puoi suddividere la tua app in piccole unità autonome di cui è possibile eseguire il rendering da sole senza il resto dell'app, consentendo ai contenuti di essere disponibili per l'utente anche molto più velocemente di prima. Abbiamo esplorato i vari approcci di recupero dei dati per il confronto.

Provalo nel tuo progetto e dacci il tuo feedback. Puoi iniziare con Cosmico per un rapido CMS con cui testare il recupero dei dati Suspense per siti Web e app.