Fetching with Next.js 14 - Course part 15

[@blackdev417]

Thanks for explaining these concepts without all of the fluff, just getting straight to the relevant information. I am learning a lot through this Next.js series. Thank you so much.

[@PetriikVx]

Hi Guillaume, your course is excellent. Although I don´t have the time to go through the entire course, I always come back and every time I find the answer to my questions. :-)

[@codewithguillaume]

No problem my friend

[@GaelDuchesne]

tu m'a sauvé la vie avec la function async dans le client component, merci mec

[@codewithguillaume]

Pas de problème !

[@shawn.builds]

Regarding "Fetch on Client Component" - what if we don't want to fetch the data immediately, e.g. only want to fetch the data after the user clicks Submit?

[@glow6026]

you can wrap your fetch on a function and call your function when you click submit

[@writterpanditsid5048]

you can use server function and form action

[@Ta9i]

dont run the fetch function inside the useEffect but inside an event handler onClick={getPostById}

[@Ja-rz9fq]

Have you find the solution? It drives me crazy!!!

[@danielayesnu2537]

wow. you simply said it all. some youtubers just bit around the bush. I was wandering why the old method did not work. is saw them use localhost but they never said why

[@alloudy]

It is what i looking for. Great explanation, worth to subscribe 👍

[@Jack-ss4re]

In nextjs 14 app router, what if i need to use client-side hooks in my page AND fetch data like we used to do with "getServerSideProps"? theres a way to do that? since i insert 'use client' i can no longer fetch data statically or from serverside right?

[@satheeshkumar2594]

Hi Bro, Did you get any solution?

[@TonnyMwasumbi-lg7hz]

You saved my project🙌

[@HadrianiOfficial]

Good tutorial, man. You saved my days of figuring out to fetch data from dynamic pages :)) . Thing is I had to modify my code based from your example in adding useParams imported from next/navigation. I adapted it to my code since I'm using Prisma for database, and the code is slightly different from yours. Thanks :) I subbed to you. (sry not my developer account, but thanks hehe) :D

[@codewithguillaume]

Thanks brother

[@borknagarchile]

Great video but I have a question. Will server components be always SSR? Or under which conditions a server component will still be rendered as a client component, thanks 🎉

[@ShibuDhara-h3w]

In nextjs by default components are server SSR, but if your components is interactive, needs real time interaction then you have to convert it to client component forcefully by using "use client" directive.

[@kamrant8915]

Thank you very much for your brief explanation.

[@Siberianwolf232]

Excellent tutorial, thank you. I have a follow-up question, is it possible to use Server Actions for this purpose of fetching data in a Client Component to avoid useEffect? I keep hearing that useEffect should be avoided as much as possible, but haven't found a way to use Server Actions instead in most cases...

[@codewithguillaume]

Yes ! Come to my discord if you need help dub.sh/codewithg-discord

[@moka7986]

Where did you hear about avoiding useEffect? I am curious

[@ndifrekeumoren3548]

Very helpful, thanks!

[@codewithguillaume]

Nope thanks my friend

[@nileshzemse]

Hey Great content, can you also create a video explaining fetching data from database like postgres or mysql (using sequalize) with next js 14
... that would be great... I am getting error while doing this even though I have installed packages pg and sequelize

[@codewithguillaume]

I can do it in next videos yes ! See you soon

[@alexandergeorgesquire220]

Thanks

[@PeriklesPeriklesoglu]

thank you

[@academai11]

So the async function would work if defined inside the client component and used with usestate?

[@capricorn.engineering]

LOVE IT! GREAT CONTENT

[@FullMe7alJacke7]

Any tips on how we can get experimental https working locally? I am using NextJS for a frontend to a Laravel API project.

[@ys1197]

Hello, I need help. I am trying to host in vercel but it gives me an error. Doing it this way the data will come undefined. I guess that is because the localhost:3000 on Vercel. any ways to fix this? thx

[@shin5984]

I have the same error did u fixed it?

[@pauliusm2735]

am i missing something, have they not invented getServerside props and so on to not have to do this? are we going back in nextjs14?

[@roshanjha490]

Yes you are right, NextJS app folder does not support getServerside props it was supported in pages directory.

[@asdfg1346on]

can you help me please dude? you are the only one that gets close to my problem but i still cant figure it out. in my project i have a client side component for a page that fetches to my api endpoint which queries the postgres database i have on vercel. long story short, in development if i insert a new row in the database it will take into consideration but in production it wont update even if i refresh the page and it would only show the new row if i commit again the project. is there a way to get in contact with you? please man, i will literally tell about your channel to anyone i know learning next js if you can help me fix this problem that drives me crazy. i can show you the code, aand whatever you need

[@codewithguillaume]

Hey mate it looks like it’s a problem from SSR rendering try revalidate your page OR it’s a problem from your API call ! Best

[@asdfg1346on]

@@codewithguillaume is there a way to send you the api call, its a really simple code

[@carlotubigon8763]

This method returns hydration error when there is loading.js. Do you have any idea on how to fix it?

[@kushagrarai3801]

You can remove the warning by putting an attribute suppressedHydrationWarning to true inside html or body element

[@umairmuhammadabbas3929]

But you cannot deploy a next app with localhost url ?

[@codeNinja2320]

how can i use Axios with it?

[@rezakhani8627]

Hello sir, in the new version of next js 14, are the getstaticprops functions still used?

[@tm-nm5hk]

You will not need to use the getStaticProps hook with Next.js 14

[@shihabhasan8959]

Wonderfull