Hi! I'm encountering a strange issue with my Payload CMS setup. In my local environment, when I create a new post, it appears immediately after refreshing the page. However, when I deploy the project to Vercel and perform the same steps, the new post doesn't show up on the frontend. Interestingly, when I check the
/api/postsendpoint, the newly created post is there, but it still doesn't appear in the frontend.
Here's the code for the
/api/postsendpoint:
import configPromise from '@payload-config'
import { getPayload } from 'payload'
export const GET = async () => {
const payload = await getPayload({
config: configPromise,
})
const data = await payload.find({
collection: 'media',
})
return Response.json(data)
}And here's the code responsible for fetching the posts to display on the frontend:
"use server"
import { getPayload } from 'payload'
import config from '@payload-config'
export async function getMedia() {
const payload = await getPayload({
config: config,
});
const media = await payload.find({
collection: 'media',
depth: 1,
limit: 1000,
});
return media;
}It seems like there's a mismatch between the data fetched from the API and what the frontend displays. Any insights or suggestions on why this might be happening?
New Posts Not Showing on Frontend After Deploying Payload CMS to Vercel
This is probably due to caching or revalidation. When you make a change to a collection, like creating a new doc or updating, you need to let your frontend know that a change has happened so that it can be revalidated.
I'll refer you to how the website template handles this here:
https://github.com/payloadcms/payload/blob/main/templates/website/src/collections/Pages/hooks/revalidatePage.tsI've used
unstable_noStore()in the code responsible for fetching the posts to display on the frontend, and it worked!
Star
Discord
online
Get dedicated engineering support directly from the Payload team.