Next.js MISTAKE is 👀 Easy to Make!
HTML-код
- Опубликовано: 28 сен 2024
- A common mistake in Next.js is attempting to fetch data from a Route Handler in a Server Component. This video shows you why!
💖 Support me on Patreon ➜ / davegray
💻 Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGra...
🚀 Discord ➜ / discord
👇 Follow Me On Social Media:
GitHub: github.com/git...
X: / yesdavidgray
LinkedIn: / davidagray
Blog: www.davegray.c...
We are slowly moving towards monolithic architecture again !
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..
I agree with that as long as you are reaching to the database directly from your server components (which I particularly am not a big fan of). If your actual backend is a separate app, I like to use Next.js route handlers as a BFF for both client and server components, this way I can aggregate multiple requests and transform the data before it actually reaches the component.
Imagine you have a page that needs to make fetch requests to 3 endpoints to get all the data it needs to render the page. If you move these 3 requests to a route handler and make only one request in your actual component, in my opinion this makes the code more readable and organized.
This is only my opinion of course, and I know that performance-wise this it suboptimal (though the difference is negligible most of the time).
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.
why dont handle it in backend?
you can handle your multiple request from 3 different end point and return one result does it make more readable and maintanable
Does it mean no need of backend or what?
Sometimes you need to fetch data in case you have an infinite scrolling section there you definitely need to fetch again
Sure, but you can use the swr-infinite package for that
I just would like to say it here that I'm actively looking for a junior dev role. I've tried all I can to land one but nothing is happening which is definitely due to my lack years of experience. I would appreciate any help or advise please. Thanks
Sir I am too struggling with the same situation
Any help will be appreciated
Me too bro I feel you
I really like the message here, but I just run into a problem when using prisma, as I would also like to use revalidateTag. I would have to use API route handlers, as I would not be able to add tags in my server components without using fetch.
wait until people hear about Remix
How to revalidate the data i read from a database in a server component?
i still don't understand it, are those people new to web or what ?
what happens when you now want to interact with a CRM or a report app like grafana or some automation tool like n8n/zapier ?
you will rebuild the API routes ?
Api from client component if we don't use server actions.
I can avoid api always with Next.js 14.
It is a revolution
Can we fetch data from an API endpoint in our server component without using useEffect?
Yes. You cannot use hooks in a server component.
But what If I have an express app which spits out REST or graphQL. Where to make the rqst then, considering my startup manager is dead set on nextjs and express
_Directly from a server component_ .. A route also runs on the same server. No need to go from server component to route.
@@DaveGrayTeachesCode thanks
Wait wait wait Wait I'm just learning react, are you telling me the react framework has a framework on top of it?
Nextjs is a node JS framework, its a server that use react to render frontend
Well technically react is a library, not a framework.
So what's the point of route and server components?
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.
Next js for frontend development is what Blazor for backend development 😂😢😅
I always prefer jamstack
Next.js is a JAMStack.
May your marriage be as beautiful as your wedding day. Cheers to a love that grows stronger with each passing day!"
Route handler? Rest APIS? Server components??? Jesus Christ I just want to make an app, then they’re like ok just learn to recode the entire internet should take you a year or 2 then you’ll be making $100k+ a year…….. I hate tech…… it’s so hard now……
Back in 2012 we would raw dog development on a live server with an “under construction” splash page up……. Times were much simpler then you could be way more creative!!! All the need for everything to be done “yesterday”, is what gave rise to frameworks which are exactly what kill creativity, but hey at least it gets done faster……
An example would be nice
nextjs just make unnecessary complicated. first we must make separate client and server component if we want to use react hook like usestate.
second just if we can handle backend in nextjs doesnt mean it you should do it. just place it in separate backend
third, congratulation for first init you have 500mb size for hello world in nextjs and eventually it will grow to 1gb if you have full app in nextjs
just stick to mern, dont make unnecessary again please
Why we are making php like😂
This seems like a total News architecturewise. i despise react for giving no directions. Like there Are so many frontenddevelopers who just call apis in the components itself , don’t know how to Write Unit Tests or know what separation of concerns even mean because they started with react
Thanks always for helpful contents mentor ❤
So i recently found out that server components perform pretty badly when trying to upload a file
How so
Thank you for the good video. Use api route on the client side and fetch directly with DB (e.g., prisma ORM) on the server component. Is it correct that I understand? And if I fetch data from DB, does the server component automatically cache that data?
That is correct. Your last question would be better discussed on my Discord. The short answer being "it depends".
@@DaveGrayTeachesCode thank you
lmao slowly going back to the good ol php way 😂
💟
I have a really stupid question. I am using nextjs with a custom express server. But both my client and server files exist in the same parent directory. So what I do is, I use server typeORM classes as types in nextjs components. Is that a bad thing to do? Will my server code end up on the client if I do this?
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
Is kt better to switch to next from express and node
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.
At this point just go back to php
Route handlers don't "slow things down". Also, if you need multiple frontends you will want to build a proper api.
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.
How do I do this?
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.
Hey Dave how was your first night 😁... backend ✅