{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"The introduction of "},{"type":"text","marks":[{"type":"bold"}],"text":"Next.js streaming"},{"type":"text","text":" in version 14 is a game-changer for building fast, responsive web applications. Combined with "},{"type":"text","marks":[{"type":"bold"}],"text":"React Suspense"},{"type":"text","text":", this feature allows developers to deliver content to users in real time as soon as it's ready, resulting in better performance and a seamless user experience. This blog post explores how the Next.js streaming feature works, how it integrates with "},{"type":"text","marks":[{"type":"bold"}],"text":"React Suspense"},{"type":"text","text":", and why this powerful combination is essential for modern web development."}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"What is Next.js Streaming?"}]},{"type":"paragraph","content":[{"type":"text","marks":[{"type":"bold"}],"text":"Next.js streaming"},{"type":"text","text":" refers to incrementally sending parts of the HTML and CSS from the server to the client as the data becomes available. Streaming allows developers to deliver each React component as a chunk instead of waiting for the entire page to load before sending it to the browser. This improves page load times (Time To First Bytes) and provides users immediate feedback (First Contentful Paint)."}]},{"type":"paragraph","content":[{"type":"text","text":"Traditionally, server-side rendering (SSR) waits for all data to be ready before rendering the page, which can cause delays, especially for data-heavy applications. With streaming, Next.js allows you to stream parts of the page to the client as soon as they're available without waiting for the entire page to finish loading."}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"What is React Suspense?"}]},{"type":"paragraph","content":[{"type":"text","marks":[{"type":"bold"}],"text":"React Suspense"},{"type":"text","text":" is a feature in React that allows you to \"suspend\" the rendering of a component until certain asynchronous conditions (like fetching data) are met. While waiting for the data, Suspense provides a fallback UI (like a loading spinner), and once the data is ready, it renders the actual content."}]},{"type":"paragraph","content":[{"type":"text","text":"One drawback of SSR is that the user must wait on an \"all-or-nothing\" waterfall, which is waiting for the data fetching, javascript download and execution, and hydration to complete before interacting with the webpage."}]},{"type":"paragraph","content":[{"type":"text","text":"By wrapping "},{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":" to the React Component, React will deprioritise the hydration and rendering of the component."}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"How Does Next.js Streaming Work with React Suspense"}]},{"type":"paragraph","content":[{"type":"text","text":"In Next.js 14, "},{"type":"text","marks":[{"type":"bold"}],"text":"streaming"},{"type":"text","text":" and "},{"type":"text","marks":[{"type":"bold"}],"text":"React Suspense"},{"type":"text","text":" work hand-in-hand to handle asynchronous data fetching and render components as soon as the data becomes available. Here's how they work together:"}]},{"type":"orderedList","attrs":{"start":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"bold"}],"text":"Asynchronous Data Fetching"},{"type":"text","text":": Components that fetch data asynchronously can be wrapped in "},{"type":"text","marks":[{"type":"bold"}],"text":"React Suspense"},{"type":"text","text":", allowing the UI to display a fallback while waiting for the data."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"bold"}],"text":"Streaming Parts of the Page"},{"type":"text","text":": Next.js sends the initial HTML (which includes the Suspense fallback) to the client. As the data becomes available, it streams the final content to the browser and updates the UI seamlessly."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"bold"}],"text":"Improved Time to First Byte (TTFB)"},{"type":"text","text":": By streaming parts of the page immediately, users see content faster, improving TTFB, an important metric for performance and SEO."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"The duo has enabled us to combine the Server and Client components into one component without complexity. "}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"Benefits of Next.js Streaming with React Suspense"}]},{"type":"orderedList","attrs":{"start":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"bold"}],"text":"Faster Load Times"},{"type":"text","text":": By streaming content incrementally, users see parts of the page immediately rather than waiting for the entire page to load. This significantly improves perceived performance."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"bold"}],"text":"Optimized User Experience"},{"type":"text","text":": With React Suspense, users get immediate feedback through fallback UIs, ensuring a smoother experience even while data is being fetched."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"bold"}],"text":"Improved SEO"},{"type":"text","text":": Streaming reduces "},{"type":"text","marks":[{"type":"bold"}],"text":"time to first byte (TTFB)"},{"type":"text","text":", a critical factor for search engine ranking. Faster TTFB and rendering of visible content lead to better SEO performance."}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"Key Use Cases for Next.js Streaming"}]},{"type":"orderedList","attrs":{"start":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"bold"}],"text":"Data-Heavy Applications"},{"type":"text","text":": Applications that fetch a lot of data can benefit from streaming, as users can see parts of the page even while other data is still being fetched."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"bold"}],"text":"Progressive Web Applications (PWAs)"},{"type":"text","text":": PWAs prioritising user experience can use streaming to ensure a smooth, responsive UI, even on slower connections."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"bold"}],"text":"E-commerce"},{"type":"text","text":": E-commerce platforms that load product details, reviews, and recommendations can improve user retention by delivering content incrementally, keeping the user engaged."}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"How To Implement Next.js Streaming with React Suspense"}]},{"type":"paragraph","content":[{"type":"text","text":"Next.js ships streaming features out of the box without extra configurations. We need to wrap the Server component with "},{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":" and Next.js will automatically stream the component asynchronously."}]},{"type":"paragraph","content":[{"type":"text","text":"For example, a product details page must load the product details and recommend users with similar products as below."}]},{"type":"codeBlock","attrs":{"language":"jsx"},"content":[{"type":"text","text":"import { ProductDetails } from \"./product-details\";\nimport { SimilarProducts } from \"./similar-products\";\n\nexport default async function ProductDetailsPage({\n params: { id },\n}: {\n params: { id: string };\n}) {\n return (\n

Product Details (Slow)

\n \n

Similar Products

\n \n

\n );\n}"}]},{"type":"heading","attrs":{"level":3},"content":[{"type":"text","text":"Wrapping The Components with React Suspense"}]},{"type":"paragraph","content":[{"type":"text","text":"To improve the user experience, we want to prioritise displaying product details and defer loading similar products. Then, we can wrap the "},{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":" component with "},{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":" component."}]},{"type":"codeBlock","attrs":{"language":"jsx"},"content":[{"type":"text","text":"import { Suspense } from \"react\";\nimport { ProductDetails } from \"./product-details\";\nimport { SimilarProducts } from \"./similar-products\";\n\nexport default async function ProductDetailsPage({\n params: { id },\n}: {\n params: { id: string };\n}) {\n return (\n

Product Details (Optimised)

\n \n

Similar Products

\n {/* Suspense is used to wrap the component that is being loaded dynamically without blocking TTFB */}\n Loading...

}>\n \n \n \n );\n}\n"}]},{"type":"heading","attrs":{"level":3},"content":[{"type":"text","text":"Providing Loading UI for React Suspense"}]},{"type":"paragraph","content":[{"type":"text","text":"While waiting for the "},{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":" component to render, we can provide the loading UI in the "},{"type":"text","marks":[{"type":"code"}],"text":"fallback"},{"type":"text","text":" ."}]},{"type":"heading","attrs":{"level":3},"content":[{"type":"text","text":"Error Handling for React Suspense"}]},{"type":"paragraph","content":[{"type":"text","text":"It is also very important to ensure that we provide a good user experience when any error occurs. We can render the error message if the error occurs in the "},{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":" component itself. For example"}]},{"type":"codeBlock","attrs":{"language":"jsx"},"content":[{"type":"text","text":"import { Product } from \"@/app/types\";\nimport { ProductListItem } from \"./product-list-item\";\n\nexport const SimilarProducts = async ({ id }: { id: number }) => {\n let products: Product[] = [];\n try {\n products = await fetch(\n `http://localhost:3000/api/products/${id}/similar`\n ).then((res) => res.json());\n } catch (e) {\n // Render the error message\n return

Failed to load similar products. Please refresh the page

;\n }\n\n return (\n

\n {products.map((product) => (\n \n ))}\n

\n );\n};\n"}]},{"type":"paragraph","content":[{"type":"text","text":"This approach handles errors well because it renders error messages granularly without affecting the interaction and experience of other parts of the page. In this example, the user could still purchase the product even though similar products cannot render correctly."}]},{"type":"paragraph","content":[{"type":"text","text":"You can check out the "},{"type":"text","marks":[{"type":"link","attrs":{"href":"https://github.com/tekminewe/nextjs-streaming-demo","target":"_blank","rel":"noopener noreferrer","class":null}}],"text":"Next.js Streaming and Partial Prerendering demo repository"},{"type":"text","text":" to get a glimpse of the Next.js streaming and React Suspense example we have gone through in this post."}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"Conclusion"}]},{"type":"paragraph","content":[{"type":"text","marks":[{"type":"bold"}],"text":"Next.js streaming"},{"type":"text","text":" combined with "},{"type":"text","marks":[{"type":"bold"}],"text":"React Suspense"},{"type":"text","text":" brings the best of both worlds: faster load times and an improved user experience. By delivering content in real-time as it's ready, your users will experience faster, more responsive applications, and you'll see improvements in performance metrics like TTFB and SEO rankings."}]},{"type":"paragraph","content":[{"type":"text","text":"Next.js 14 also introduces a new experimental "},{"type":"text","marks":[{"type":"link","attrs":{"href":"https://www.tekminewe.com/blog/unlock-the-partial-prerendering-in-nextjs14-boosting-performance-for-dynamic-pages","target":"_blank","rel":"noopener noreferrer","class":null}}],"text":"Partial Prerendering"},{"type":"text","text":" feature that can partially prerender the page while leaving the suspense-wrapped component to render dynamically."}]},{"type":"heading","attrs":{"level":3},"content":[{"type":"text","text":"Key Takeaways"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"bold"}],"text":"Next.js streaming"},{"type":"text","text":" sends content incrementally, improving performance and user experience."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"bold"}],"text":"React Suspense"},{"type":"text","text":" provides a graceful way to handle asynchronous operations with loading fallbacks."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Combining "},{"type":"text","marks":[{"type":"bold"}],"text":"streaming and Suspense"},{"type":"text","text":" ensures that users see content faster while maintaining a smooth UI."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Streaming reduces "},{"type":"text","marks":[{"type":"bold"}],"text":"TTFB"},{"type":"text","text":", leading to better SEO performance."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"By mastering Next.js streaming and React Suspense, you can deliver modern, performant web applications that stand out both in user experience and search engine rankings."}]}]}

Next.js Streaming Feature: Unlocking Faster Web Experiences with React Suspense