Yomi Eluwande
Sep 8, 2023 ⋅ 8 min read

Data fetching in Next.js with getServerSideProps and getStaticProps

Yomi Eluwande JavaScript developer. Wannabe designer and Chief Procrastinator at Selar.co and worklogs.co.

Recent posts:

Using CRDTs To Build Collaborative Rust Web Applications

Using CRDTs to build collaborative Rust web applications

CRDTs, or conflict-free replicated data types, is a concept that underlies applications facing the issue of data replication across a […]

Mario Zupan
Feb 23, 2024 ⋅ 15 min read
Guide to Using TensorFlow in Rust

Guide to using TensorFlow in Rust

We explore the fusion of TensorFlow and Rust, delving into how we can integrate these two technologies to build and train a neural network.

Rosario De Chiara
Feb 22, 2024 ⋅ 8 min read
Using Signaldb With React

Using SignalDB with React: A complete guide

SignalDB enables automatic data synchronization between your components and a local in-memory or persistent database.

Antonello Zanini
Feb 20, 2024 ⋅ 6 min read
Guide To Next Js Layouts And Nested Layouts

A guide to Next.js layouts and nested layouts

Understanding how layouts, nested layouts, and custom layouts work in Next.js is crucial for building complex, user-friendly projects.

Ibadehin Mojeed
Feb 19, 2024 ⋅ 12 min read
View all posts

6 Replies to "Data fetching in Next.js with <code>getServerSideProps</code> and <code>getStaticProps</code>"

  1. I like the article
    have one question how we can make api call in _app.js to get the data and pass over nav component

    1. is this api call to a third party api or to one of the endpoints from the next app? Generally, unless the change is happening after the particular page loads (like data that relies on user input before making api call) I would just use getSeverSideProps or getStaticProps to make database calls instead of calling API endpoints.

  2. This is an older post, but I feel like Vercel/Next.js have done a pretty admirable job obscuring the valid reasons to still use getInitialProps. Even a lot of seasoned devs may not be aware that the original workflow most people used in earlier isomorphic/universal react apps pretty much assumed you had a separate and decoupled API. Its endpoints would be called from both client (navigation changes) and server (initial load or full browser refresh) using the same code via something like isomorphic fetch or axios.

    There are both advantages and disadvantages to this pattern:

    1. Your backend isn’t limited to Javascript/Typescript, it can be any language. Being decoupled, it’s easier when you have frontend/backend specialists.

    2. If you have a mobile app, IoT or anything else besides a web browser a decoupled API is going to save a lot of time. These things don’t share a view layer but probably do share a data source.

    While you can of course call a decoupled API endpoint in getServersideProps, it’s probably a bad idea because it adds an extra network hop when called from the client. Using the older pattern (getInitialProps in Next), you would be calling the final endpoint directly instead of “asking” the Next.js backend to do it.

    3. getServersideProps as far as I know results in more requests to your server. getInitialProps can be cached, but from the documentation it seems that GSSP is always called on route changes even when the data was recently received and still valid.

    The disadvantages are pretty well documented, but mostly avoidable if you know what you’re doing, (don’t import server only packages from isomorphic code, check for client when using browser APIs, etc).

    This is not a recommendation to use getInitialProps. It is cleaner and easier to use the newer patterns for a lot of apps. They reduce complexities, but they also introduce others. There are plenty of people who will probably just choose a different framework now that Next doesn’t seem to want to support their use case.

    These are experimental times for SSR/SPA fusion… IMO the newest patterns of islands and server components are an actual reason to be excited. It’s a bit of a mess ATM, but it will be interesting to see what it looks like once the dust settles.

Leave a Reply