To deliver a great website user experience, we need to optimize the first initial page load time and the page's responsiveness to interaction. The faster your page responds to user input – the better. was designed to help improve interactivity with features like with to make hydration non-blocking and provide us with more transparency about how our choices will affect our app's UX and performance. React 18 makes major performance improvements and adds support for on server-side rendering (SSR) allowing serving parts of an app asynchronously possible, you can wrap a slow part of your app within the Suspense component, telling React to delay the loading of the slow component. React 18 selective hydration Suspense architectural Suspense Server-side rendering lets you generate HTML from React components on the server, and send that HTML to your users. SSR lets your users see the page’s content before your JavaScript bundle loads and runs, after which the JavaScript code loads and merges with the HTML, attaching event handlers  - which is . Unlike traditional HTML streaming, it doesn’t have to happen in the top-down order. hydration With , you can tell React to send HTML for other components first along with the HTML for the placeholder, like a loading spinner. It significantly improves the user experience and user-perceived latency. Suspense There are two major SSR features in : React 18 unlocked by Suspense Streaming HTML on the server. Selective Hydration on the client. Let's explore with and to try to compare backend data fetching practical solutions, in our case we choose a fast and intuitive headless CMS . Our code examples you can check by a link . React Data fetching approaches useEffect Suspense Cosmic StackBlitz Integration Cosmic Headless CMS For fetching data as backend we use , it’s a back-end only content management system (CMS), which is built from the ground up as a content repository that makes content accessible. To integrate and get values from Cosmic, we need to install the Cosmic module in your project. Cosmic headless CMS npm i cosmicjs
# or
yarn add cosmicjs Then create a and go to and find your Bucket slug and API read key and add them to creating Cosmic fetch function request to your bucket and fetch created Categories content by type . free Cosmic account Cosmic Dashboard Your Bucket > Settings > API Access fetchDataByType Cosmic query categories // cosmic.js
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 also provide powerful content modeling features that let you create any kind of content super-fast and multi-channel publishing, for realizing create once and publish everywhere. Data fetching approaches Fetch-on-render the network request is triggered in the component itself after mounting, the request isn’t triggered until the component renders. If you don't write a cleanup function that ignores stale responses, you'll notice a (in React) bug when two slightly different requests for data have been made, and the application displays a different result depending on which request completes first. In fact on React 18, if you enable StrictMode in your application, in development mode you will find out that using useEffect will be invoked twice, because now React will mount your component, dismount, and then mount it again, to check if your code is working properly. Fetch-on-render approach race condition Let's fix a data fetching race condition by taking advantage of the clean-up function. If we're okay with making several requests, but only rendering the last result, we can use a boolean flag : useEffect isMount // FetchWithUseEffect/App.js
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();
    }

    //useEffect clean-up function
    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; Additionally, if a component renders multiple times (as they typically do), the previous effect is cleaned up before executing the next effect. In this case, we still have a race condition in the sense that multiple requests to Cosmic will be in-flight, but only the results from the last one will be used. Also as explains, provides slow navigation between screens. If you have both doing fetching in , then the child component can't even start fetching until the parent component finishes fetching. These types of performance problems are very common in single-page apps and cause a lot more slowness than "excessive re-rendering" and if we have a complex application with multiple parallel requests, we would see different parts of the application load in random order. The more natural behavior for an application is to render things from top to bottom. Dan Abramov Fetch-on-render parent and child components useEffects Render-as-you-fetch lets us begin rendering our component immediately after triggering the network request and we start rendering pretty much immediately after kicking off the network request. Render-as-you-fetch approach Suspense for Data Fetching With Suspense, we don’t wait for the response to come back before we start rendering and reduce the Total Blocking Time (TBT) of our example from 106ms to 56ms. The React core team set of concurrent features to make data fetching in React easier. is among these, and it aims to simplify managing loading states in React components.  It’s a feature for managing asynchronous operations in a React app and lets you also use to declaratively “wait” for anything else, including data, and no longer have to wait for all the JavaScript to load to start hydrating parts of the page. Suspense <Suspense> First, we trigger the network request before rendering any components on line one. In the main component, we wrap both and , components in separate components with their fallbacks. App Category Cards Main Suspense When mounts for the first time, it tries to render and this triggers the line. If the data isn’t ready yet (i.e., the request hasn’t been resolved), it is communicated back to Suspense, which then renders . The same thing happens for and App Category resourseCategories.read() <p>Loading…</p> Cards Main // App.js
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; it is not a new interface to fetch data, as that job is still delegated to libraries like or , and real job is to just say "show this code while is loading, and show that when it's done", nothing more than that. Suspense fetch Axios Suspense Wrap your fetching logic wrapPromise.js We also need wrap fetching logic, to throw an exception when our components are loading the data or it failed, but then simply return the response once the is resolved successfully and if it is still pending, it throws back the Promise. Promise // wrapPromise.js
//Wraps a promise so it can be used with React Suspense

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; At the end of the function will check our promise's state, then return an object containing the function as a method, and this is what our React components will interact with to retrieve the value of the Promise. wrapPromise read Now we'll need to wrap the Cosmic call functions to : wrapPromise // cosmic.js

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);
} The above is just an abstraction for Cosmic fetching functions with and fetch one time. Suspense Read the data in the component Once everything is wrapped up on the fetching side of things, we want to use it in our component. So what is happening when we call the component, the function will start to throw exceptions until it's fully resolved, and when that happens it will continue with the rest of the code, in our case to render it. read() //components/Category
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; The parent component gives React access to pending states in our applications and thats why React knows that a network call is happening, this allows us to render a fallback component declaratively while waiting. Suspense // App.js
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; Conclusion Now, with , you can break your app into small, stand-alone units that can be rendered on their own without the rest of the app, allowing content to be available to your user even much faster than before. We explored the various data fetching approaches for comparison. Suspense Try it in your own project and give us your feedback. You can get started with for a quick CMS to test data fetching with for websites and apps. Cosmic Suspense

Fetch

Super

YouTube

How to Search and Filter Data Using React Hooks and a Headless CMS 

Too Long; Didn't Read

Make resilience your competitive advantage

React 18 Suspense fetch data from a headless CMS

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Build a Production Ready Restaurant Website with Next.js 12 and Cosmic

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

10 Websites to Learn JavaScript for Beginners

Build a Production Ready Restaurant Website with Next.js 12 and Cosmic

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

10 Websites to Learn JavaScript for Beginners

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps