Hello friends, NextJS offers several different data fetching strategies. Today we are going to learn about GetStaticProps vs GetServerSideProps: Next JS Data Fetching. So let’s begin.
Next.JS is a tool employed primarily to build server-side rendered websites that generate the HTML dynamically through a server during every instance of receiving a new request.
Data fetching in Next.js allows you to render your content in different ways, depending on your application’s use case. These include pre-rendering with Server-side Rendering or Static Generation, and updating or creating content at runtime with Incremental Static Regeneration.
So let’s start with GetStaticProps.
GetStaticProps
This method is primarily used inside a page to fetch data at build time.
Once the app is built, it will refuse to refresh the data till the time another build has been run.
The advantage of using GetStaticProps is that it lets the page be statically generated. As a result, out of all the available data fetching methods, GetStaticProps generates the fastest load times.
As the data is rendered before it reaches the client, the SEO of the page improves by leaps and bounds.
You should use getStaticProps
if:
The data required to render the page is available at build time ahead of a user’s request
The data comes from a headless CMS
The page must be pre-rendered (for SEO) and be very fast — getStaticProps
generates HTML
and JSON
files, both of which can be cached by a CDN for performance
The data can be publicly cached (not user-specific). This condition can be bypassed in certain specific situations by using a Middleware to rewrite the path.
Example:- how you can fetch a list of articles from a CMS.
// articles will be populated at build time by getStaticProps() function Article({ articles }) { return ( <ul> {articles.map((article) => ( <li>{article.title}</li> ))} </ul> ) } // This function gets called at build time on server-side. // It won't be called on client-side, so you can even do // direct database queries. export async function getStaticProps() { // Call an external API endpoint to get articles. // You can use any data fetching library const res = await fetch('https://.../articles') const articles = await res.json() // By returning { articles: { articles } }, the Artical component // will receive `articles` as a prop at build time return { props: { articles, }, } } export default Article
Runs on every request in development
In development (next dev
), getStaticProps
will be called on every request.
GetServerSideProps
This method is primarily used to fetch data for every instance that a user issues a request to the page.
It fetches the data first before sending the page to the client. Should the client happen to issue a subsequent request, the data is fetched again.
Using GetServerSideProps allows you to improve your SEO as in this method the data is rendered before it reaches the client.
As the data is refreshed every time the user loads the page, they can view the updated information at all times.
When should I use getServerSideProps
You should use getServerSideProps
only if you need to render a page whose data must be fetched at the requested time. Pages using getServerSideProps will be server-side rendered at request time and only be cached if cache-control headers are configured.
Example:- how to fetch data at request time and pre-render the result.
function Page({ data }) { // Render data... } // This gets called on every request export async function getServerSideProps() { // Fetch data from external API const res = await fetch(`https://.../data`) const data = await res.json() // Pass data to the page via props return { props: { data } } } export default Page
If you do not need to render the data during the request, then you should consider fetching data on the client-side or getStaticProps method.
Happy Coding !!! 🙂
Be the first to comment.