Currently, I have set up a blog post edit page in my Next.js project.
The post pages are utilizing the Incremental Static Regeneration feature with a revalidation time of 1 second for testing purposes. In the future, I plan to increase this to a revalidation time of 300 seconds (5 minutes).
When updating a post, here is my process:
As an admin, I navigate to /admin/post/edit/my-post-slug, make any necessary changes, and then save the post.
After saving, I use the route.push method to move to the post page and view the updated version at /post/my-post-slug.
Here is the code snippet:
const savePost = async (post: BlogPost, router: NextRouter) => {
await savePostAPI(post);
const POST_ROUTE = "/post/my-post-slug";
router.push(POST_ROUTE);
};
Everything functions as intended, but there is a small issue.
This is the sequence of events that I experience:
- I'M ON ADMIN POST EDIT PAGE AND I SAVE
- I GO TO POST PAGE VIA router.push() AND I SEE THE OLD CONTENT (THIS IS EXPECTED)
- WAIT A LITLE
- I HIT REFRESH (F5) ONCE AND I RELOAD THE PAGE AND STILL SEE OLD CONTENT (NOT EXPECTED)
- WAIT A LITLE
- I HIT REFRESH (F5) AGAIN AND SEE THE NEW CONTENT
It's acceptable to see the old content initially after using router.push() since Next.js caches content and serves stale versions before generating new ones. However, why do I need to refresh the page twice to see the updated content? Shouldn't router.push initiate a server request to regenerate the page, considering it is already stale due to the revalidation setting of 1 second? Why does this double refresh occur?
Instead of using router.push(), would it be better to employ
window.location.href = "https://www.example.com/post/my-post-slug"