Live Preview and "hot reloading" of content running locally vs deployed

[jinwood]

Hey,

We have a proof-of-concept payload app we're using to evaluate for a project. Its a payload 3 app running within a nextjs website.

When I run the app up locally, I get live preview and content edits are immediately rendered in both the preview window and in the deployed app.

We also have the app deployed to vercel, but the behaviour here is quite different. I have to re-deploy the app to get content updates. Why is the behaviour different? What do I need to do to get the same behaviour on vercel?

I did read about revalidation, but that was on an older version of payload and it isn't specifically talked about in the docs so I wanted some clarification.

If it helps, here's my config:

{
  "name": "website-payload",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@payloadcms/db-mongodb": "^3.15.1",
    "@payloadcms/live-preview-react": "^3.15.1",
    "@payloadcms/next": "^3.15.1",
    "@payloadcms/plugin-cloud-storage": "^3.15.1",
    "@payloadcms/richtext-lexical": "^3.15.1",
    "@payloadcms/storage-s3": "^3.15.1",
    "@payloadcms/storage-vercel-blob": "^3.15.1",
    "graphql": "^16.10.0",
    "next": "15.1.4",
    "payload": "^3.15.1",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "sharp": "^0.33.5"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "eslint": "^9",
    "eslint-config-next": "15.1.4",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}

export default buildConfig({
  // If you'd like to use Rich Text, pass your editor here
  editor: lexicalEditor(),
  admin: {
    livePreview: {
      url:
        process.env.NEXT_PUBLIC_SITE_URL || "https://payload-flax.vercel.app/",
      collections: ["homepage"],
    },
  },

  collections: [Homepage, Media, RepeatableZone, Text],

  secret: process.env.NEXT_PUBLIC_PAYLOAD_SECRET || "",
  db: mongooseAdapter({
    url:
      process.env.NEXT_PUBLIC_DATABASE_URI ||
      "snip",
    connectOptions: {
      ssl: true,
      dbName: "payload",
    },
  }),
  sharp,
  upload: {
    limits: {
      fileSize: 5000000, // or whatever limit you want
    },
  },

  plugins: [
    vercelBlobStorage({
      enabled: true,
      collections: {
        media: true,
      },
      token: process.env.NEXT_PUBLIC_BLOB_READ_WRITE_TOKEN,
    }),
  ],
});

import { CollectionConfig } from "payload";

const Homepage: CollectionConfig = {
  slug: "homepage",
  versions: true,
  access: {
    read: () => true,
  },
  admin: {
    useAsTitle: "title",
    defaultColumns: ["title", "slug", "updatedAt"],
    livePreview: {
      url: ({ data }) => {
        const isHomepage = data.slug === "homepage";
        return `${process.env.NEXT_PUBLIC_PAYLOAD_URL}${!isHomepage ? `/${data.slug}` : ""}`;
      },
    },
  },
  fields: [
    {
      name: "title",
      type: "text",
      required: true,
    },
   // removed for brevity 
  ]
};

export default Homepage;

Any help appreciated!

Edit: for anyone stumbling across this post - the half answer is Vercel's data cache. Disable it and you'll get new content after a cmd+r. Still trying to work out how to get "hot" reloading in the live preview.