image

Next So Fetch

image

Next So Fetch

A NextJS Data Fetching Guide

I made this app to explore all the different ways to load data in a Next JS app. See github for the code.

Notes:
  • With getStaticProps, for production build, it will not refetch data. It's fetched at build time and that's it. But there's more that can be done with revalidation. getServerSideProps fetches per request.
  • getStaticProps always runs on the server and never on the client
  • Incremental static regeneration (ISR); add revalidate
  • Write server code directly in getStaticProps and getServerSideProps. Instead of fetching an API route from them (that itself fetches data from an external source), you can write the server-side code directly in getStaticProps and getServerSideProps.
  • With getServerSideProps, for production build, it refetches data. It prebuilds the page on a (probably optimized, fast) server per request. Triggers a new data fetch on the server side before the page is served to the client, making the latest data available immediately on page load
  • We cannot use getServerSideProps and getStaticProps on the same page.
  • useEffect: Triggers a new data fetch from the client side after the component is re-mounted post-refresh.
  • Static Site Generation (next 12) is Static Rendering (Next 13) (both are default)
  • Server Side Rendering is Dynamic Rendering
  • If NextJS detects uncached data or dynamic functions (like cookies(), headers(), or useSearchParams()) , then it uses dynamic rendering
  • Server Components: Components are server components by default. Better for performance.
  • For interactivity, use client componenets. They prerender on the server but hydrated on the client. Only fully render on the client.
  • Server components prerender just that component on the server at build time. Dyamic rendering renders an entire route on the server at request time.
  • When to use client vs server components. Use client components when using React hooks, event listeners like onClick, and/or custom hooks that depend on state or effects. Use server components when sensitive info like API keys need to be stored, you need to access backend resources directly, and/or there are large dependencies.
  • We can't directly import a server component into a client component. But we can pass server component to client component as props.
  • We can't use async and await in client components.
  • Currently, if you call a dynamic function inside your route (e.g. noStore(), cookies(), etc), your whole route becomes dynamic. This aligns with how most web apps are built today, you either choose between static and dynamic rendering for your entire application or for specific routes. As of 12-27-2023, I think Vercel is experimenting with partial prerendering.
1

useEffect in Client Component

The data is fetched on every user browser refresh. I artificially set a timeout of 10 seconds to simulate a slow data fetch. So this data ends up loading last.
See code here.

Sample Data: Age Distribution

Last Updated at

Loading ...

Static Rendering

The data stays constant and is fetched once at build time. If we refresh the page, the data will stay the same.
See code here.

Sample Data: Age Distribution

Last Updated at

Loading ...
2
3

Dynamic Rendering

The data is fetched on every user browser refresh. The data is fetched on the server and should be fast. Without the use of Suspense, the whole page will not load without this data being fetched. With Suspense, the page at least shows and the fallback presentation shows. I artificially set a timeout of 5 seconds to simulate a slow data fetch. Note that the code used to fetch the data is very similar to the static rendering code but this time, we add the cache: 'no-store'.
See code here.

Sample Data: Age Distribution

Last Updated at

Loading ...