📖 Course Menu - Efficient Data Fetching in Next.js

Note: I'm always talking about server components here.

🍸 Aperitif - Waterfall vs Parallel Data Fetching

Waterfall Data Fetching

• Sequence of await usages
  • Wait until the previous fetch is complete.

Parallel Data Fetching

• Promise.all()
  • When one of the fetches is slower than the others,

🥗 Hors d'oeuvres - Static vs Dynamic Rendering

Static Rendering

• Data fetching and rendering happen only when
  • building the application (during deployment)
  • revalidating data
• The cached data is served whenever a user visits the application.
• Pros:
  • Pre-rendered content can be cached when deploying, resulting in faster websites.
  • The server doesn't have to send the content because it's already cached, resulting in reduced server load.
  • Search engines can read the pre-rendered content, resulting in improved SEO.
• Suitable for webpages with no data or data that is common for the users, such as a static blog post or a product page. Not a good fit for data-heavy pages.

Dynamic Rendering

• Data fetching and rendering happen when a user visits the page (at request time).
• Pros:
  • Allows us to show real-time and up-to-date data.
  • Makes it easier to deal with personalized content, from showing it to updating it based on user interactions.
  • Allows us to access the information that we can only know at the request time, such as cookies or the URL search parameters.
• If one of the requests is slow, the app is only as fast as the slowest request.

🥘 Main - Streaming

Streaming

• A data transfer technique that allows us to break down a route into smaller chunks and progressively stream them from the server to the client as they become ready.
• Pros:
  • Slow data requests don't block the entire page from showing. The user can interact with the ready parts of the page.

How to implement this with Next.js:

• At the page level, with the loading.tsx file (which creates <Suspense>)
  • We can just have a loading.tsx file in the route, then Next.js presents it while the content is loading.
• At the component level, with <Suspense>
  • Move the data fetching logic to the child component that we wanna stream.
  • In the parent component, wrap the child component with <Suspense> and pass props of a fallback component.
  • We can also have a component to wrap multiple components to load them at the same time. (streaming for the section)

☕️ Dessert - Partial Prerendering (PPR)

Experimental in Next.js 14.

• Combination of static rendering, dynamic rendering, and streaming on one route.
• When the user visits the PPR route,
  • a static route shell containing static content is served first. (Static content is actually prerendered during build time or revalidation.)
  • the shell leaves holes where dynamic content will load asynchronously.
  • the async holes are streamed in parallel.
• <Suspense> plays a role as a boundary between the static and dynamic content. When we wrap a component with <Suspense>, we are telling Next.js to treat the wrapped content dynamically.

References:
Learn Next.js Chapter 8 - 10