Next.js 13 SSG, SSR & ISR | Nextjs 13 tutorial

[Music] hello and welcome I'm Dave today we're learning how to apply static site generation server-side rendering and the incremental static regeneration strategy to our next JS server components and I'll provide links to all resources in the description below I'll also provide a link for you to join my Discord server where you can discuss web development with other students and you can ask questions that I can answer and receive help from other viewers too I look forward to seeing you there our starter code today is the ending code from lesson three so I'm just picking up where we left off and you can see I've created a folder now in the course resources called next04 so you could find this starter code in that directory in the course resources now what we did in the last lesson was create server components that use data fetching we did not discuss however are those static components are they server-side rendered components or do they apply in any other strategy other than the data fetching strategies that we applied and right now they're not applying any other strategy however you don't know which type of component you have and in Dev mode you can't really tell if we look at package Json though you can see the different scripts and we were using Dev mode if we run build next is going to tell us what type of components we have and how they are being generated so let's go ahead and do that I'll just do control in the back tick to open up a terminal and instead of npm run Dev I'm going to run npm run build and we'll go ahead and build our application and I'll expand this to take up the full screen and as it creates this build when it's finished it's going to tell us what type of components we have and now we can see the output I'm going to scroll up just a little bit but it gives us I should scroll down just so we can see these first it gives us these different indicators so this indicates server server side renders which would be SSR and this indicates static not necessarily SSG as we'll see a little bit later next is going to differentiate from just static and SSG based on props this uses no initial props SSG will actually receive props but still be statically generated so we'll see a different indicator for that so right now we're saying our users page is static just like the hello page they give as a default inside of the API directory for example it's just statically generated in advance built on the server and then sent out to those content delivery networks however the users page receives that user ID and there's no way next can know what parameter it's going to receive in advance so it can't build those and so those are server side rendered at request time it builds it on the server sends it back to the client and really the only way to see the response time is to go ahead and run this as well so if we look back at our package Json I'll need to bring this back down in the scripts we not only have the build but we have the start and if we do npm Run start it's going to use the build we just created so let's do that once I'll say npm Run start and we'll go ahead and start this code and we'll get a better idea of how it would actually respond and so now we're at localhost 3000 again I'll go ahead and control click that to open that up in Chrome and let's look at our next app here I'll close the one we previously had open and again it looks very basic let's open this to Dev tools we're at the network Tab and now our request will look a little bit different than they did in Dev mode so here I'm going to Mouse over we should still see the request for users oh we don't it's static it should already be there right we did that and then instantly after we went to that users page that has the links notice it didn't wait until we moused over like it did in Dev mode it instantly requested the data from all of these links in advance and so now we see the 10 requests for those and so now when we actually do click on one of those it should seem fairly instant because it wanted to get a jump start it pre-rendered the those pages and so now when I click and go it's there pretty much instantly already but those are server-side rendered Pages they are not actually statically generated before because there's no way next can know that we're going to send in the param that is one or two for whatever the user IDs are however I say there's no way if we know in advance we can actually use a strategy with our code to tell next.js what they will be to make it even faster and we're going to do that today okay we're back in vs code I'm going to press Ctrl C to close that server and instead of the build we're going to go back to our Dev mode so npm run Dev and that's what we'll want to work with as we apply some changes so now I'll close the terminal and I'm going to close out a package Json as well let's go to our library where we had the get user posts function right here and now that we have that I'll press alt Z to wrap that down we can apply some things to fetch here and first let's look at what is default already as as I said next already caches data by default so that default would be a cache setting inside of fetch that we could show after the URL you can have an options object we could say cache and here we would say Force Dash cache we don't need to do this this is the default so the data that is server side rendered initially if we're getting a dynamic request in the URL that is cached and it doesn't need to go back and re-render that again it knows that data after the first time and it holds on to it the only bad part would be if there are changes if it's data that is changing constantly you may not want to always see the old data which would be referred to as stale data and you could make it always Dynamic so just the opposite of allowing it to be cached essentially saying never cache this data and that would be the value no store however there is incremental static region generation and that means we want to go ahead and create the page and then we want to just check every so often to see if there's an update and that might be the Best of Both Worlds and that's what we refer to as ISR again called incremental static regeneration and this uses something different we put a revalidate value in and instead of just saying cash here we start with next so we'll say next and then after that we have another object and we say revalidate and we put in the value in seconds that we want next to wait before it checks for new data again so let's put in 60 seconds so this can be applied to SSG static site generation or server side rendering it can be applied to either type of component that uses the fetch request and what it's saying is show the data for 60 seconds before you revalidate to check to see if there's new data so if it's a static page and the data it happens to be stale that was already generated on the server you would only see that stale data for about 60 seconds and of course you'd have to navigate away from the page and come back to it and then you would see that new data however if it's a server-side render page you know it was just rendered at that time but if it changed before the 60 seconds were up you'd still see the stale data and of course you'd still have to navigate away and come back because the page isn't just going to revalidate and magically change in front of your eyes however this gives you kind of The Best of Both Worlds because you're getting the benefits of that server side generated page that's served very quickly and then if the page updates say it's some type of weather forecast or whatever and the user would navigate back to it then they would see the updated data and for us this is ideal for the git user post because let's say our users add a new post well we saw the post list before but the next time we go back to their page to check their posts again maybe a new post was added and course the revalidation would then show that new post now we're back in the next JS docs and while I'm not using this in the code that we're writing I did want to highlight it as I discussed the revalidation in the ISR strategy because you can also set this revalidation at different levels you can set it at the layout level or the page.tsx level and all you have to do is create an export const revalidate and set it equal to the seconds you want so this sets it for everything at that level instead of on that per request basis as I did in our code so we have applied incremental static regeneration ISR and it's very good and we now have the power of server side rendering and incremental static regeneration but what if we could take these SSR Pages the server side rendered pages that we are creating in our app directory with our users branch that has this Dynamic folder here that receives the user ID right now next has no idea what value will be passed as a parameter what if we could take those and actually tell next.js in advance what those possible parameters will be well we can do that and that will turn our SSR pages into the recommended SSG Pages the static site generation now to do this let's go to our page.tsx file for the individual user after our user ID Branch here so we need to actually open this up and go to the one inside of the dynamic route here we are and we have our generate metadata and then we have our user page component so underneath the user page component we can create this new function that will help us generate those static parameters it's export and then we'll say async function and it is called generate static params and now this function doesn't have any props that it receives there but inside the function we're going to once again request that same data and remember next jsd duplicates this data so this will not create an additional request by putting this in here even though we're using it inside of our user page component and inside of our generate metadata oh and I said no props we're giving this the wrong one actually what we're going to need is the get all users because we're going to send in all of the user IDs so let's go ahead and get that function and that comes from the parent component up above where we had this here and it's get all users and we get the users data not just the individual user data so I'll go back here and put it in of course we'll need to import that because we weren't using this function previously in this component so above go ahead and import get all users as well from our library okay now that we have that our users data and you can see it's a promise and it uses that same user type and we get an array of users now we need to say const users and here we will go ahead and await the user's data and once we get that we can simply return the map over this data so we would return and then we would have users.map and then for each user go ahead and return an object so I'm going to use parentheses here first as we come down to the next line and then after parentheses well I could have put the curly brace above but we can put our brackets here as well say user ID and then it's going to be user dot ID because this is for each user but here's something to remember now because our user type remember we have the type in our definition file down here where is that oh it's way at the bottom a user type as an ID of a number so what we need to consider here is params always need to be strings now when next gets a param from the URL we know it's going to be a string there but now we're providing these params in advance so we need to say two string here as well and I just don't like how that looks as well with the curly braces on the same line I'm used to seeing them up above so let me do that that's just a formatting preference of my own here bring that down without the curly brace underneath and I'll wrap this back up there we go so we're providing these params in advance as we map over them all and then next.js will know what the params are going to be it like I said before it couldn't know when we were just saying hey this is dynamically created but now we're providing static params in advance and with those static params next JS will then know what the parameters are going to be and it can actually statically generate those pages in advance without the server side rendering so there'll be SSG and not SSR so now let's open the terminal once again I'll press Ctrl C to close out of our Dev mode and let's rebuild this project and let's see what next tells us about our server component so npm run build and if you remember in the past all of our Dynamic paths for the user ID were SSR Pages now let's look at this there's no longer that SSR indication we have SSG here and as we scroll up and look users slash user ID these are all SSG Pages now and that's what we wanted which is even better they're generated in advance but note these SSG pages will still follow our ISR strategy that incremental static regeneration strategy that we talked about and it will of course revalidate at the time interval that you set just to check it out let's once again run our build code with npm Run start and we should come back once again to our local host at 3000 control click to open that up we're here at the home page let's look at everything I'll click on users and instantly it requested all of these now I'll go to Leanne Graham and there she is with all of her different posts there was no extra request now we didn't need to request to the server to generate those pages it requested them once there was no longer a server-side render page these are all SSG pages and then of course we have that data ready for us instantly there is there's no weight it's just like visiting any static web page and that's the power of SSG and of course if there is an update if there is an update to one of the users posts it is going to revalidate that information still with that built-in ISR strategy you're really seeing the power of next JS when you understand how this strategy is applied we're back in the beta docs once again and we need to discuss Dynamic params now with this setting enabled and it is enabled by default so there's no code for us to add here we're just looking at the definition of it in the docs so we're not adding this it's already in there by default essentially unless we wanted to set it to false it's enabled by default but with this setting in enabled next will attempt to render pages with Dynamic parameters so if we were to request a page like a user page remember we only have 10 users so if we were to go ahead and request user number 15 next would try to go ahead and generate this page of course you could handle with an error page as we've previously discussed but there's a special way to do this as well so let's go over that in our code now okay in vs code let's go ahead and use control C to get out of the npm Run start that's running the build code we'll run npm run Dev once again and just have that going to localhost 3000 and there you can see it we'll close the terminal and we're still inside of the page.tsx file that has our user page component that's inside of the dynamic route here at the top the special way we can handle this when next tries to get a dynamic page that doesn't exist instead of just generating a typical error we want a 404 and of course course next does provide a 404 default page and we can just go ahead and use that if we want to or we can create our own and we're going to start all of this by importing not found from this comes from next slash navigation now once we have that in here we need to actually apply this to a couple of the functions that we have one of those functions is going to be right here inside of our generate metadata so we're not going to use the not found we imported but we're going to apply the strategy here so we don't receive an error and the first thing we'll need to do is just say if we do not have a user.name because we know that's part of our user object that we should receive we can say return we can Define the title this would be a custom title for our not found page so since we're in the user Branch I'm going to say user not found and this would be the metadata for the not found page now after that let me create an extra space here just to clean that up after that let's scroll down and apply not found inside of the user page component as well I'm going to press alt Z once again just to get that to wrap in so we can see all of the code okay once we're here after we receive our user we just basically need to say if we don't have our user.name again and you can't just check the user because the empty object wouldn't validate that way so we're just checking one of the properties on it so after this we'll say return and we're going to call this not found function just like that I'll save this file and let's go back to our application inside of the browser I'll open this up go back to home we're still on localhost 3000 so I'm just going to refresh reload everything should be running even though we're back in Dev mode now and if we go to users that's fine if we go to Leanne Graham to see her posts that's fine we wait a little longer in Dev mode but that's the thing we wanted to check out actually when we ran it after in build mode it was instant Dev mode takes just a little bit so that's the best way to check your code but right now we want to check what happens if we request a user that doesn't exist otherwise so let me just check something crazy like user 1000 this user doesn't exist what's going to happen we've got a failed to fetch user oh and we threw the new error and that's something our code didn't catch yet and this is something I forgot to change that's recommended in the docs when we're applying this strategy so let's come back and get rid of that error by returning undefined here instead of throwing an error when we get the user we're going to return undefined and let's also do that for the user posts that are inside of this Branch as well so we'll have undefined there and now save and after we've applied both of those let's come back and now we get the next JS 404 default page but we can make this look a lot better than this plain 404 that we have if we want to you can provide your custom one I won't provide one that looks better today but I'll at least show you how to create the page back in vs code we're going to scroll back up here in the file tree to our Dynamic directory for the individual users and now we want to create another page here so I'll create a new page and this is called not Dash found it's a special name just like page.tsx is or error.tsx so here we're going to say RFC to quickly create a function and we can't name it not Dash bound so we're going to name it not found with camel case they're actually Haskell case there and with that we can save the file and then we can go back and look at Chrome we may need to restart our server let's take a look at what we've got here though it looks like it applied it right away and it just says not found here now of course we can put in our own custom message so let's pull vs code back up and we'll just change this div to an H1 and inside the H1 let's just say the requested user does not exist we'll save that and let's take a look at the browser once again and that's the message we get for the 404 and there is the custom title as well remember what we put the metadata in back in the other component so our main takeaways today as I come back to the terminal and press Ctrl C to get out of Dev mode I want to run the build once again and as we run this build we learned about how to tell if you have a SSG or static page in itself or an SSR page because you can check the build but essentially you know if you're creating Dynamic data and you haven't provided those static props then you're going to have an SSR component and that is generated at request time on the server versus a static page and of course next JS recommends SSG when possible so if you know the params in advance then you can provide those by generating those static parameters with that function and then have SSG Pages as we see here and you get the indicator down here and you'll see that next to your pages up above and we also learned how to apply incremental static regeneration and those work in both SSG and SSR pages that strategy works and so all of that will help improve the user experience remember to keep striving for Progress over Perfection and a little progress every day will go a very long way please give this video a like if it's helped you and thank you for watching and subscribing you're helping my channel grow have a great day and let's write more code together very soon

Channel: Dave Gray

Views: 40,518

Keywords: next js 13, nextjs 13, next js 13 tutorial, next.js ssg, next.js ssr, next.js isr, ssg, ssr, isr, next.js notfound, next.js custom 404, static site generation, server-side rendering, incremental static regeneration, nextjs ssg, nextjs ssr, nextjs isr, next js 13 app directory, next js 13 typescript, next.js 13 tutorial, nextjs 13 tutorial, next.js tutorial, nextjs tutorial, next js 13 app directoty, next.js suspense, next.js promise.all, next, js, next js, next js 13 app

Id: E1HzFvXgrCs

Length: 22min 0sec (1320 seconds)

Published: Fri Mar 10 2023