Next.js MISTAKE is 👀 Easy to Make! 

We already did it

@@Weagle1337 But why? Didn't we use to hate monolithic based code?

I hope React comes up with an SSR solution

@@SajjadHematiNourani Is't that next js is all about !!

don't be surprised if we started to see php again..

Consider creating a function that does this and then import it in your server components and in your route handler. Write once and use it where you need it without adding an extra request.

​@@DaveGrayTeachesCode can I use that in use client React components? Write a function instead of an endooint? I thought these endpoints are made for use client components.

Sir I am too struggling with the same situation

Any help will be appreciated

Me too bro I feel you

That is correct. Your last question would be better discussed on my Discord. The short answer being "it depends".

@@DaveGrayTeachesCode thank you

How so

Route handlers don't slow things down by themselves, but making an additional request in your chain does. Just request the data directly from your server component. No need to go from server component to route handler to API or database when you can go straight from the server component to the source.

Usually the db is hosted somewhere else while the route handler should be in the same place where the SC is rendered. Also NextJS has its own implementation of fetch so I wouldn't be surprised if the fetch call is internally stripped away altogether. Overall this fetch call inside the server component should have absolutely negligible impact, especially compared to the round trip from route handler to db. Please elaborate if you think this is wrong

I agree that the db is usually hosted somewhere else. The route handler is indeed part of the Next.js app. I'm elaborating for you by sharing a quote and link from the docs: "Since Server Components render on the server, you don't need to call a Route Handler from a Server Component to fetch data. Instead, you can fetch the data directly inside the Server Component." Reference: nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#fetching-data-on-the-client-with-route-handlers ..in addition, your route handler is being built _at the same time_ as your component during the build process. Let's say you are trying to generate SSG pages and sending a fetch request to a route handler for the page data. You will get a build error because the handler is not available during build time. Server components should request directly from the source. Putting a handler between the component and data source requires an unnecessary 2nd fetch request and is slower even if you consider the impact to be negligible.

Yes. You cannot use hooks in a server component.

I think you will be interested in using the "use server" directive. Reference here: nextjs.org/docs/app/building-your-application/rendering/composition-patterns#keeping-server-only-code-out-of-the-client-environment

_Directly from a server component_ .. A route also runs on the same server. No need to go from server component to route.

@@DaveGrayTeachesCode thanks

since server component first rendering in server so you can directly connect to db ineasted of sending request over http from server to server this can make delay and decrease your speed.

Not necessarily. It depends on your needs. I find creating a REST API with Node.js & Express can still fulfill more robust needs. NestJS is a great Node.js framework for this, too.

Nextjs is a node JS framework, its a server that use react to render frontend

Well technically react is a library, not a framework.

Next.js is a JAMStack.

The point is what not to do. Do not use route handlers with server components.

@@DaveGrayTeachesCode Ah. Sorry, my question was kinda vague. But what should I do instead of making a call to route handlers in my server component? :)

He explained that if a server component is making a request to let's say a database, it can be done directly from the component without the need to use the API route handler. But if it's a client component making the request, then it will require a route handler like you would do with plain react in a MERN stack, except in this case, you'd use the API route handler because it is safe to use with or hide environmental variables. I hope I'm right tho. I'm just a learner

@@blaqhakym Ah, thanks!

@@thebugcoder3391 wherever the route handler would get the data from. You can do the same with a server component without putting the route handler in the middle.