Read More
Read More
Menu Close

    GetStaticProps vs GetServerSideProps: Next JS Data Fetching

    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.

    Start your headless eCommerce
    now.
    Read More

    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 !!! 🙂

    . . .
    Discuss on Helpdesk

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top