Help implementing "tabs" using server components.
Unanswered
Cuban Crocodile posted this in #help-forum
Cuban CrocodileOP
Hello,
I need some advice what's the best way to implement following page.
I have a page here https://develop--ptcg-pairings.netlify.app/tournaments/421dcf9c-555f-4b69-bd18-4ea0bf2dc162/pairings?w=my-pairings
It uses next.js 15 and only server components (except header which does not matter now). The page fetches data, reads query param
It's very similar to this code https://v0.dev/chat/Jj6TNAPlzJb?b=b_wG5U2oKGexH
Problem is, that clicking a button to switch between view has significant delay. The delay depends on internet connection. If response from server is fast it's not big (but still noticable and the switch is not smooth as it would be in SPA).
In pure SPA the data would be fetched once at start and than switching would be immediate without any other server fetch. In my code there is a server fetch each view switch.
My question is: What is the best way implementing such use case in Next 15? Is it making it completely client side? Or is it possible (and correct) implementing it as server components but am I doing something wrong? Let's say I want to keep fetching the whole data set in root page component. (better would be fetching data chunks in each view component but currently I want to keep as is)
Thanks for help
I need some advice what's the best way to implement following page.
I have a page here https://develop--ptcg-pairings.netlify.app/tournaments/421dcf9c-555f-4b69-bd18-4ea0bf2dc162/pairings?w=my-pairings
It uses next.js 15 and only server components (except header which does not matter now). The page fetches data, reads query param
w and based on value of the query param renders a component which takes the fetched data and displays something. There is a set of buttons that switch between the views (and change value of the query param). It's very similar to this code https://v0.dev/chat/Jj6TNAPlzJb?b=b_wG5U2oKGexH
Problem is, that clicking a button to switch between view has significant delay. The delay depends on internet connection. If response from server is fast it's not big (but still noticable and the switch is not smooth as it would be in SPA).
In pure SPA the data would be fetched once at start and than switching would be immediate without any other server fetch. In my code there is a server fetch each view switch.
My question is: What is the best way implementing such use case in Next 15? Is it making it completely client side? Or is it possible (and correct) implementing it as server components but am I doing something wrong? Let's say I want to keep fetching the whole data set in root page component. (better would be fetching data chunks in each view component but currently I want to keep as is)
Thanks for help
10 Replies
you can use a layout for the number 5 and make every tab a page, then they all will be server components and fast
American black bear
The delay that is happening is because the server is fetching all the data the page needs before it sends it to the user.
You can add a
loading.tsx file to each of your pages route which can display a skeleton and let the user know that the page is loading.That or only fetching the required data reducing the load times.
app/
page1/
page.tsx
loading.tsx
page2/
page.tsx
loading.tsx
etc.Cuban CrocodileOP
But none of these reduces the delay to zero. My point is if I do the page (only one page) client side (SPA) it would fetch data once and switching tabs would be instant. No page refresh after switching tab so no new data fetch. With server components there always will be fetch of the data after clicking the tab, right. All I can do is optimize the fetch time using cache, reducing data size, etc. Is that correct?
Australian Freshwater Crocodile
You could cache the page individually and revalidate to get fresh data and update the cache, this can be done either on demand via a server action or route handler calling revalidatePath/ revalidateTag; or time based ( every hours, minutes, whatever)
Is the data going to change often?
Is the data going to change often?
The page won’t re fetch every time, it’ll be static for the time you want, it’ll swap tabs immediately after the first time, for the first time you could wrap them in suspense (effectively loading.tsx)
And also, if you need to make a client component then make it a client component, it’s not a big deal, you’d still get the pre rendered html either way.
And if you mix server component to fetch initial data and pass down to a client component that’s using let’s say React Query, you can provide the initial data to the useQuery hook and from there, every subsequent caching and refetching will happen in the client
And if you mix server component to fetch initial data and pass down to a client component that’s using let’s say React Query, you can provide the initial data to the useQuery hook and from there, every subsequent caching and refetching will happen in the client