Next.js Client Components | Build a Small Project with Nextjs 13

[Music] hello and welcome I'm Dave today we will learn about client components while building a small project in next JS 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 I've got vs code open and I'm in the directory that has my next JS series and you can see the different lessons here we're going to create a new one today but what I want to say first is we've already learned you can fetch data at the highest level component a server component and you can continue to fetch the data wherever it's needed because nextjs is going to de-duplicate those fetch requests we've learned all about server components but we haven't covered client components yet and if you need a click Handler hook or other interactivity you're going to need a client component so let's start today by creating a new next JS project I'm going to open the terminal with control and a backtick I'll type clear to remove whatever is currently in my terminal and then I'm going to type npx create Dash next Dash app at latest and since we're learning the newest features I'm going to add dash dash experimental Dash app press enter and we're going to go with the defaults I'm going to name my project next05 and yes you can see we're on next 13.2.4 right now as it says and yes it's okay to proceed so I'll just enter a y there and press enter what am I going to name this this is next05 for me you can name it what you want to and then I'm going to say yes for typescript yes for eslint and no for the source directory because we're using the new app directory then just press enter here for the import Alias as well it's installing everything and going to create this project and then I'm going to of course go out of this directory after it's created and we'll open up the next o5 directory so we can be working inside of that folder okay we've created the new project and I now have the next o5 directory open here in vs code and we can see the files in the file tree but what I want to bring your attention to now is the website for Tailwind because we're going going to add Tailwind CSS to this project and the first thing you want to do on the tailwindcss.com website is go to docs and from docs you can see we're at the documentation over here on the left hand side and then it says get started with Tailwind CSS we can go to framework guides and from there they have nexjs right here at the top so let's click that and it's going to walk us through installing Tailwind CSS with next JS now the very first step we have already completed we did that when we created our application so we no longer need to do number one we can move right along to number two and you can see we need to execute these lines here at the terminal prompt so what I'm going to do is just copy you can click the copy icon here and then I'm going to bring vs code back up and in vs code I'll open a terminal with control in the back tick and I'm going to right click and it puts in the first line and it immediately starts executing that and after the first line I think we'll have the second line as well and yes here's the second line now and so I need to press enter for this one so we'll go ahead and do that too so now we've executed both lines so you just have to remember to press enter for the second one and now you can see we have a tailwind.config.js over here to the left and we're ready to go to the next step on the Tailwind website so let's pull that up and it says configure your template path so inside of that tailwind.config.js we need to add the following lines here so I'm just going to copy all of this now we're not using the source directory so I'll remove those afterwards so Ctrl C to copy let's go back into vs code and in vs code I'll close the terminal for now let's go into our Tailwind config and that was in the content area if I remember correctly so I'm just going to highlight the brackets in control V to paste yeah I've got two contents now so I can back that up and after that I've also got two commas there so remove that error now I'm not using the source directory so I'm going to get rid of these lines but we'll keep these three lines here between the brackets you can see we're going to use the app directory and it's also got something in here for Pages or possibly components now let's go back to the Tailwind side again for the next step I'll scroll down it says add these directives to your globals.css so let's once again copy now let's go back to our globals CSS file in our next project let's find where that is I believe we would be looking in the app directory there's globals.css I'm just going to control a to select all of this because it goes with the starter project and we don't need it so I hit backspace I'm going to paste in the three directives here and Ctrl s to save this file and now back at the Tailwind site once again let's look at the next step it says start your build process with npm Rundown up well we definitely know how to do that then it says we can start using Tailwind so we're really complete now and we can just go back and do npm run Dev if we want to but I'm going to make some other changes first let's start by going to the page.tsx file inside of the app directory and here we can clear out a lot of things we're not going to use including this first line that Imports image we're not going to use that today we can also get rid of these Styles here we're not going to use the page.module.css we'll actually remove that file here in just a minute but let's keep the enter font from Google as we see imported here and we need this other line that defines enter as well after that let's grab everything between the main element the opening and closing tag and just remove that here from the starter project so I will press shift and click and select everything in between and now we have really cleared out our home page here our main element inside out of this but instead of styles.main which Styles no longer exists let's just apply that enter font right here and we can do that with enter dot class name as we pass into the class name and save this file now I mentioned we will no longer need this page.module.css so let's just press delete here to remove that file and now let's create a components directory here inside of the app directory so I'll just highlight this and click the new folder and I'm going to type components and then inside of components I'm going to create a navbar file so we'll do this with a capital N dot TSX then inside of the nav bar we can just type RFC if you have es7 rack Snippets like I do and press Tab and it will start a function for us now we're going to need to import Link at the top so I'm going to press enter a couple of times and say import link this comes from next slash link oh I need a cat or a lowercase link there we go and now that I've imported the link we just need to change what we're returning here so let's go ahead and put some elements inside we'll start with a nav element which makes sense and inside of that an H1 element and inside of our H1 we will use the link and this link is going to point to with an href back to the home page because this nav bar will be available on all pages when we use it correctly and inside of this we're going to call our small project Wiki rocket and I'll put an exclamation mark after that now while I'm going to apply Tailwind classes today I'm not going to go over each one and have you learn Tailwind along the way that should have been one of the prerequisites as you started in lesson one so you can copy my classes from my available source code in the course resources if you want to I'm just going to quickly add them by pasting them in today so we'll see class name on the nav and I'm going to paste in several classes now you can see it's a long line so I'll press alt Z to wrap that line down after that I have a few more classes to go ahead and apply to the H1 as well so I'll put a class name here and I will paste in the following classes as well after that we're pretty much finished with the navbar for now we will come back and add something else so now let's look at the layout.tsx where we will want to use this navbar so it shows up on all of our pages so we need to import the navbar first and we get that from components navbar notice we already have metadata here at the top and we can just leave this or you could change it to the wiki rocket information if you want to that is fine also so we have our root layout here and it receives the children that's all good so all we really need to do is put our nav bar inside of the body with the children here and a common mistake would be to put it outside of the body I think that would be easy to do but right now we want to make sure it's inside so here we'll just have our navbar and put a slash there to in the component let's also put a Tailwind class on the body so we have a darker page so I'll say class name equals and here I'm going to use background slate and a dark one so 800. now we won't have much to look at yet but let's go ahead and open a terminal with control back tick and type npm run Dev and we should see our Tailwind applied to our basic site as we start it up here I'll click allow for that message and control click on localhost 3000 as it shows here in the terminal and I can pull that up inside of chrome and yes we have our Wiki rocket navbar across the top that has a little bit lighter slate cover than the rest of the body where we applied the darker slate cover and that's all applied with tailwind and so now you know how to set that up in xjs and get a project started now we'll head back to vs code and I'll pull that up we'll go ahead and close out the terminal window so now our next step is the focus of what we are covering today and that is the client component and we want to build a search component that will be in our nav bar so in the same components directory as the nav bar let's go ahead and create a new file let's name this file search.tsx we want to start our client components with use client at the top and you may have seen this before you should recognize this because we use this inside of the error.tsx when we covered creating error Pages it was provided by the documents and error Pages must always be client components as well so after we have gone ahead and typed use client let's use our es7 Snippets again with RFC and create that default search component as well now we have a couple of imports to go ahead and bring in at the top so I'm going to import use state from react and then I'm also going to import use router from next slash not next slash router that was the default actually this new version we want next slash navigation so we just want to make sure that that import is the correct one and notice that my default was wrong so now at the top of our component let's go ahead and use State and I'll just say const and we'll call this search and set search you should be familiar with this understanding react already is one of the prerequisites for this next JS series and let's just make the state an empty string to begin with this will hold our current search term then let's define our router and set this equal to use router and now we're going to have a search input and we're going to need to be able to handle that input as the form is submitted so let's go ahead and create a handle submit function all this handle submit and it will be async and now I guess I need to put an event here we don't know the type of the event yet so let's come back to find out what that type is and I'll show you how you can do that also but we'll start with event dot prevent default as we do not want the page to reload when it's submitted then we'll set the search back to an empty string after we have submitted the current search and then we'll also route to the location for the results and that's one thing that we'll do here in next.js that's a little different than how you might do it in a regular react app because we route to a new page that will have the address of the search term so I'll say router dot push and now this will take us to whatever the root URL is and then add on to that root URL our Search terms so I'll put in the search state right here and we can look more at how that works after we get everything working and you'll see what I mean and when we look at the URL and how that search term is added oh and I want to add another slash at the end of the URL as well now let's change what we return here so our return can still have the parentheses but we'll remove this div we're actually going to have a form now this form will not have an action on it but it will have an on submit and it will have more classes from Tailwinds so let me just grab the classes first and we'll put class name over here and we'll set that equal to the Tailwind classes that we are applying now anytime you just want to pause the video and copy my classes or copy them once again as I mentioned from the source code available at the link in the description for this lesson you can do that as well okay after that we also need the on submit Handler so we'll say on submit I'm going to press alt Z so this wraps down once again and we'll just pass in our handle submit that we created okay now we need the inside of the form the actual input itself so we'll put in an input element and after that yes it is type text I like to put these on separate lines so it's just a little more organized especially when you have several different attributes okay so after the type equals text the value will be equal to the search state as it's a controlled input after that we'll have an on change and here with the on change we're going to set the state so I need curly brackets and then we'll have an event here and this event is going to go ahead and go in here and we'll use the target value that we get so we'll have set search and you have probably completed this before as you learned react but event.target.value so anytime this changes this sets up our controlled input essentially after that we're going to have some Tailwind classes we apply here also so I'll set this in here and I'll just bring these classes over quickly and it should make the input look a little nicer after that let's go ahead and add a placeholder and the placeholder will just be the text that displays until we enter something we can just say search so that is our input now let's add a button to go ahead and submit the search so the button is going to have some classes as well but inside the button instead of saying go or something like that I'm going to press the Windows key and the period because I'm on Windows and it brings up an emoji menu you may have a different way of doing this on Mac or Linux if you're on one of those operating systems I'm just going to type rocket and it's going to show the rocket here remember we're making a Wiki rocket application so we've got our button with a rocket and I just want to apply some class names here as well so class names equal and I will bring these over and it's a short list but it should make it for a nicer looking button and now we've applied the Tailwind classes and our form is complete so we have the controlled input that sets the state as we type and that shouldn't be A New Concept for you if you've already understood react or taking the beginning react course back up here then we have our handle submit this would be a New Concept for next JS because we have this router now it's very similar to react router but the real the router pushes this onto the web address so we're going to go to a dynamic page now we've covered handling Dynamic routes already and that's what this will be so the only current issue we have is the type here we notice our little red squiggly under the event here we don't know what type this is if you come into the on submit and you type e and an arrow like this this is going to kind of tell us what the type is so I'll Mouse over it is a form event says HTML form element when we house over and get some intellisense so we know we need the form event now we don't want this e here so let's go ahead and remove this we come back up here we're going to go ahead and need to import form event at the top so here we can say this is a form event and then it had the HTML inside of it so let's once again I'm back I shouldn't have deleted that I should have just copied from the intellisense right so we'll put the E back here Mouse over it's a form event and then I'll just copy the whole thing is a form event and then HTML form element inside I can't always remember what those are either so that's a handy little trick for getting that so let's just copy over all of this and paste and now we have the correct type in here for our event when the form is submitted so now with our client component complete let's go ahead and import it into our nav bar and of course notice then that this will not be a client component but you can use a client component inside of a component that is otherwise generated on the server and that's what we'll be doing here so let's import search this just comes from dot search because we're already in the same directory now that we have that it's going to go in the nav after the H1 so here we'll just say search and we have our component added now let's go ahead and look at our application in the browser there's our search box and the little rocket as well let me open Dev tools with Ctrl shift I and I've got the network tab open here notice how this shifted because I do have in some Tailwind that is changing the nav bar depending on the width of the page so that's good also we can get this down a little smaller even down to phone size so that should work well all right let's go back to vs code and in vs code we need to create our Dynamic route because although we're showing this in our app the search of course is routing to a dynamic route and we haven't even created that yet so that's next up and this will go inside of the app directory so let's create this Dynamic route here and if you remember we put those in Brackets so we'll start with a bracket and then I'll just type search term and close with a bracket that's what is going to be passed as a param as well so we have to remember that we used search term with camel case Here and Now inside of this Dynamic route let's go ahead and create our page TSX so page.tsx and inside of the page.tsx we want to create our component I'm going to call this component search results but we can use our es7 Snippets and since we're using typescript we can also start with TS and RFC I'll press Tab and now notice it added some props for us so we've got props right here this is an empty object right here for now so we can put the rest of the information in we are going to need those props so let's go ahead and Define props here it's going to be params and then inside the params we're going to have search term and prams are always a string and so then to start our function here as well we're going to need params and then inside of this we will be destructuring the search term and that gets our function started now from this search term we're going to request results from Wikipedia and that's how we're going to get our Wiki rocket results so what I need to do now is set up a request function we can't really do much more with this component at this time so for that request function now we're going to put this outside of the app directory just in the root directory itself we can create a new directory and call it lib for library and then inside of this I'm going to create a new file I'm going to call it git Wiki results dot TSX now I'm going to type RFC press Tab and start this function but it is an async function so I need to add async up here at the top as well after that we know this is going to receive a search term and that search term is always going to be a string because that's what we will get from the URL now I am going to go ahead and highlight this and put the rest of the function in here and then go over it with you because it's really it got it has a lot of lengthy params here that we're going to create a URL search params this is a new URL search params you could look this up on MDM if you're not familiar with URL search params but when I Mouse over notice it says search params is URL search params type and here this is something like with a get request you could see all of these parameters added on to the URL with the different things that would take to put in the URL I should say like you know your Ampersand symbol of course it would start with a question mark and each one of these would have an equals but we're not doing that we're just creating the URL search params here and this is really easy to kind of map it out now notice they're all strings except the search term here and the search term of course is a string as well it's just being passed in so all of these different values are something that relates to the Wikipedia API so it's not a specific type you need to know so much as just the Wikipedia API we're using today needs these as well here I'm going to press alt Z once again to wrap but as we request down here's our fetch here is the root URL that Wikipedia requires and then we add on WE concatenate the Search terms and then we're just responding with the Json that comes from that so that is the entire function you can see this in the course resources you can pause the screen and copy this here but all of the these parameters are required for the Wikipedia API okay after saving this file I'm going to add a types file as well so just here in the main directory again in the root directory I'm going to create a file and call this types.d.ts now you can create a file like this or you could create a types folder and create a file for each type if you want to organize it that way either way works when I only have a couple of types this is a very easy way to do it and then typescript does not require the Imports because in your TS config file it's already going to look for any file that has this type of naming convention just like it finds the next env.d.ts so you can see the other types of files that it does include okay closing out the TS config back in the types.d.ts file I've just got two types that we're going to use today and again these are types that relate to that Wikipedia API I'm just going going to paste them in and we'll go over them you can copy them from the source code repository for this lesson if you want to or just pause the screen but we've got a page ID and every individual result will have a page ID it will have a title it will have an extract notice the thumbnail is optional as we see here in the type and if there is a thumbnail it should have a source width and height now the search result this is questionable because we aren't guaranteed to get a result from the Wikipedia API so the query is optional and the pages is also optional if we do get Pages it's going to be an array of results but we just have to keep in mind that these could be undefined as well now let's go back and complete our Dynamic search term page that is here inside of the dynamic search term result so we can show those results that we get back okay the first thing we should do is import that get Wiki results function that we created inside of the library folder so we will import get Wiki results and you can see it's imported from that Alias that we have right here and then the live or the lib and get Wiki results after that let's go ahead and start building out the inside of this function and the first thing we're going to do is get that Wiki data so let's define Wiki data and this is going to be a promise and it's going to be the type search result that we defined in our types file if I could spell search result correctly there we go set this equal to get Wiki results and we'll pass in that search term okay after we have done that then we need to get the data itself so here we'll say const data and this is going to equal a weight Wiki data now of course we're flagged here for the await because we didn't make this an async function yet so let's do that so now that we have our async function page and we should just go ahead and rename this page while we're at it because this is our search results component of course it will always keep the file name page.tsx okay after that let's define our results so we'll say const results and this is going to be an array that has results in it but it could also be undefined as we noted so more of a union type there now that it is either an array of results or it's undefined let's set this equal to data and we're not sure if we'll get the query but if we do then we're not sure if we'll get Pages or not so we're just saying that yes this could be undefined these may not exist and we just need to code for that if they don't exist let's go ahead and scroll up just a little and then I'm going to Define some content here so I'll say const content equals and I'll use parentheses and now inside of this I'm going to create a main element that we could return and then inside of the main element we'll have some other content as well but let's first let's apply a class names to the main for Tailwind so I'll say class name equals put our quotes and I'll bring these classes over again so Ctrl C there on my other screen and paste that in with control V press alt Z to wrap that down so you can see all of these classes here from Tailwind now after that inside of this main element let's use a ternary so let's make sure that we actually have results that's what we defined up here but remember it could be undefined so let's make sure we have results and with this ternary we'll say if we do have results then we're going to use object dot values because the results come from Wikipedia as a large object so then we'll pass in the results and then we'll map over those and we'll say for each result we are going to eventually return an item component but for now let's just return some Json here so come down an extra line and I'll put in a paragraph and inside this paragraph graph let's say json.stringify and let's pass in the results we can stringify each result here and it's not necessarily liking that so let me go ahead and put curly braces for each let's write this the way I'm used to writing it and then I can adjust it later when we put in the item component if that's what we want to do oh and I think the reason it's not liking it yet is because we haven't closed out our ternary statement so we just also need to provide the false possibility here so what is going to happen if we don't have results well let's put in an H2 and then inside of the H2 we'll put in some more JavaScript here and what I'm going to do is use a template literal and I will use the search term and then we'll just say not found and inside this H2 we could put a couple of classes on it so let's say class name set this equal to padding Dash 2 and this would also be text Dash XL okay so there is our content and what we've got is a main element and inside the main element of course we hope to have results from our search we have those results we're going to map over those values and that's what will be displayed here looks like we still have a problem actually and that's because I didn't close out the curly bracket here at the end so let me go ahead and put that right there and now everything looks like it should so hopefully we're going to be showing these stringified results and of course that's not going to be too pretty on the page but at least we'll let us see that we are seeing results but if there are no results at all we should be showing whatever the search term is not found on the page and finally with our return down here let's give an extra space and instead of this we'll just return the content that we defined above okay with that much in place let's go ahead and bring up the browser and let's try to search for something of course I could open up the dev tools with Ctrl shift and letter I here I'm on the console we could also go to the network and see what comes in remember we're in Dev mode so we'll see more things come through here if I refresh we should see quite a few things load I'll just clear that out but let me just search for my name here and we'll see what shows up on the page well we've got a lot we've got all of this Json it doesn't look great it actually overflows this container even that it's in but we know we're getting the data and that's what's important from here we'll be able to format this and it will look good let's go back to vs code and improve this display and we'll start out by creating some metadata so let's just scroll up inside of our page file here and we can create that metadata at the top if we've covered this before if you remember we type export we'll have async function and then we're going to use generate metadata and this is going to receive the same props that we have down here for our search results so let's just copy that and we can paste that much in and after we do that let's go ahead and create the rest of the function so inside of the function the first thing we're going to do is request that same data and remember we can request data in next JS wherever we need it and xjs will dedupe the requests so it doesn't hurt to put in the same request here now that we've got that data we want to define a display term so I'm going to say const display term we're going to set this equal to the search term that's received but then I'm going to use replace all and the reason I'm going to do this is because it's coming from a URL that's where the search term will be and if there's spaces those spaces are represented by percent 20. and we want to replace those and just put in an empty space so it's more readable by humans not So Much by a browser and so that makes sense to pass in the search term and I see I've got some red squigglies and that's because I missed a parenthesis here it seems like I am prone to some typos today but now everything looks good once again and definitely typescript helps me catch those okay after we have to find our display term we have to consider that what if there are no results and so we want to of course adjust the metadata for the page if the search term is not found so we can do that with an if statement we'll say if there is no data and remember the query might not exist so we need to use optional chaining there and then again optional chaining on the pages but essentially if we have no results that are eventually found at that Pages position in the object we're going to return some metadata here and I'll just do the title and we'll use a template literal and here we'll use the display term because again it's more readable than the search term might be if there are spaces and we'll just say not found so that will be the title for our page if no results are found otherwise we can return some more metadata so let's return another object here this will have the title and it will just be the display term for the title and now let's have a description and this description could be search results four and now let's pass in that display term once again and so this would make sense because we've got a different set of metadata if we have results versus if we don't now the next thing we could do to improve our display is actually create an item component so now let's create a new directory inside of this Dynamic search term directory call this components and inside of the components directory we'll have a new file and it will be item.tsx now let's type tsrfc using Snippets here and we should get a component that also already has some props so that's good now we'll start at the top we know we need to import links so that's the first thing I'm going to do report link from next slash link after I have that import let's go ahead and Define the props this is going to be a result and it will be the result type we have already defined so when it comes to our item component here then we will go ahead and say this is result it is all we really need to put there because we already have the props defined okay after that we're going to Define an item text column and I'm just going to highlight this delete this and paste this in and we can see what it does I'll also press alt Z so you can see all of the code but it's all held in this variable and essentially we've got a div here and I've turned it into a flex container and then we've got the H2 which is the title from the result we see and you can see we're actually going to link back to the page on Wikipedia for the result and the target equals underscore blank opens it in a new tab and then I've applied a few Tailwinds CSS classes but what is displayed is the result dot title and then we have the result dot extract here so we have a title and an extract and that is what our item text column is after that I'm going to scroll just a little and underneath this I'll paste the content and I will go over it with you as well so what we have now is a ternary statement once again because remember not all results will have a thumbnail so we just have to make sure that the thumbnail and the source exist if we're going to display this content because what this does is take that item text column that we defined up above and it puts it with the thumbnail if that thumbnail exists so here you can see we're creating a thumbnail image it's a very small image but it has the different information from the result if it exists and then I'm also just lazy loading it with the normal HTML attribute okay after that we have this is the true condition in the ternary but after that we also have the false condition which is much easier it's just an article that wraps around that item text column that we displayed above so we're going to either have a thumbnail with our text or we're not going to have a thumbnail with our text and that's what this ternary decides with the content and we eventually just return I'd spell return correctly the content now if this went too fast for you go ahead and pause the video if you need to or look at that source code from the course resources and you'll be able to put this item component together or just build one of your own of course experiment with that data you see come back from that Json stringify statement that we still have over in the page file for the search results component before we put this item component into place with the item component complete we need to go back to our page and use this item component so let's imp ported here at the top you will import item and it should come from components dot item after that let's scroll down and put it into place instead of this ugly Json stringify statement here so instead we could return our item component and it's going to have a key which is going to equal result Dot Page ID and after that we want to pass the result so result is going to equal result as well then we can just close out the component here and save the file now let's go back and look at our page once again in the browser I'll pull that up and the search for Dave is already showing results like we'd expect to see them here's all the little thumbnails there's a lot of thumbnails for Dave's we could search for something else that might not have as many thumbnails but we've got some results let's try something else I like the bubble gum search and the reason I like the bubble gum search is not only are there not thumbnails for each one but this kind of weird result here for the movie They Live that comes up with all the bubble gum and trading cards results if you're not familiar with this movie there is a reason it comes up with bubble gum and I'll let you look that up on Wikipedia or on this app after you build it so let's see how our app handles something that is not found I'm just going to type in some gibberish here and press enter and yes it says whatever I just typed in that doesn't make any sense is not found so we did handle that data that is not found those results that may not exist we're handling that correctly okay let's go back to vs code and we can just add a couple of more things to our project inside of our search term directory the dynamic directory where page is let's go ahead and add another file and name it error.tsx as we've learned about in previous lessons I'm just going to paste it in because it pretty much comes from the documentation however I did add an extra statement here that says or go back home so I gave a link back to the home page and you could of course adjust the error page however you want to but we've got an error just in case it needs to handle an error then let's also go ahead and create a loading page so another new file here named loading.tsx and if you remember loading is using suspense kind of under the hood because this applies to the entire route now not just part of the page we could apply it partially to a component by bringing in suspense as we did in a previous tutorial as well this will just be a simple loading page in case it takes a while to load our data from the Wikipedia site so here we've got the loading page it's just got a few classes and it's just going to say loading so nothing very big right there now that we've got those in place let's make another search and let's go ahead and see if we can make a search that takes a while it looks like I need to back up here back to our original page or maybe refresh yeah now that we've got those changes in okay so let's search for something else maybe like uh Eddie Van Halen and let's see what we get do we get loading at first no it came up right away so let's try something else maybe we'll get a search that takes a little bit John John happened fast also it may get results so fast from this API that I do not see the loading but let me think of something else like Frank Zappa ah we briefly briefly saw the loading there for Frank Zappa so just in case there is a longer delay you will see that loading due to react suspense and now that we've built the project let's go ahead and bring vs code back up I've got it back up open the terminal once again with control in the back Tick Control C to stop the application from Dev mode and before we build the project think about the components we have and ask yourself are they server side rendered of course we covered client components today are they SSG just think in your mind if you can decipher what type of components you have before the build tells you I'll go ahead and type npm run build we'll see what components we have and we can discuss that as soon as it's finished building the project and the build is complete I'll go ahead and extend the terminal up here to the top and let's look at our queue down here or our key I should say the circle indicates static not SSG but a complete static page and this icon here indicates server side renders SSR so that's what we should have when we come up here to the top we can see the home page even though it has the search component in it that's client side the rest of it is just static and then when we go to the dynamic route for the search term those are server side renders if you remember from a previous lesson we were able to use git static params and make SSR Pages SSG pages but we could do that with something more like a blog post where we could get those numbers those IDs in advance with a search term that's something that only the user knows what they're going to type in and they're only going to do that right when they type it in that may be when they know we can't really predict what that's going to be so this is the best we can do there with server-side rendered Pages or the search term pages that are generated remember to keep striving for Progress over Perfection and a little progress every today 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: 29,862

Keywords: Next.js Client Components, next.js, nextjs, next.js 13, nextjs 13, client components, next.js client component, nextjs client components, next.js components, nextjs components, server components, when to use client components, use client, in next.js, in nextjs, next.js server components, nextjs server components, next.js tutorial, nextjs tutorial, next.js project, next.js small project, nextjs project, nextjs small project, project in next.js, project in nextjs

Id: PcHY2Py6AQY

Length: 43min 22sec (2602 seconds)

Published: Fri Mar 17 2023