Data organization in NextJS 13 (with App Router): Question on best practices
Answered
European imported fire ant posted this in #help-forum
European imported fire antOP
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.
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.
Answered by Eric Burel
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
7 Replies
"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
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.
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.
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
Answer
European imported fire antOP
Ok, Thanks a lot for your answers