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.

Comments

[Fatemeh Paghar]

Other Benefits of Streaming
Reduced Server Load: Streaming can distribute the data delivery over time, which can help in managing server load more effectively. This is particularly advantageous during peak traffic times, as it prevents the server from being overwhelmed by simultaneous requests.

Efficient Data Handling: For applications that deal with real-time data or large datasets, streaming enables a smoother data handling process. Developers can prioritize critical data to be sent first, ensuring that users have access to the most important information as quickly as possible.

Better Integration with Modern Web Technologies: Next.js's streaming capabilities are designed to work seamlessly with modern web technologies, such as React's Suspense and Concurrent Mode. This allows developers to build highly interactive and dynamic applications with improved performance and scalability.

Flexibility in Content Delivery: Streaming offers developers the flexibility to choose how and when different parts of the application are loaded. This can be used to enhance the user experience further by prioritizing content based on user behavior or other criteria.

Optimization for Low-powered Devices: Since streaming allows for content to be delivered and rendered incrementally, it's particularly beneficial for users on low-powered devices or older hardware, ensuring that the application remains usable across a wide range of devices.

[cuongnp]

Totally! That's good to know.