Next.js

Home / Topic / Next.js / Data Fetching in the Page Router

Data Fetching in the Page Router

In this chapter, we will focus on how to fetch data in a Next.js application using the Page Router. Next.js offers different ways to handle data fetching depending on the application's needs, such as Server-Side Rendering (SSR), Static Site Generation (SSG), and Client-Side Rendering (CSR).

Server-Side Rendering (SSR) with getServerSideProps

The getServerSideProps function is useful when we need to fetch data on every page request directly from the server. This ensures that the data is always up-to-date and available before the page is sent to the client.

SSR Example

javascript

"This example shows how to use getServerSideProps to fetch user profile data on the server before rendering the page. The username is passed as a parameter in the URL and used to fetch the data from an external API."

Using SSR is ideal when the data changes frequently or is specific to the user making the request.

Static Site Generation (SSG) with getStaticProps

For pages that do not change frequently, we can use Static Site Generation (SSG), which allows generating the pages statically at build time. This improves loading speed by avoiding data fetching on every request.

SSG Example

javascript

"In this example, we use getStaticProps to generate a static page for each blog post. We use revalidate to regenerate the page every 10 seconds, which allows keeping the content up-to-date."

Using SSG with Incremental Static Regeneration (ISR) allows regenerating static pages at defined time intervals, maintaining a balance between loading speed and updated data.

Client-Side Rendering (CSR)

When we need to fetch dynamic data on the client, we can use Client-Side Rendering (CSR). In this approach, data is fetched after the page has been rendered on the client through API calls from the browser.

CSR Example

javascript

"This example shows how to implement Client-Side Rendering for a search page. The results are fetched dynamically as the user types in the search box."

CSR is ideal for cases where the content of the page depends on user interactions and does not require fetching data on the server.

Choosing the Right Data Fetching Strategy

SSR: Use SSR when the data changes frequently and needs to be up-to-date on every request.
SSG: Use SSG for pages whose content does not change frequently and where loading speed is essential.
CSR: Use CSR for interactive features that depend on the user, such as search or content filters.

In many cases, you can combine several data fetching strategies within the same application, using SSR for some pages, SSG for others, and CSR for interactive functions.

Conclusion

The Page Router in Next.js 13 offers great flexibility for handling data fetching, allowing us to choose between SSR, SSG, and CSR depending on our application's needs. In this chapter, we have seen how to fetch data from both the server and client sides, and how to optimize the user experience using the appropriate strategy.

Back to previous chapter

Mark as read and continue

Ask me anything