Next.js Tutorial - Part 9 | Data Fetching with getServerSideProps

An explanation of getServerSideProps and getInitialProps in Next.js using diagrams and code examples.

In this video, we will understand getServerSideProps using code and diagrams! We will look into the differences/similarities between getServerSideProps and getInitialProps. At the end of the video, we will also add NProgress to make our UX a bit better when navigating from page to page. From Next.js documentation: When should I use getServerSideProps? You should use getServerSideProps only if you need to pre-render a page whose data must be fetched at request time. Time to first byte (TTFB) will be slower than getStaticProps because the server must compute the result on every request, and the result cannot be cached by a CDN without extra configuration. If you don’t need to pre-render the data, then you should consider fetching data on the client-side using SWR. ---- Timeline: 00:00 Presentation Starts 01:33 Diagram getServerSideProps and getInitialProps - server side 02:35 Diagram getInitialProps - client side 03:23 Diagram getServerSideProps - client side without "optimization" 04:26 Diagram getServerSideProps - client side with "optimization" 05:41 Diagram getServerSideProps - server side with "optimization" 06:16 Tweet from Guillermo Rauch (CEO at zeit) 07:28 Diagram getServerSideProps vs getInitialProps - client side 08:24 Diagram getServerSideProps vs getInitialProps - server side 09:14 A question to you all :) 09:32 Jumping into code!! 10:44 Create a simple component to print json 12:03 Create getServerSideProps in that component with database query 14:07 Create People component to iterate over names 15:00 Create getServerSideProps in People component 17:33 Create navigation between the 2 components 18:33 See the return from getServerSideProps (client side) in the browser 19:54 Introducing Latency to our getServerSideProps to see the implications 21:33 Show how GitHub solves that same issue of latency between navigation 21:53 Introducing NProgress to achieve the same GitHub is achieving 23:05 Custom _app.tsx 24:12 Listen to Next.js router events using Router.events.on('event name', handler) 26:04 Connect NProgress and Next.js Router Events 28:11 Remove the spinner from NProgress 28:45 Play with NProgress options 30:32 Conclusion and thank you!! :) ---- SWR Video: youtu.be/a7JigiLw_OY ---- Presentation URL: docs.google.com/presentation/d/1JfLfLHuyWsqmXZDVSv5_nFFb5AOf… ---- Github Repository: github.com/bmvantunes/youtube-2020-april-nextjs-part9 ---- getInitialProps Video: youtu.be/Os3JZc2CtwY ---- Follow me on: Twitter: twitter.com/bmvantunes Dev.to: dev.to/bmvantunes Website: brunoantunes.net Github: github.com/bmvantunes LinkedIn: linkedin.com/in/bmvantunes