From d3b8d0c2634eb81c9f36cffb80da2f633af41aa0 Mon Sep 17 00:00:00 2001
From: Paul <paul@payloadcms.com>
Date: Mon, 9 Dec 2024 18:03:21 -0600
Subject: [PATCH] fix(templates): website infinite reload bug with 404s in
 production mode (#9843)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes https://github.com/payloadcms/payload/issues/9839 infinite reload
bug caused by live preview listener being in the layout — only happens
in production mode when hitting 404 pages.
---
 templates/website/src/app/(frontend)/[slug]/page.tsx        | 3 +++
 templates/website/src/app/(frontend)/layout.tsx             | 2 --
 templates/website/src/app/(frontend)/posts/[slug]/page.tsx  | 3 +++
 templates/website/src/components/PayloadRedirects/index.tsx | 4 +---
 4 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/templates/website/src/app/(frontend)/[slug]/page.tsx b/templates/website/src/app/(frontend)/[slug]/page.tsx
index 1aa61e20451..8ab6ec717b1 100644
--- a/templates/website/src/app/(frontend)/[slug]/page.tsx
+++ b/templates/website/src/app/(frontend)/[slug]/page.tsx
@@ -13,6 +13,7 @@ import { RenderBlocks } from '@/blocks/RenderBlocks'
 import { RenderHero } from '@/heros/RenderHero'
 import { generateMeta } from '@/utilities/generateMeta'
 import PageClient from './page.client'
+import { LivePreviewListener } from '@/components/LivePreviewListener'
 
 export async function generateStaticParams() {
   const payload = await getPayload({ config: configPromise })
@@ -71,6 +72,8 @@ export default async function Page({ params: paramsPromise }: Args) {
       {/* Allows redirects for valid pages too */}
       <PayloadRedirects disableNotFound url={url} />
 
+      <LivePreviewListener />
+
       <RenderHero {...hero} />
       <RenderBlocks blocks={layout} />
     </article>
diff --git a/templates/website/src/app/(frontend)/layout.tsx b/templates/website/src/app/(frontend)/layout.tsx
index 4f3e964e4e6..8c1e69b19fa 100644
--- a/templates/website/src/app/(frontend)/layout.tsx
+++ b/templates/website/src/app/(frontend)/layout.tsx
@@ -8,7 +8,6 @@ import React from 'react'
 import { AdminBar } from '@/components/AdminBar'
 import { Footer } from '@/Footer/Component'
 import { Header } from '@/Header/Component'
-import { LivePreviewListener } from '@/components/LivePreviewListener'
 import { Providers } from '@/providers'
 import { InitTheme } from '@/providers/Theme/InitTheme'
 import { mergeOpenGraph } from '@/utilities/mergeOpenGraph'
@@ -34,7 +33,6 @@ export default async function RootLayout({ children }: { children: React.ReactNo
               preview: isEnabled,
             }}
           />
-          <LivePreviewListener />
 
           <Header />
           {children}
diff --git a/templates/website/src/app/(frontend)/posts/[slug]/page.tsx b/templates/website/src/app/(frontend)/posts/[slug]/page.tsx
index ec25be6f5b3..63f805713be 100644
--- a/templates/website/src/app/(frontend)/posts/[slug]/page.tsx
+++ b/templates/website/src/app/(frontend)/posts/[slug]/page.tsx
@@ -13,6 +13,7 @@ import type { Post } from '@/payload-types'
 import { PostHero } from '@/heros/PostHero'
 import { generateMeta } from '@/utilities/generateMeta'
 import PageClient from './page.client'
+import { LivePreviewListener } from '@/components/LivePreviewListener'
 
 export async function generateStaticParams() {
   const payload = await getPayload({ config: configPromise })
@@ -54,6 +55,8 @@ export default async function Post({ params: paramsPromise }: Args) {
       {/* Allows redirects for valid pages too */}
       <PayloadRedirects disableNotFound url={url} />
 
+      <LivePreviewListener />
+
       <PostHero post={post} />
 
       <div className="flex flex-col items-center gap-4 pt-8">
diff --git a/templates/website/src/components/PayloadRedirects/index.tsx b/templates/website/src/components/PayloadRedirects/index.tsx
index 2e94fdde884..d2397716e35 100644
--- a/templates/website/src/components/PayloadRedirects/index.tsx
+++ b/templates/website/src/components/PayloadRedirects/index.tsx
@@ -12,11 +12,9 @@ interface Props {
 
 /* This component helps us with SSR based dynamic redirects */
 export const PayloadRedirects: React.FC<Props> = async ({ disableNotFound, url }) => {
-  const slug = url.startsWith('/') ? url : `${url}`
-
   const redirects = await getCachedRedirects()()
 
-  const redirectItem = redirects.find((redirect) => redirect.from === slug)
+  const redirectItem = redirects.find((redirect) => redirect.from === url)
 
   if (redirectItem) {
     if (redirectItem.to?.url) {