Next.js No longer use SSR/SSG functions

so if you don't already get server side props and get static perhaps and all the other awesome functions of nextgens are dead yes you are hearing right they are dead and completely abandoned by the new next js13 and they were replaced by a completely brand new data fetching apis there are so much simpler so if you haven't heard already next.js version 13 has been final released this week and it's just not like any other next year's version it's a lot more than that it has huge changes huge core updates and new features that were added and Community stuff that were added like the community actually asked for so many stuff and I was actually trying this version for this particular week and it looks absolutely amazing in terms of performance in terms of like development experience and how you can actually build really awesome websites using the new awesome features and one of the most important features that were added is actually the new routing system they completely routing and layout system plus completely reworked from scratch the data fetching system so if you look at the new documentation from the next GS version 13 it says like on the DF engine fundamentals it says like the get server side props and the old ways of fetching deals and xjs apis are completely not supported anymore and this is because now it has like a new update working that was introduced with a completely new lock and reworks from scratch kind of like a layout and a routing system and all of that actually just to make next year is actually align with the new react features and the upcoming reacts version 18. so this is the actual release for this next GS version 13 is an actual react 18 compatible version and Nexus was able to actually move forward with this thanks to the new RFC from the react.js team so if you look at the RFC in here on our on react.js rfcs we're going to look at the react server components RFC now what I mean by this RFC if you look at the actual formatted data or like you know just the summary of this RFC in here it says the RFC discusses upcoming features for react called server component now actually you can use components and these components can only run and when will only actually run on the server without impacting the client and will have a zero impact on bundle size so that means the code will never be downloaded to the client helping reduce like bundle size more performance a little bit more optimized it's so much better so I bootstrap a new project using next year's version 13 which means I'm using the new app directory that was provided I'm not going to go through the details of the layouts and the routing system you can like read the docs to know more about this I'm just going to specifically focus on the data fetching part and what's new in the dnfaction and what kind of like replaces now the get server side problems and replace the git static props and the other most important functions for nextgs so let's imagine this is the application we got store products we're an e-commerce store you got loading and you can actually load a bunches to store products and for you uh with the price and everything and all these products obviously are loaded from an API whether you can load them from a database or something but in that particular example we're going to use an API to actually utilize and showcase how can you replace the get server sorry perhaps and the get static site perhaps so always simply doing is just like having a web page in here we're gonna go loot that from the API and like get all the array of products and simply just render them so usually in nextgens how we do that we get this like get server side props and if you want to render this every single time the user requested a new page and we've registered data on every single request we use the get service Cyprus now because this is actually a products page that's why I need to use server side perhaps because I need to fetch data or fetch the new products every single time I don't want to like statically generate those on build time because products are a very crucial stuff and they want to like always get the latest prices and discounts and get the latest products from the database and the API now this is how we usually do it in next year's 12 implementation we do get suicide props we access the ID or parameters from the context we do a fetch in here a regular you know a fetch we get from the API we have local API in here and you can use async await regularly here products response we get products on the Json and simply return prompts and we access that prompts and this props obviously is going to get into the actual components and we can do you know as we usually do it now with next js13 it's completely different it's actually in fact a lot simpler and you don't need to think about how DNA is actually flowing between components and stuff you can just use it naturally as you would do it in the bank hand or as you're just using a straight through framework to fetch DNA without worrying about anything else so if we look at this this is like the down here is actually the implementation of next year 13. now simply all you do you create a function to fetch products and this function obviously is going to go in a fetch a product so you do products response you do fetch products whatever I'm just doing a waiting here just to visualize um you know delaying APA response so you can ignore that for now and like just go ahead and do like products response and get a Json and just return this and obviously I'm using async awaits so this is this is a function that returns a promise now if you look into our components this is the components this is the main component and this is a server component now in next year 13 by default any component you create without specifically specifying that this is a client component it's by default a server components so if you see something a little bit weird in here yes you're correct and that's not weird anymore so because here we're using fetch products and we're doing async of ways directly inside of the react components and we're using products directly to render that products and map through them and this is absolutely a reality and this is not a dream you're not dreaming and this won't cause a render Loop or won't cause any issues why because now the new RFC of server components can handle async await inside of the component itself can wait for it can use to spin can use streaming and can obviously render your data once it's ready and fetched from the API so simple as that you can do server side rendering or static side rendering but there is one thing or one teeny tiny configuration you should pay attention to in order to be able to tell oh I want static side generation or I want icr for revalidation or I want complete server side rendered on every single request the user makes so if you go back to the fetch now the fetch supports a different kind of behaviors and how to handle those so if you look at the first I'm just having a comment here it says this is SSG and this is like if you do cash Force cash this will be a static site generation because it's gonna Force cash on every single request and it's only gonna cash it once at build time and this will be the same thing as doing get static side props from components for the second option I'm using cash and doing no store that means there will be no cash whatsoever not on the CDN no cash at all and this is the same thing as doing SSR for our just calling or creating reporting get server suicide props for that component as well and also if you want revalidation so you want SSR plus icr and AI series basically just like SSR within just like you know a couple seconds that you want to wait before revalidating or like refreshing the data so you put it in your option called Next just directly into the fetch in here the fetch config option so you do next you put revalidase and you give it the number of seconds you want that actual you know cash and data to be revalidated since the last user's visit so as simple as that this is how next gs13 replaces the whole functions of get server side props or get static site props or even the revalidation they are over placed and now they are part of the web standards the fetch web standards with a simple configuration and I absolutely adore that it's a lot simpler and you don't have to worry about a lot of stuff so since we want SSR in here I'm just going to go ahead and uncomment this code so I'm going to put cash no store and this will be for SSR so I'm going to just go ahead and save this go back and refresh and obviously this should do fetch or do SSR every single time we refresh the page so to better test this and see if it's actually SSR or SSG or whatever I'm going to put cash no store that means I'm using SSR and I'm going to do like creating console login here for two products to know when we are actually fetching products and when we're like reloading and everything and also put some two console logs in here to see exactly when this component is re-rendering and also I'm gonna go do yarn build to create a production ready build so you can actually test how everything is actually working so I'm going to create that and actually start a build and create a new server now the server is actually running so to test this I'm going to go in and click refresh a couple of times to see if this is actually going to refresh and rerun the fetching function for us or not and if you look at the logs yes it does because why I'm getting the logs in here and not getting on the actual browsers console because this is a server component and this indeed runs in the backend and renders in the banking and only Returns the HTML so it doesn't run in the browser anyway that's why I'm seeing it right over here in my terminals console so if you look at this like exclusive re-render your products components and you get that and you get fetching products as well every single time we refresh now for SSG or static sign generation let's say we got like a Blog in here so this is actually our blog and we're rendering a bunch of posts we're fetching from the API and everything so this is actually the pose and if you click on it it actually takes you right into the posts and here just the same blog for slash whatever the post ID and you're going to get like the body and the title and everything so it's simple in here you've got your blog so this is actually the main Blog Page and you got the ID in here for another page and this is actually the post page now here simply we got a function to get get blog post which is an async function and does a Fetch and most importantly make sure you do Force cache for the caching here or you can leave this as empty and the fetch in here Will by default will fall back to the actual Force cache in here in the cache now once we access the actual post so we go Blog then forward slash the ID of the current pose we render this page so we render the ID page.jsx and not how we usually do it in next year's version 12 like before the new version in here we do get static side press because we want to statically generate blog posts we don't want to like refresh the blog post every single time the user does a request to the server we want to do this at build time but now in next year 13 it got way much simpler than it before so before here so if we look at this we do just a simple fetch post we do fetch posts that we usually do async awaits and everything we fetch to post in here we do post and we pass it the ID now the ID is going to automatically pass through by next.js and you don't want to worry about that so it's just like your components your main components any of the blog post components is going to have parameters and search parameters and these are all automatically like passed through from nextgens so we can easily access the ID I can grab the ID and do fetch bills as simple as that now one thing to keep in mind this generate static parameters is the same as get static pass before in next gs12 now if you try to actually run a production build to actually test if this is an SSG or not I'm gonna go ahead and do yarn build and start that server and it also added some console lines like refetching pose for the actual blog post in here whenever we do get like get blog post or for the component to see if it's re-rendered or not so now if you go back to the browser go to the production server I built and I'm going to just go into long forward slash blog I got that rendered as you can see it was super fast if I go back in here and actually put off my terminal I shouldn't see anything and that's actually the case now if I try to go to a single blog post for example this one I mean I have the console lines but this is not doing any console logs that means this was SSG and automatically rendered all the stuff you can clearly see the blog for slash ID and the blog itself they were statically generated compared to the products which was like an SSR for server-side rendering it has a Lambda that means that was actually Dynamic also there's a really awesome feature from xjs in here that allows you to export on every components like a layout or a page you can export cons dynamic or dynamic parameters or any of these values to a specific value to actually have a default kind of value for like data fetching parameters revalidation and much more so for example here you can export from like the products page.gsx in here which is the base component for rendering products I can export Dynamic and this if I look at it I can tell it whether it's going to be forced to be dynamic or forced to be static or if an error is going to be like thrown out if I try to use any Dynamic value so it's always going to like prevent you from fooling a parent or plenty of other values I really enjoy so for example if you do like first Dynamic this page will only have like the dynamic of everything so anyway thank you guys for watching I really hope you guys enjoyed I would really appreciate it if you can push that like button subscribe as well and give a try to the new next year's version 13.

Channel: CoderOne

Views: 60,140

Keywords: react.js, next.js, nextjs, next js, nextjs 13, next 13, nextjs data fetching, nextjs 13 data fetching, new nextjs data fetching, nextjs server side rendering, nextjs static site generation, nextjs ssg, nextjs ssr, nextjs ssr ssg, ssr, ssg, react ssr, react ssg, nextjs async await, nextjs fetch data, nextjs blog, nextjs portfolio, nextjs app, nextjs ecommerce, react nextjs, nextjs react, learn nextjs, master nextjs, nextjs beginners, learn nextjs 13

Id: g0Jc5D6tiCo

Length: 12min 49sec (769 seconds)

Published: Mon Oct 31 2022