nextjs 14 app directory data fetching for different tabs
Answered
Romanian Mioritic Shepherd Dog posted this in #help-forum
Romanian Mioritic Shepherd DogOP
Hello,
I am using the app directory and i want to create a page where i have different tabs for user information like the first tab is the profile and the second tab are the bank details.
I am actually fetching all the data i need server side in the page.tsx file since that is recommended.
using this approach i fetch the data for all the tabs in the page.tsx file which is a little bit overhead, even if the route handler sends only the needed data (the current tabs) to the client.
what is the best approach for fetching the data only for the selected tab? using client side fetching? using client side fetching with useSWR? rendering a client side component inside the page.tsx file which then renders two server side components (one for each of the tabs)?
I am using the app directory and i want to create a page where i have different tabs for user information like the first tab is the profile and the second tab are the bank details.
I am actually fetching all the data i need server side in the page.tsx file since that is recommended.
using this approach i fetch the data for all the tabs in the page.tsx file which is a little bit overhead, even if the route handler sends only the needed data (the current tabs) to the client.
what is the best approach for fetching the data only for the selected tab? using client side fetching? using client side fetching with useSWR? rendering a client side component inside the page.tsx file which then renders two server side components (one for each of the tabs)?
Answered by Ray
for example,
and you can navigate between the tab with
/tabs/1, /tabs/2, /tabs/3
app/tabs/layout.tsxapp/tabs/1/page.tsxapp/tabs/2/page.tsxapp/tabs/3/page.tsxand you can navigate between the tab with
Link/tabs/1, /tabs/2, /tabs/3
11 Replies
@Romanian Mioritic Shepherd Dog Hello,
I am using the app directory and i want to create a page where i have different tabs for user information like the first tab is the profile and the second tab are the bank details.
I am actually fetching all the data i need server side in the page.tsx file since that is recommended.
using this approach i fetch the data for all the tabs in the page.tsx file which is a little bit overhead, even if the route handler sends only the needed data (the current tabs) to the client.
what is the best approach for fetching the data only for the selected tab? using client side fetching? using client side fetching with useSWR? rendering a client side component inside the page.tsx file which then renders two server side components (one for each of the tabs)?
Hi, I suggest making those tab in a nested route and fetch individual data the tab needs
Romanian Mioritic Shepherd DogOP
@Ray Would that still be server side data fetching? or should i switch to client side data fetching?
for example,
and you can navigate between the tab with
/tabs/1, /tabs/2, /tabs/3
app/tabs/layout.tsxapp/tabs/1/page.tsxapp/tabs/2/page.tsxapp/tabs/3/page.tsxand you can navigate between the tab with
Link/tabs/1, /tabs/2, /tabs/3
Answer
Romanian Mioritic Shepherd DogOP
@Ray I see what you mean.
I currently have it this way:
settings/page.tsx
which fetches user data and employee data.
then renders
settings/SettingTabs.tsx
which uses tab from shardcn/ui
and renders
settings/EmployeeSettings.tsx
settings/UserSettings.tsx
Doing it like you suggested would mean changing all of this.
I am not even sure if this is worth the overhead.
I currently have it this way:
settings/page.tsx
which fetches user data and employee data.
then renders
settings/SettingTabs.tsx
which uses tab from shardcn/ui
and renders
settings/EmployeeSettings.tsx
settings/UserSettings.tsx
Doing it like you suggested would mean changing all of this.
I am not even sure if this is worth the overhead.
its worth definitely
app/settings/setting/page.tsx only fetch ??app/settings/employee/page.tsx only fetch employee dataapp/settings/user/page.tsx only fetch user dataalso, this approach make the link able to prefetch by
LinkRomanian Mioritic Shepherd DogOP
@Ray I see what you mean and that sounds ok. so I will need to create my own tabs component which I actually tried to avoid. meh. thank you.
oh if you are using some UI component with it, then its better to do it with client side fetching
Romanian Mioritic Shepherd DogOP
@Ray it is ok, i changed the component as a whole since shadcn/ui just creates the component in our own components folder. we can change it as we like 🙂