Next.js Server Side Rendering and getInitialProps

We take a look at the power of Next.js and how it handles fetching data using getInitialProps. We also cover some of the gotchas when working with server side rendering since the code runs on both the Node server as well as the Client/Browser.
4:35 - Pages without the getInitialProps function will be considered by Next.js as a Static Page. If all of your pages are static, you can essentially use it as a static site generator.
5:34 - Code in Next.js will be run both on the server side as well as the client/browser side. Trying to use something like window.location will fail on the server side because the window object only exists on the client side.
8:33 - In order to fetch data using getInitialProps, we need to use the 'isomorphic-unfetch' package because that will work on both server and client.
10:05 - When using getInitialProps, the object that is returned will end up as props in the React component. The props will also include the url object.
11:33 - When visiting a page in Next.js directly, it will fire getInitialProps on the server and the data will be fetched on the server. If, however, you route to the page using the Link component, the data will be fetched in the browser.
13:14 - The fetched data from getInitialProps will show in when you view the web page's source code. This is the main reason to use the Server Side Rendering powers of Next.js
16:00 - When building the site, Next.js will automatically determine if a page should be static or server side rendered. If you have any pages with SSR, then you'll need to deploy a Node server in order to host the site.
19:54 - You don't have to use SSR. If you don't need the getInitialProps function and want data, you can use traditional data fetching methods like useEffect or fetch on componentDidMount.

[@daniela-x9l]

Thank you! That is exactly what I was searching for! Especially the part of the confusion "dance" of the server and the client: D

[@chipbuddha]

Great explaination of fetch.

[@alinahwang8199]

Thank you! The most helpful Next.js overview video

[@salilchhetri]

Awesome! You explained like a Kindergarten teacher. Very helpful...

[@CharlesTinley]

Thanks for going through it in detail!

[@SpectreArts]

This is a life saver

[@sergiim5601]

Great explanation, thank you!

[@Justin_Min_001]

Great tutorial. So smooth~

[@deliriumcode]

Indeed! I would like to encurage the creator to bring us more vids like this one!

[@christianl7870]

Awesome video!, very heplful. thanks a lot.

[@justAbeautifulSoul409]

Thank you

[@taetaebeatz5578]

Great video boss! Keep em coming...lol.

[@ronaldl911]

Thanks! This is awesome.

[@lubomirkavetskiy9248]

Thanks a lot!

[@silvanadonato7869]

fetch is not confusing, in the browser is using React routing this is why the api call is made in the browser

[@nilbristi]

IN this tutorial a user have to call getInitialProps in every component. But what will be the process if we link this method in app.js/_app.js file? So that user doesn't have to call it in every component.

[@kenjacobi9154]

Great video and very helpful info! The only issue with getInitialProps i seem to currently have is that it doesnt trigger if I use the browser's back button. That makes my props useless unless i initially stored them in cookies. My common procedure now is to check for data in props, and if props empty, then check in cookies. But if i have to do all of that, then why should i even have props? Instead just get from cookies all the time. Protecting my data loss from the back button has become a real issue for me. Anyone else run into this? Im hoping there is a better way but cant seem to find anything that says otherwise so far..

[@codebushi]

Interesting, from what I've seen getInitialProps should trigger when using the back button. I'll have to set up an example to explore further but you could ask on the Next.js Github about this.

[@justcats2184]

Can u make video of asynchronous and await

[@brandon9043]

Great tutorial. Loved it.
I checked out the Next.js 9.4 update log and it says to "ditch your node-fetch and isomorphic-fetch imports in favor of a built-in fetch polyfill". I haven't used it personally, so I was wondering if there anything different about it?

[@codebushi]

Thanks! I haven't used it either, but it seems like they've just included the functionality and it's one less package you need to install or worry about.

[@AnehThakur]

Nice Video please create NextJs tutorial with Mobx

[@amberyang2383]

shopee.tw
Is this website CSR?or SSR? thanks

[@codebushi]

Hey! Looks like that site is client side rendered. If you view the page source, there are very few HTML tags.

[@amberyang2383]

@@codebushi thanks! but why google can find them

[@codebushi]

@@amberyang2383 Google is still able to crawl and rank CSR sites, it's just not as fast or accurate as Static or SSR. The Google bots have to do more work with CSR, so if you have a new page it takes longer to index/rank.
This article explains some of the differences: medium.com/@benjburkholder/javascript-seo-server-side-rendering-vs-client-side-rendering-bc06b8ca2383