Скачать или смотреть How to Achieve Proper SSR and Data Fetching in Next.js 14 App Router

Discover the best practices for `Server-Side Rendering` and data fetching using Next.js 14 App Router. Learn how to avoid common pitfalls while enhancing your application's performance.
---
This video is based on the question https://stackoverflow.com/q/77386421/ asked by the user 'CodeStarGM' ( https://stackoverflow.com/u/13921087/ ) and on the answer https://stackoverflow.com/a/77390976/ provided by the user 'Darren Zou' ( https://stackoverflow.com/u/5632931/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How to do Proper SSR and Data Fetching in Next.js 14 App Router?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Essential Guide to Proper SSR and Data Fetching in Next.js 14 App Router

In the world of web development, Next.js has gained immense popularity for its remarkable features and capabilities. Recently, many developers, including myself, have transitioned from the traditional page router to the more advanced app router in Next.js. This transition, while beneficial, can also be quite perplexing—especially when it comes to implementing Server-Side Rendering (SSR) and data fetching.

In this post, we'll explore a common issue developers face after migrating to the app router and provide a comprehensive solution to effectively handle SSR and data fetching.

The Problem at Hand

I recently embarked on a journey from the page router to the app router due to its advanced features and flexibility. However, a major challenge arose: how to properly implement SSR and data fetching in this new setup.

Overview of the Confusion:

The Next.js documentation recommends using the fetch function with additional parameters like {cache: 'no-store'} instead of traditional methods like getServerSideProps().

This raises the question of how to create a universal helper function for fetching data—specifically for GraphQL—that can be utilized across all pages.

Furthermore, a common point of confusion is understanding the role of the "use client" directive and its impact on data fetching.

Understanding SSR and Data Fetching in Next.js 14

Key Concepts

Server-Side Rendering (SSR):

SSR allows for the server to render the UI initially, which is then sent to the client. This approach improves performance and enhances SEO.

Client Components:

Components with the "use client" directive indicate that they are rendered on the client side, which means any data fetching conducted within this component will be done client-side.

Addressing the Confusion

Here's where the confusion often lies:

If data fetching is done within a component marked with "use client", that data will be fetched on the client side while the initial UI is server-rendered.

This leads to a situation where the initial render does not contain the fetched data, as it is only available post-hydration on the client.

Effective Data Fetching Strategy

The goal is to fetch data on the server and then pass it down to client components. Here’s how you can achieve this:

Creating the Fetching Function:
Use a previous helper function to fetch your GraphQL data. Here’s an improved version:

[[See Video to Reveal this Text or Code Snippet]]

Implementing SSR in Your Page:
Fetch the data server-side and then pass it to your client component:

[[See Video to Reveal this Text or Code Snippet]]

Defining Client Component:
Create a client component that utilizes the passed data while ensuring it remains client-friendly:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

By understanding how to effectively leverage SSR and handle data fetching in Next.js 14, you can avoid common pitfalls and enhance your application's performance. Remember that effective use of the app router involves a balance between server and client components, ensuring that you maintain the advantages of server-side rendering while taking full advantage of client capabilities.

Next.js allows for a robust structure for your applications, and mastering these concepts will ultimately lead to a more efficient development process.

Thank you for taking the time to read this guide! Feel free to reach out if you have further questions or need additional clarification on working with SSR and data fetching in Next.js.