fix(templates): website infinite reload bug with 404s in production m…

…ode (#9843) Fixes #9839 infinite reload bug caused by live preview listener being in the layout — only happens in production mode when hitting 404 pages.
payloadcms · Dec 10, 2024 · d3b8d0c · d3b8d0c
1 parent 1e5364f
commit d3b8d0c
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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) {