Not seeing updated data in a server side component after adding new data in production environment
Unanswered
Western harvester ant posted this in #help-forum
Western harvester antOP
Hello everyone,
I'm encountering an issue with my NextJS 14 application deployed on Vercel. The GetTags component, which displays tech tags from my database, works correctly on initial deployment but fails to update immediately when new tags are added in production. This issue only occurs in the production environment; it works as expected in development.
Setup:
- NextJS 14 with App Router
- Deployed on Vercel
- Server actions for adding tags
- GetTags is a server component fetching data from an internal API route
- revalidateTag() implemented in the server action after adding a tag
- router.refresh() used on the client side after successful tag addition
Attempts made:
- Set cache: 'no-store' in fetch options
- Used router.refresh() after server action completes
- Implemented next: { tags: ['techTag'], revalidate: 5 } in the fetch request
Despite these efforts, the component doesn't immediately refetch data in production.
Key questions:
- What might cause this discrepancy between development and production behavior?
- Are there Vercel-specific configurations I should investigate?
- How can I effectively force an immediate refetch of the GetTags component after adding a new tag?
Any insights or suggestions would be greatly appreciated. Thank you!
I'm encountering an issue with my NextJS 14 application deployed on Vercel. The GetTags component, which displays tech tags from my database, works correctly on initial deployment but fails to update immediately when new tags are added in production. This issue only occurs in the production environment; it works as expected in development.
Setup:
- NextJS 14 with App Router
- Deployed on Vercel
- Server actions for adding tags
- GetTags is a server component fetching data from an internal API route
- revalidateTag() implemented in the server action after adding a tag
- router.refresh() used on the client side after successful tag addition
Attempts made:
- Set cache: 'no-store' in fetch options
- Used router.refresh() after server action completes
- Implemented next: { tags: ['techTag'], revalidate: 5 } in the fetch request
Despite these efforts, the component doesn't immediately refetch data in production.
Key questions:
- What might cause this discrepancy between development and production behavior?
- Are there Vercel-specific configurations I should investigate?
- How can I effectively force an immediate refetch of the GetTags component after adding a new tag?
Any insights or suggestions would be greatly appreciated. Thank you!