Next.js Tutorial - Part 9 | Data Fetching with getServerSideProps
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: • React Hooks SWR: Fetch, Cache and ReV...
----
Presentation URL: https://docs.google.com/presentation/...
----
Github Repository: https://github.com/bmvantunes/youtube...
----
getInitialProps Video: • Next.js Tutorial - Part 2 | Data Fetc...
----
Follow me on:
Twitter: / bmvantunes
Dev.to: https://dev.to/bmvantunes
Website: https://brunoantunes.net
Github: https://github.com/bmvantunes
LinkedIn: / bmvantunes
Смотрите видео Next.js Tutorial - Part 9 | Data Fetching with getServerSideProps онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Bruno Antunes 16 Апрель 2020, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 35,444 раз и оно понравилось 1.1 тысяч людям.