Next.js No longer use SSR/SSG functions

Next.js 13 brought a complete redesign to the Data fetching system. No more getServerSideProps or getStaticSideProps and no more separation between the backend and the frontend. It all happens in the same place now. Components are the only source of truth for data and view. Let's see what the new data-fetching system is and how it works?
⭐ Timestamps ⭐
00:00 Intro
00:21 Next.js 13
02:27 Server-side rendering
09:09 Static site generation
⚡️Next.js 13 Data fetching Repo
github.com/ipenywis/nextjs-da...
🧭 Build Login/Register API Server w/ Authentication | JWT Express AUTH using Passport.JS and Sequelize
• Build Login/Register A...
🧭 Turn Design into React Code | From prototype to Full website in no time
• Turn Design into React...
🧭 Watch Tutorial on Designing the website on Figma
• I Design a onecolor We...
🧭 Watch Create a Modern React Login/Register Form with smooth Animations
• Create a Modern React ...
🧭 Debug React Apps Like a Pro | Master Debugging from Zero to Hero with Chrome DevTools
• Debug React Apps Like ...
🧭 Master React Like Pro w/ Redux, Typescript, and GraphQL | Beginner to Advanced in React
• Master React Like Pro ...
🧭 Learn Redux For Beginners | React Redux from Zero To Hero to build a real-world app
• Debug React Apps Like ...
🧭 Introduction to GraphQL with Apollo and React
• Introduction to GraphQ...
🐦 Follow me on Twitter: / ipenywis
💻 Github Profile: github.com/ipenywis
Made with 💗 by Coderone

[@joaomendoncayt]

They were not killed. There's backwards compatibility and incremental adoption oportunity on nextjs. You can still go the old way route.

[@VoyceAtlas]

found a "well actually" dude... lol

[@joaomendoncayt]

@@VoyceAtlas that was not the tone of my comment. But if that's all you have to add, sure thing

[@Ctrl_Alt_Elite]

@@VoyceAtlas nah this is important to know

[@GabrielMartinez-ez9ue]

Thanks

[@0xmaster584]

@@VoyceAtlas he wasn't fighting lol

[@trhhrferh]

Please be aware that the new functionality is only in beta stage, they are not stable. Better not use those in production and stick with current approach, which is NOT DEAD. It might be dead in 6 months or so, but not now.

[@merotuts9819]

6 months, more like 6 years. Ok, not 6 years maybe atleast 2-3 years.

[@sammybammy52]

im reading this exactly 6 months later lol, ill stick with 12 lol, im not taking any chances

[@nested9301]

stable now !

[@sammybammy52]

Well the Next CLI already forced me to use 13 so I just went with it

[@your_pro_socio]

@@merotuts9819 its dead lol

[@user-mp4de7iv3k]

clear and concise. thats what i was looking for.Thanks

[@iR0nline]

Any idea if the revalidate() function will still work in Next13? What if you change the title of a blog post in your CMS for example?

[@user-gp6eq1nq8s]

great explanation, keep up the good work!

[@raphaelamericano4115]

Great explanation! Thanks! You help me!

[@ByViancaG]

This is what I needed! Just started learning NextJs and couldn’t figure out the difference between server component fetching and using getServerSideProps- there’s no difference! Lol. Wish NextJs tutorial mentioned this smh

[@sebakthapa]

How do we manage global states using SSG or any other methods (SSR, ISR)?

[@realdaly]

How do I make my components server components if I'm not using the beta app directory? I tried getServerSideProps function but when I console.log the fetched data it logs both on the console and terminal.

[@magnacarta7045]

so is {cache: "force-cache"} literally the same as SSG such that it would need to rebuild again to fetch the updated data, in case the data is updated/changed?

[@hooyah]

Out of topic Its middleware next 12 and next13 same? Because the middleware docs in nextjs13 not available

[@elmcapp6032]

Pages have an api directory. in version 13 do the App directory have an api directory and do we still use it the same way

[@aroo1377]

So meaning fetchproducts is being used with async await and The website is still Server side renderred? Can someone please expain. Also what if I want to make api request to a backend with id that is coming from url inside server componemt,

[@henriquehermes214]

If I use axios for data fetching, this "cache" and "next" properties, will work?

[@tomasbuzeta3591]

I'm wondering the same

[@welfarewagonrepairs]

This caches the fetch request but is there any way to get it to cache the entire function? say if we were doing some computationally intensive calculations within the function?

[@ryostyles9904]

I think we can create a separate function/component for that calculation, use useMemo hook and then import it so that entire page doesn't switch to client side rendering because of it

[@NaveedUlIslam]

How does it compare with Remix now? Remix has been a winner in the past when it comes to performance.

[@makisetakashi]

how come you can add async in react component ?

[@captainpardipislive5187]

is there any way to implement redux with new app directory structure

[@tomasbuzeta3591]

How do you deploy this? im getting an error with vercel " Type error: Page "app/page.tsx" does not match the required types of a Next.js Page. "fetchNasaImages" is not a valid Page export field."

[@michaelplaxico]

Hey, @CodeOne, I'm wondering--is there a way to determine the user's device type server side so that I don't need to make my site responsive? I'd rather serve an alternate component upon learning of the user's device type (i.e., desktop vs. mobile). Sure, I could employ some combination of media query and dynamic imports, but I'm guessing that wouldn't do me much good in terms of SEO. Maybe you know a way to accomplish what I desire.

[@optymystyc]

Plaxico what’s happening man?

[@michaelplaxico]

@@optymystyc Nice to encounter you here, Berato.

[@ebben23]

So it is not actually exported as static pages, its just caching the response. Does this works when deployed on any platform other than vercel? And also if I just want to export it as stagic and just upload it on s3, how can I do it using the app folder? If possible

[@mdstudio8139]

It was always just caching the responses.

[@shinxz2098]

Got a few question; 1, Can I use Axios instead of fetch for this? 2, If for example I want to fetch the user data in the navbar, but also in the page, 2 different component of course, will it be efficient? in compare to SSR -> prop drilling (1 request at all vs 2+). 3, In SSR you can use functions like MySQL queries and etc., why its different with the new approach? It means I will have to make a new endpoint for each? 4, They are rendered in the server side- means it wont send a fetch request from the client? or will it? 5, How its different other than using useSWR hook or React Query and just put the component stuff on "loading" state until the data is fetched? thanks!

[@brokula1312]

Bye, bye axios. Obviously, they wrapped fetching system in order to utilise caches.

[@brangja4815]

Axios team need to add support for this feature, if they wanna keep up with the React. Cause even React new docs is recommanding Next JS instead of CRA.

[@MrEnsiferum77]

Ok, we know that frontends goes to fully CQRS. Actually I see the needs for frontend state is for just things like loading bar... And yeah, we have all this in angular, plus reactivity. But, todays frameworks puts the reactivity part behind their runtime, useSwr, useReactQuery, solidjs and decoupling of the state from the component, etc, u name it. So we lost 10plus years for crap tooling and things on frontend, just so we back to simple actions dispatching (not redux, but cqrs).

[@philheathslegalteam]

U have both

[@quelchx]

My company is using next version 12 and I don't know why people say data fetching is complex or hard using the 'old ways'. It may not be say as performant as the latest bleeding edge approaches -- but to claim it's difficult to understand, I find is a poor argument. The docs are pretty straightforward to me and it's done everything I have ever needed it to do as well as many other top tier companies out there who use nextjs.

[@yusufahmed3678]

I agree. In fact I'd say nextjs 12 gave me a lot more control on the way I wanna fetch data. Nextjs 13 seems to abstract away a lot of the lower level stuff that was present in version 12, and it makes me feel like I'm losing complete control of my app.

[@talhaamirali3786]

how's your Async functional component working??? because if i do the same in jsx it threw the error "objects are not valid as child". It tells you not to render an object. Adding the async-operator to our function makes it return a Promise. And a Promise is an object. But React does not know how to render an object.But in you case its working normallly.Can you please explain?

[@fyriss_]

It's working only in Next.js 13 in SSR mode

[@RajChaudhary-ps3en]

how can we used it in react query ?

[@bensonluis9846]

Hello i have a few knowledge with react and is now exploring next js in parallel. May I know what is the content of your imported component for it to accept the key={} and product={}? Thanks!

[@adarshrathi8265]

excellent knowledge

[@alirezanikkhah8519]

It was a great vidéo and tnq for that. I Just Wanted to Ask you to make à video on your vs code extensions bcuz I found them so use full and cool like folder icons and when you scrolled down name of the function stayed on top of the page.. Tnq so much

[@fabioalcocersejas2944]

what theme do you use? 🙌

[@tyndecor5236]

great tutorial

[@CoderOne]

FYI Next.js 13 is still in Beta and it's *completely* backward compatible with v12.

[@NarutoKing876]

@@ahmedsami7378 Classic clickbait tech KZbin video

[@dipeshchaulagain984]

what about on demand ISR?

[@jingli9232]

super clear

[@0xPanda1]

Using async component causes type error if you are using typescript within your project unless you override the types

[@CoderOne]

The project showcased in the video uses typescript. Next.js has support for that github.com/ipenywis/nextjs-data-fetching

[@0xPanda1]

@@CoderOne I was pointing to when you mount a custom async component into another it complains about async component cannot be used inside a jsx

[@iPankBMW]

@CoderOne Be aware - SSR does work ONLY when u manually/hard refresh the page and not when u navigating back and forward with Link component from next/link...(with Link component - entering the page first time witll SSR, but reentering the same page SSR doesnt work anymore) This hurts me so much. How do we solve this?

[@iPankBMW]

@avfr there is no getServerSideProps in Nextjs13 appDirr... just server components with some configuration to enable SSR

[@iPankBMW]

@avfr I dont want the data i fetch to be displayed in json file wehn u inspect the network tools. I want the backend to send a complete HTML with filled in data. Dont want to expose ANY data to the user excepts predefined HTML with content. And yeah im just trying out NEXTjs13 and not implementing in production. Just playing around and learning for the future + contribute with potential bugs so they get fixed as soon as possible - Thats a community job in general :)

[@havoq8257]

what vs-code theme do you use?

[@TheCrisgon]

second to this, i like the colors

[@faisalazmi8953]

How can we use axios for the same

[@thirdreplicator]

How do you completely disable SSR?

[@parth_patel2933]

what about handling errors ? how can we handle that ?

[@vmia159]

It is so weird for me to write a api/await code, not including hooks directly on a component without wrapping something on it.

[@brangja4815]

It's a server component.

[@ya4dang1]

7:03 Did you mean SSG instead of SSR, coupled with revalidation to get ISR?

[@sebakthapa]

Yes sir. The re-fetching task runs on background and updates the document with new data in ISR.

[@allisfehr]

How would you utilize this with React Query?

[@manuellopezanido]

I wonder the same, does this cache thing would replace React Query?

[@HungHoang-dm4qw]

Thanks bro

[@Fanaro]

Damn, this is indeed 100x simpler.

[@aramabdulrahman2087]

thanks... what about On-Demand ISR Revalidation data fetching with next js 13 ??

[@satindersingh780]

Questions 1. Diff between ssr and ssg 2. Can we use cache thing with axios?

[@karjanieluj3135]

Server Side Rendering vs Static Site Generation. One will fetch datas for each request server side, the second will generate a static page once and return it. You can use ISG too that will do a static generation each x seconds.

[@iPankBMW]

​@@karjanieluj3135 Be aware - SSR does work ONLY when u manually/hard refresh the page and not when u navigating back and forward with Link component from next/link...(with Link component - entering the page first time witll SSR, but reentering the same page SSR doesnt work anymore) This hurts me so much.

[@karjanieluj3135]

@@iPankBMW But you can probably force SSR even with next/link ? And if you need to refresh data regularly better use ISG in this case, is'nt it ?

[@WarframeCrunch]

I do not keeping up with all this stuff. I might abanadon front end and stick with PHP xD

[@meansnada]

You sound just like Mr. Mackey.

[@joostschuur]

Starting the video by claiming they are 'dead' is completely irresponsible as a content creator. It puts pressure on newer developers (your exact audience as a KZbinr) to feel like they need to catch up on all the latest trends and always be on the bleeding edge. Please consider the wider spectrum of people who might watch your videos when making bold, blanket statements like this.

[@RabeeAbuBaker]

Well said

[@chesterxp508]

GoodJob!

[@cardris2992]

They are not completely dead lol The app directory is EXTREMELY buggy still, routes tend to go kinda' crazy, the css is not loaded properly and etc. It is still far from production ready, even though it will be amazing.

[@SachinSharma590]

I think it is also available in react js in some days...

[@dhawalparmar7117]

Yeah but only for nodejs because reactjs is used with many different backend technologies

[@edgardevelops]

Not dead, it is still works, stop fake news for clickbait.

[@franciscokloganb]

Click bait. It's not dead, just abstracted so that you can work without worrying about those details. They still SSR and SSG on your behalf, there are even configuration objects to get some control over the provided abstraction. 🤔

[@golden_smiles]

All the rhetorics on the latest data to be fetched so simple does not work as Next13 relying hard on caching and there is no way to manage it, if you use server components.

[@sjn_]

It's scary to think how the frameworks and libraries have dominated the world of coding that people will no longer bother to learn the actual coding language and instead learn how to use the frameworks/libraries. "Oh no I'm not a JavaScript developer, I only do React and Next"

[@MrEnsiferum77]

Those are the crapiest developers, I like to avoid talking about technologies.

[@johwel340]

Using Frameworks and Libraries is all about Speed and performance.

[@MrEnsiferum77]

@@johwel340 Another dumb comment. Damn, go back to school and start writinig some binary trees.

[@sjn_]

@@johwel340 No it's not. You can achieve speed and performance with raw languages too if you know things. These libraries were also made using raw languages afterall. But that's totally out of the context here. I'm not saying it's a bad thing that people are using frameworks and libraries, they are meant to be used afterall. It's about how a lot of people tend to just start diving into these popular library bandwagon. You are not learning JavaScript, you are just learning the syntaxes of the said library and assemble them. I made this comment cause everyday there is a new JS library released, it's too saturated already.

[@cardris2992]

I don't think this makes sense, since u must absolutely know the language even if ur using a framework... it just makes things faster. This is the same as saying: omg it is a shame people use javascript and don't even bother to know assembly nowadays. Embrace new tech my friend, that's how we evolve lol

[@AveN7ers]

don't use any as a type bruh. You could've used GetServerSidePropsContext instead.

[@cristianmargineanu1458]

Proaps

[@jellyfish1772]

Hmmmmmm.they are still not dead😂😂😂

[@danko95bgd]

Becoming worse with every update

[@edgar116611]

getStaticProps

[@ThanHtutZaw3]

how can I delete this firestore 'user/uid123/todos/todoid123'

[@itsaaron6423]

I forgot how it's done but you'll find it easily. Deleting is actually the easiest .

[@ThanHtutZaw3]

@@itsaaron6423 now delete works but I can only delete single item. Not multiple. Like users/uid/todos/id1,id2 . How can I delete this multiple. With query?

[@itsaaron6423]

You'll have to loop through each item to delete and search in firebase with the item id.

[@itsaaron6423]

I made the item id the name of the file or todos so I was able to search and delete it .

[@SonGoku-ep4wj]

@@ThanHtutZaw3 use a map or for loop and delete every id if nothing else works