How to tackle this? Parallel routes?
Unanswered
Bicknell's Thrush posted this in #help-forum
Bicknell's ThrushOP
Hi there,
I'm writing a simple application at the moment. I have a server component (src/app/projects/page.tsx) which is a
This list is then passed to a
When I click on a project, I want to show a ShadCN sheet which fetches the project's details, so more details than the project list has. This is where things get tricky.
Because the ProjectList is a client component, I cannot use a server component to fetch that details of the clicked project.
What is the best solution to combat these kind of situations?
I've recently looked at parallel routes, but I wonder if that's the proper way to go in these kind of situations. Any help or suggestions is greatly welcome. Thanks in advance.
I'm writing a simple application at the moment. I have a server component (src/app/projects/page.tsx) which is a
default async function Page() which fetches through an API a list of Projects.This list is then passed to a
<ProjectList>, which is a client component. The list is rendered as a simple table, lets assume that for now.When I click on a project, I want to show a ShadCN sheet which fetches the project's details, so more details than the project list has. This is where things get tricky.
Because the ProjectList is a client component, I cannot use a server component to fetch that details of the clicked project.
What is the best solution to combat these kind of situations?
I've recently looked at parallel routes, but I wonder if that's the proper way to go in these kind of situations. Any help or suggestions is greatly welcome. Thanks in advance.
7 Replies
If all the things you listed are on a single page, you should consider using [Server Actions](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations), which are available in client components
Bicknell's ThrushOP
Then use the action in a useEffect or something, to fetch the data in the component?
I feel that it's an option but not the best option. I also dont know what the best option would be in this case. Are there examples of these kind of situations? I've tried searching the docs, however no success.
@Bicknell's Thrush Then use the action in a useEffect or something, to fetch the data in the component?
Wherever you want, if, for example, you want to fetch the data when the user clicks a button you can do
<button onClick={() => {
const data = await fetchData(...);
// Do something with the data
}}>
Load the data
</button>Bicknell's ThrushOP
And if I dont want to use server actions? Is my use-case even possible without server actions?
I mean, if I understood correctly, you have a client component and want to fetch some data when the user does a specific action (like clicking a button). The event is something that happens on the client so if you want to fetch the data from the server instead, you have to "call" the server. The only method to call the server is with a web request, so you can create a route handler or use a server action (which is like a route handler simplified)
Otherwise, you can
<Link> the user to a different page which preserves the layout of your current one and loads the data in a server component