Exploring Streaming in Next.js: Enhancing Performance and User Experience

Recently, I've been studying NextJS through official documentation for a few weeks. To be honest, not many things surprise me as I have prior experience with ReactJS.However, streaming is the most emotionally meaningful to me. This article discusses the idea of streaming in Next.js and looks at a few ways to use it.

So, What is Streaming in Next.js?

Next.js streaming allows you to progressively deliver the HTML content of your web page to the browser in chunks, rather than waiting for the entire page to render on the server. This enables users to see parts of the page sooner, improving perceived performance.

Years ago, I had to manually handle the loading data, design the loading animation, and construct the local state for the component to output the pages appropriately and by my expectations. With NextJS, all of that is altered—and for the better.

Benefits of Streaming

• 
  Faster Initial Load: Users see content appear quicker, enhancing the perception of website speed.


• 
  Improved User Experience: Users can interact with parts of the page (e.g., navigation) while other content loads in the background.


• 
  SEO Friendliness: Next.js ensures critical SEO information like head tags are included in the initial streamed response.

What we do?

1. 
   Streaming at the Page Level (loading.tsx):
   
   
   
   
   • Next.js provides a special loading.tsx file for each route.
   
   
   • This file allows you to display a loading indicator or placeholder content while the server fetches data for the page.
   
   
   • Once data is available, the server streams the actual page content, replacing the loading UI.
   
   
   
   


2. 
   Streaming with Suspense and React Components:
   
   
   
   
   • Next.js integrates with React's Suspense component, enabling you to control streaming at the component level.
   
   
   • Wrap components that rely on asynchronous data fetching with Suspense.
   
   
   • Next.js intelligently streams these components' HTML only after the required data is available.
   
   
   • You can provide fallback UI within Suspense to display while data is loading.
   
   
   
   

Let’s figure it out

In project, create a folder for new page. For example, I create dashboard, and (overview) with loading.tsx and page.tsx inside.

└── app/

    └── dashboard/

        └── (overview)/

            ├── loading.tsx

            └── page.tsx

():Why do we need this one? This question arises from the fact that Next.js supports file system routing, where folders are utilized to create nested routes. However, there are scenarios where customization of page.tsx is desired, often requiring it to be placed in a subfolder. Without parentheses, accessing page.tsx within a subfolder becomes impossible.

• Use loading.tsx for scenarios where the entire page depends on data fetching.
  

import DashboardSkeleton from "@/app/ui/skeletons";

export default function Loading() {

    return <DashboardSkeleton />;

}

• Animation while loading the page
  

export default function DashboardSkeleton() {

  return (

    <>

      <div

        className={`${shimmer} relative mb-4 h-8 w-36 overflow-hidden rounded-md bg-gray-100`}

      />

      <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">

        <CardSkeleton />

        <CardSkeleton />

        <CardSkeleton />

        <CardSkeleton />

      </div>

      <div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-8">

        <RevenueChartSkeleton />

        <LatestInvoicesSkeleton />

      </div>

    </>

  );

}

• Use Suspense for components that can be streamed independently, enhancing perceived performance for granular sections of your page.
  

export default async function Page() {

    return (

        <main>

       ...

            <div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-8">

                <Suspense fallback={<RevenueChartSkeleton/>}>

                    <RevenueChart />

                </Suspense>

               ....

            </div>

        </main>

    )

}

• Inside the component, don’t forget to use the async and await to retrieve the data synchronously.
  

export default async function RevenueChart() {

  const revenue = await fetchRevenue();

...

}

• Create the animation while waiting for data retrieved for the component
  

export function RevenueChartSkeleton() {

  return (

    <div className={`${shimmer} relative w-full overflow-hidden md:col-span-4`}>

      <div className="mb-4 h-8 w-36 rounded-md bg-gray-100" />

      <div className="rounded-xl bg-gray-100 p-4">

        <div className="mt-0 grid h-[410px] grid-cols-12 items-end gap-2 rounded-md bg-white p-4 sm:grid-cols-13 md:gap-4" />

        <div className="flex items-center pb-2 pt-6">

          <div className="h-5 w-5 rounded-full bg-gray-200" />

          <div className="ml-2 h-4 w-20 rounded-md bg-gray-200" />

        </div>

      </div>

    </div>

  );

}

🎉 🎉 🎉 And finally we got

Final thought

Next.js streaming empowers developers to deliver a more responsive and performant user experience. By incorporating streaming techniques into your Next.js applications, you can keep users engaged while optimizing their overall interaction with your web pages.