Next.js Discord

Discord Forum

Server Actions Redirect awaited?

Unanswered
Silver Marten posted this in #help-forum
Open in Discord
Silver MartenOP
Hi everyone 👋

I have decided to build my fist project in Next.js. Since I am new to Next, I have done the tutorial, which was, quite good actually, kudos to team behind that and created new project with App router.

The project is quite simple, it is your github contributions skyline. You can check it out [here](https://github3d.vercel.app) . ([github repo](https://github.com/impeterk/nextgit )).

The data flow is pretty straight forward. Your username and year and URL parameters. Based on these a server Componenent, not Page, will fetch the data. Data will be passed down to client component and skyline is rendered. I have implemented <Suspense /> and Loading.tsx. So while the data is fetched, Skeleton component is shown.
On the first visit, everything works as expected ✔

At the top of the page, there is a simple form that changes username or year. Once the form is submitted, user is redirected to new page based on new URL params. Everything work as expected.
That is, if I am using client side router.push() function.

However...
I was quite excited to find out that server actions are in Next. I have used once formActions in sveltekit and they are pretty similar. This is when it breaks down.
Once the form dispatcheds the server action, user is being redirect, but only after the data is fetched.

No loading skeleton, nor Loading.tsx is shown.
How do I force this redirect to happen instantly and not await for the data to be fetched?

Shouldn't I be redirect right away, I am not awaiting anything...

Thanks for helping me

Example
https://github.com/impeterk/nextgit/blob/main/app/lib/actions.ts https://github.com/impeterk/nextgit/blob/main/app/ui/HeaderForm.tsx

0 Replies