Exploring Streaming in Next.js: Enhancing Performance and User Experience
Tags: nextjs, webdev, javascript, beginners
Published: 2024-03-30 13:41:44

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.


![Streaming nexjs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s5z99f3bi23ryooel1a4.png)




## 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.

```javascript
import DashboardSkeleton from "@/app/ui/skeletons";
export default function Loading() {
    return <DashboardSkeleton />;
}

```

- Animation while loading the page

```react
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.

```react
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.


```react
export default async function RevenueChart() {
  const revenue = await fetchRevenue();
...
}
```
- Create the animation while waiting for data retrieved for the component

```react
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

![Result image](https://res.cloudinary.com/drn3o5oc4/image/upload/v1711804476/devto/r7sq5ivxhqblonbnlqln.gif)


## 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.