useFormState returns stale data and Suspense boundaries reload with loading.tsx and revalidatePath
Unanswered
Peruvian anchoveta posted this in #help-forum
Peruvian anchovetaOP
I'm working on describing an issue (or maybe two issues) I'm seeing when using these things together:
-
- a page containing a suspended component
- a server action that runs
-
I've deployed a minimal reproduction you can interact with here: https://next-loading-revalidate-refresh-issue.vercel.app/
Source: https://github.com/shaunchurch/next-loading-revalidate-refresh-issue
And posted an issue on the github: https://github.com/vercel/next.js/issues/66426
Expected behaviour:
The page loads, displays the loading file, renders the page, shows the suspense fallback, renders the suspended component.
Then, clicking the button runs the server action, revalidates the path, and returns a value without a page refresh or triggering the suspended component to re suspend.
Actual behaviour:
The first time this sequence occurs by clicking the button after a full page refresh I see the following behaviour that seems unexpected:
- useFormState state is stale, continues to display the initial state
- The page refreshes and refetches suspended components
The second time the button is clicked things go back to working as expected. This is true for the rest of the user session until a full manual refresh.
If I delete the
If I delete the revalidatePath call in the server action, everything remaining works as expected.
Using all of these pieces together is causing some issues and I'd be grateful for any help debugging this and getting some visibility on the issue.
-
loading.tsx file for the route- a page containing a suspended component
- a server action that runs
revalidatePath.-
useFormState or useActionState to receive state returned from the server action. (The issue occurs with both in the latest v14 and the v15 RC)I've deployed a minimal reproduction you can interact with here: https://next-loading-revalidate-refresh-issue.vercel.app/
Source: https://github.com/shaunchurch/next-loading-revalidate-refresh-issue
And posted an issue on the github: https://github.com/vercel/next.js/issues/66426
Expected behaviour:
The page loads, displays the loading file, renders the page, shows the suspense fallback, renders the suspended component.
Then, clicking the button runs the server action, revalidates the path, and returns a value without a page refresh or triggering the suspended component to re suspend.
Actual behaviour:
The first time this sequence occurs by clicking the button after a full page refresh I see the following behaviour that seems unexpected:
- useFormState state is stale, continues to display the initial state
- The page refreshes and refetches suspended components
The second time the button is clicked things go back to working as expected. This is true for the rest of the user session until a full manual refresh.
If I delete the
loading.tsx file, everything remaining works as expected.If I delete the revalidatePath call in the server action, everything remaining works as expected.
Using all of these pieces together is causing some issues and I'd be grateful for any help debugging this and getting some visibility on the issue.