Here are some rules/recommendations, tips & ticks for creating new posts in AstroPaper blog theme.

Table of contents#

Overview#

Suspense boundaries are a powerful feature of React and Next.js which can also be used on top of libraries / frameworks built on top of React. It allows the flow of asynchronous rendering by halting certain components such as data fetching. This makes it easier to display loading states and fallbacks which improves the user experience by showing a certain section is loading whilst the other section is displayed.

How to use#

We created a suspense boundary around the BlogPosts component which will show a Loading... fallback until the fetch request has completed. Therefore this will show the <h1> and <p> tags whilst the data is being loaded - without the suspense boundary the whole page will be blocked until the data has been loaded.

import { Suspense } from "react";
import BlogPosts from "./BlogPosts";

export default function page() {
  return (
    <div>
      <h1>Welcome to my blog!</h1>
      <p>Thanks for visiting</p>
      <Suspense fallback={<div>Loading...</div>}>
        <BlogPosts />
      </Suspense>
    </div>
  );
}
Copy

// ./page.tsx
import getPosts from "./fetchFunctions.ts";

export default async function BlogPosts() {
  const ports = await getPosts();
  return <></>;
}
Copy

Conclusion#

The Suspense boundary feature is incredibly powerful as it significantly enhances the user experience by providing feedback during asynchronous operations. It allows developers to display fallback content, like a loading spinner or placeholder, while a section of the page is being loaded. This ensures that users are never left in the dark and are aware that something is in progress. Once the data is ready, the relevant section of the page is instantly updated with the content, delivering a smooth and polished experience. By managing loading states effectively, Suspense helps improve perceived performance and user satisfaction.