Client-Side VS Server-Side Rendering - Data Fetching with Next.js

hey everyone my name is lee robinson and i'm a solutions architect at burcell and today i'm going to be talking about nextgs i'm going to give a little introduction and then talk about the different ways that you can do data fetching inside the framework if you haven't heard of nexgs that's okay i'll give a quick introduction it's the most popular and the easiest way to build react applications and it includes a lot of functionality that you would need to probably use in your react application anyway as an opinionated set of defaults that are easily extensible and easily customizable so routing is included in the framework by using next router by creating a new file at pages index.js or about.js you can use file system based routing to easily create the different routes in your application it has image optimization built in using the next image component there's react fast refresh so it's very easy to work with the framework locally and see fast rebuilds and have a great developer experience to host files all you need to do is drop them inside of a public folder there's built-in support for css and sas and it easily works with popular libraries like tailwind css if you need to do serverless functions or any sort of back-end functionality you can actually merge the front-end world and the back-end world using api routes by just making a new file at pages api user.js or something similar there's even support for internationalized routing typescript support and last but not least a really important one is code splitting and bundling so when i visit the index right of my application we're only serving up the javascript for that route which means that our pages are going to be more performant because we're shipping less javascript to users and it also if there was an error on the about page or the contact page that javascript would be in a separate bundle which helps improve the resiliency of your application as well and that's all configured out of the box so you don't have to do anything so lots of great defaults in the next.js framework and because of that we're seeing nextgs growing very quickly so over the past couple years it's became the most popular framework for building react applications and excitingly we're seeing it being used from the medium to large size businesses all the way up into the enterprise so lots of great logos on here that we love to see using nextgs and lots of happy customers and as i mentioned at the start of this i work at vercelle which is the easiest way to deploy your react applications and our mantra is develop preview ship so you start by developing your next js application taking these building blocks of react components and providing a great developer experience then you push it to a git branch and you get an automatic preview url where you can view your changes collaborate with stakeholders and share across your company to developers or designers or leadership then you just simply merge your branch into production and it's immediately available on vercell's global edge network and it takes care of all the hard things for you like setting up domains and dns and ssl encryption asset compression cache and validation all that stuff are automatically handled by vercell's edge network with a nice user experience and developer experience to go with it so that's the company i represent and they're also the creators of nextgs and what i want to talk about today is the different data fetching strategies with nextgs because it's something that i see people get tripped up with a lot so we're going to start off with the most basic next.js application you could start here with just mpx create next app or by adding next react and react dom to your application and then all it takes to build an xgs application is one file so pages slash index.js or about.js and when you export a react component from your file that's all it takes and this file will be pre-rendered to html on the server now there's a variety of different data fetching methods that you can do with next.js you've probably heard of some of these you have client-side rendering server-side rendering static site generation and you also have incremental static regeneration which we'll get to here very shortly so the the first concept that i want to talk about is pre-rendering so no pre-rendering is a plain react.js application on that initial load the app has not rendered and you just see a white screen you might have seen this before if you tried to load a react application with a large bundle with a very very slow internet connection then after that javascript loads and the hydration period happens the react components are initialized and that app becomes interactive so that's no pre-rendering with next.js you're using pre-rendering so on that initial load the pre-rendered html is displayed and it comes from the server then as the javascript loads and your application hydrates those components become initialized and it becomes interactive so for example like links so the first data fetching strategy i want to talk about is static generation and this is where your html is in one case generated at build time and then reuse for each request so for example we build a production build of our application with next build then this html is generated and when a request is made to your page or your website every single request is going to reuse that statically generated html file which is really easily hosted at the edge by something like versel now there's two different types of static generation without data and with data so if we think about that about example that i showed previously very simple react component when you do a next build and that html is generated since we weren't doing any external data fetching that page is going to be pre-rendered using static generation without data and i would say this is somewhat common if you have like an index page or other marketing pages where you just have static markup and you don't need to fetch any external data but you probably also want to do static generation with some external data sources so for pages that need to fetch that data when you run next build it will fetch that external external data so for example information about your products or information about your blog posts and then the html will be generated after that promise resolves and you fetch that information so for example i just got a quick code snippet here the main thing to focus on is git static props when this function is exported when this function is exported from your react component from your page you just have this function git static props it takes in some context you can make an api call to fetch something like products and then when you return these products as a prop it's forwarded to your react component as you see we have products available here now and now you can iterate over those products and display them out as a list for example and the really cool thing about this too is with just one extra key you can actually make this incrementally regenerate now what i mean by that is if you ran a full build of your application at build time you would build all of these files and you would ship them out to something like for sale put them on the server and when request comes in they wouldn't be recreated they would be static for the life lifetime of your application until you did a rebuild but with incremental static regeneration we can actually set a revalidation period based on the cache control uh header http request header so for example if we say 60 seconds here when a request comes in and it's within those 60 second period it will just reuse that same existing html that's been statically generated after that the next request that comes in it tells our application hey you have stale data now and the subsequent request after that it will go and it will update the cache with the new data that's been fetched from the server so i have a quick example here that shows this very well using github issues and leaving reactions so in this example if you leave a [Music] you know a heart or a smiley face on this issue and then you go back to the demo you see on the first request it's stale but then on the following request that in the background that new version of the page had been generated and then you see the cache gets invalidated and it gets updated with the new static version and you didn't have to do anything so the magic of nextgs handles this completely for you now there's another thing to consider with static generation which is when your page paths depend on some external data so git static props is one piece of the puzzle but what if i want to render out a bunch of different posts and i need you know x number of different urls for those posts so when you build the app you have to go fetch all the different posts you have available and then generate a path for each id of the blog posts in your blog and we can do this using git static pass which is another function that we can export from our file so for example here we have an api that we're talking to post we're fetching back some post and then we're iterating over that to tell next js all of the different ids that are available for application so we return those paths and then we say that we aren't we don't want a fallback meaning that if one of those ids isn't available it will 404. now if you want to learn more about the other fallback methods go check out the data fetching documentation i don't have enough time to get into all of them today but i at least thought i'd mention them the next thing i want to talk about is server side rendering so on every request we're generating new html so on every visit that a user makes your website it's talking to the server there's a blocking request that's fetching that html from your server and you're probably doing this with data so the request comes in you fetch your products or your posts and then that html is generated and sent to your users so let's look at an example for this we're using a function called get server side props now again this is just a function that we export from our file we it runs in the node.js context so we can talk to things on the server and it's not included in our client-side bundle so we can fetch some products again return those as props to our react component and it works exactly the same it's just on every request and the last one that i want to talk about is static generation without data and then you fetch on the client side so bear with me now we talked about pre-rendering in the very simple example where you were just serving up something that was static if we take a look at this example on the right which is the vercell dashboard we're seeing this nice loading skeleton and in this example we're doing the static generation without data where we're pre-rendering on the server and in this case we're pre-rendering a loading state the difference here is that on the client side when that javascript loads so at request time then we're making a request to fetch some external data and then we populate the rest of the page with that data so the projects and the deployments and my user information let's take a look at an example for that we have a profile and this is using a handy library that purcell has made called swr that is a react hook library for data fetching so if we focus in here we see that we're rendering a loading state we're pre-rendering that from the server and then on the client side we can use swr to talk to an api route or an external api which could be a rest api graphql whatever you want and then it returns that data and shows the name on the profile the best part about this is that nextgs is a hybrid framework and what that means is that you don't have to choose any of the different data methods that i just talked about you can do static generation on your index page you can do server side rendering for something like a facebook news feed where the content is very dynamic and needs to be updated on every request and then finally you could do static generation for a bunch of different posts on your blog posts or different products for your ecommerce site without leaving the bounds of your framework so nextgs works great for small projects and it scales up to really large projects always staying within the bounds of that framework and being able to do different types of data fetching and that's all i have today thank you so much enjoy the rest of the conference and feel free to reach out to me on twitter at lerob with three e's if you have any questions

Channel: freeCodeCamp Talks

Views: 45,013

Rating: 4.9679213 out of 5

Keywords:

Id: f1rF9YKm1Ms

Length: 13min 20sec (800 seconds)

Published: Fri Jan 15 2021