API Invocation using getServerSideProps with Vercel deployment

My earlier blog dealt with using getStaticProps function and demonstrated that it is useful for serving static data from the CDN (cache).

Note: as per the diagrams in this blog post, the CDN Url is synonymous with CDN Cache.

The Cat API I used in the earlier blog is constantly serving random data so, befits using a function call that serves the concerned data dynamically for the Vercel CDN. This is where getServerSideProps steps-in.

For every user request, with the getServerSideProps function in place, the call is transferred to the server-side (Vercel, in this case) and the API is invoked with dynamic request and response. The Server-side Rendering (SSR) is then sent to the user browser.

getServerSideProps:

Note that in the above diagram, build and deploy are retained to just cover the dependency with GitHub and user request is more concerned with the getServerSideProps function in the deployed code.

While in case of getStaticProps the user request is limited to the CDN (cache) since the API request is resolved and data pre-rendered at build time.

getStaticProps:

My git push compared to my earlier blog:

It is nice to understand the deployment process / status in Vercel side:

I also disabled JavaScript to be sure that it is all nextjs magic in play:

Note that both getServerSideProps and getStaticProps do not use JavaScript client-side calls to build the HTML since both are NextJS-based and NextJS is smart enough to generate the HTML in the server-side for what has changed and send that to the pre-rendered page! 

As a summary, an overview of some of the features of getServerSideProps function:

GitHub