#Data organization in NextJS 13 (with App Router): Question on best practices

9 messages · Page 1 of 1 (latest)

versed ingot
#

Good morning,
I just have a quick question about best practices and organization of folders in the application. During my front end developer training, when I was creating an application in React, my teacher insisted that I call the data in a separate folder and especially not in a component that displays in order to best maintain the application.
In your opinion, should this practice be kept in the context of NextJS 13 (with App Router)?
I ask the question because I see a lot of tutorials on NextJS13 with App router where the data is called directly in the page, so ultimately I wonder if that's not how it should be done in the NextJS13 environment.
Thank you for your clarification.

sinful ivyBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

sage kayak
#

"Best practices" don't exist tbh, Next.js doesn't have an opinion on that. I personally prefer fetching the data in a component (like fetchProducts in the products page).
For shared logic, you may create a function to re-use the logic. You can imagine the server component as an API endpoint, it does make sense to fetch data inside your handler.

warm steeple
#

Next.js tends to push you towards fetching your data where you need it, and use caching to avoid overfetching

#

so it's normal in Next.js App Router to have a "PeopleList.tsx" server component to directly call the database to get people

#

I would consider that not a best practice but a starting point: that's what you do first, until you really do need to do otherwise

#

for example, now say that the list of people takes very dynamic parameters from the frontend to filter people => it's perhaps easier to make "PeopleList" a client component and fire a request to an API endpoint

#

so, the best solution is contextual, but deep integration of data fetching and rendering is idiomatic in Next.js, it's not a bad practice

versed ingot
#

Ok, Thanks a lot for your answers