chore: test server only solution

.gitignore

@@ -135,3 +135,4 @@ package-lock.json
 .idea/
 .vercel
 .turbo
+.vscode

apps/next-server-only/next.config.mjs

@@ -5,8 +5,8 @@ const require = createRequire(import.meta.url)
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  // reactStrictMode: true,
-  /*
+  reactStrictMode: true,
+  // /*
   logging: {
     fetches: {
       fullUrl: true,
@@ -30,6 +30,7 @@ const nextConfig = {
 
   experimental: {
     taint: true,
+    windowHistorySupport: true,
   },
 
   webpack(config) {
@@ -45,20 +46,6 @@ const nextConfig = {
     }
     return config
   },
-
-  async headers() {
-    return [
-      {
-        source: '/:path*',
-        headers: [
-          {
-            key: 'Content-Security-Policy',
-            value: `frame-ancestors 'self' https://*.sanity.build http://localhost:3333`,
-          },
-        ],
-      },
-    ]
-  },
 }
 
 export default withBundleAnalyzer({

apps/next-server-only/package.json

@@ -18,6 +18,7 @@
     "@sanity/presentation": "workspace:*",
     "@sanity/preview-kit-compat": "workspace:*",
     "@sanity/preview-url-secret": "workspace:*",
+    "@sanity/react-loader": "workspace:*",
     "@sanity/vision": "^3.24.1",
     "@sanity/visual-editing-helpers": "workspace:*",
     "@tailwindcss/typography": "^0.5.10",
@@ -28,6 +29,7 @@
     "autoprefixer": "^10.4.16",
     "classnames": "^2.5.1",
     "date-fns": "^2.30.0",
+    "fast-deep-equal": "3.1.3",
     "next": "14.0.4",
     "next-sanity": "^7.0.10",
     "react": "^18.2.0",

apps/next-server-only/src/app/(blog)/AuthorAvatar.tsx

@@ -1,19 +1,20 @@
 import { sanityFetch } from '@/lib/fetch'
 import { urlForImage } from '@/lib/image'
+import { loadQuery } from '@/lib/loadQuery'
 import Image from 'next/image'
 import Balancer from 'react-wrap-balancer'
 
 const query = /* groq */ `*[_type == "author" && _id == $id][0]`
 
 export async function AuthorAvatar(params: { id: string }) {
-  const data = await sanityFetch<any>({
+  const [data,RevalidatePreviewQuery] = await loadQuery<any>({
     query,
     params,
     tags: [`author:${params.id}`],
   })
   const { name = 'Anonymous', image } = data
   return (
-    <div className="flex items-center">
+    <><div className="flex items-center">
       <div className="relative mr-4 h-12 w-12">
         <Image
           src={
@@ -31,6 +32,9 @@ export async function AuthorAvatar(params: { id: string }) {
         <Balancer>{name}</Balancer>
       </div>
     </div>
+    {/* When Draft Mode is enabled this component lets the Sanity Presentation Tool revalidate queries as content changes */}
+    <RevalidatePreviewQuery />
+    </>
   )
 }
 

apps/next-server-only/src/app/(blog)/MoreStories.tsx

@@ -1,11 +1,11 @@
 import Link from 'next/link'
 import { Suspense } from 'react'
 
-import { sanityFetch } from '@/lib/fetch'
 import { postFields } from '@/lib/queries'
 import { AuthorAvatar, AuthorAvatarFallback } from './AuthorAvatar'
 import CoverImage from './CoverImage'
 import Date from './PostDate'
+import { loadQuery } from '@/lib/loadQuery'
 
 const query = /* groq */ `*[_type == "post" && _id != $skip] | order(date desc, _updatedAt desc) [0...$limit] {
   ${postFields}
@@ -15,7 +15,7 @@ export default async function MoreStories(params: {
   skip: string
   limit: number
 }) {
-  const data = await sanityFetch<any>({ query, params, tags: ['post'] })
+  const [data,RevalidatePreviewQuery] = await loadQuery<any>({ query, params, tags: ['post'] })
 
   return (
     <>
@@ -63,6 +63,8 @@ export default async function MoreStories(params: {
           )
         })}
       </div>
+      {/* When Draft Mode is enabled this component lets the Sanity Presentation Tool revalidate queries as content changes */}
+      <RevalidatePreviewQuery />
     </>
   )
 }

apps/next-server-only/src/app/(blog)/[slug]/page.tsx

@@ -12,6 +12,7 @@ import { client } from '@/lib/client'
 import { urlForImage } from '@/lib/image'
 import { sanityFetch } from '@/lib/fetch'
 import { postFields } from '@/lib/queries'
+import { loadQuery } from '@/lib/loadQuery'
 
 type Props = {
   params: { slug: string }
@@ -25,10 +26,10 @@ export async function generateMetadata(
   { params }: Props,
   parent: ResolvingMetadata,
 ): Promise<Metadata> {
-  const [post, authorName] = await Promise.all([
-    sanityFetch<any>({ query, params, tags: [`post:${params.slug}`] }),
+  const [[post], [authorName]] = await Promise.all([
+    loadQuery<any>({ query, params, tags: [`post:${params.slug}`] }),
     // @TODO necessary as there's problems with type inference when `author-{name,image}` is used
-    sanityFetch<string | null>({
+    loadQuery<string | null>({
       query: /* groq */ `*[_type == "post" && slug.current == $slug][0].author->name`,
       params,
       tags: [`post:${params.slug}`, 'author'],
@@ -55,7 +56,7 @@ export async function generateMetadata(
 
 export default async function BlogPostPage({ params }: Props) {
   const { slug } = params
-  const data = await sanityFetch<any>({
+  const [data, RevalidatePreviewQuery] = await loadQuery<any>({
     query,
     params,
     tags: [`post:${params.slug}`],
@@ -105,6 +106,8 @@ export default async function BlogPostPage({ params }: Props) {
           <MoreStories skip={_id} limit={2} />
         </Suspense>
       </aside>
+      {/* When Draft Mode is enabled this component lets the Sanity Presentation Tool revalidate queries as content changes */}
+      <RevalidatePreviewQuery />
     </>
   )
 }

apps/next-server-only/src/app/(blog)/template.tsx → apps/next-server-only/src/app/(blog)/layout.tsx

@@ -4,8 +4,18 @@ import BlogHeader from './BlogHeader'
 import { EXAMPLE_NAME } from '@/lib/constants'
 import PreviewBanner from './PreviewBanner'
 import { draftMode } from 'next/headers'
+import dynamic from 'next/dynamic'
 
-export default function Template({ children }: { children: React.ReactNode }) {
+const Overlays = dynamic(() => import('@/components/VisualEditing/Overlays'))
+const PresentationToolBridge = dynamic(
+  () => import('@/components/VisualEditing/PresentationToolBridge'),
+)
+
+export default function BlogLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
   return (
     <>
       {draftMode().isEnabled && <PreviewBanner />}
@@ -19,6 +29,8 @@ export default function Template({ children }: { children: React.ReactNode }) {
           </Link>
         </footer>
       </div>
+      {draftMode().isEnabled && <Overlays />}
+      {draftMode().isEnabled && <PresentationToolBridge />}
     </>
   )
 }

apps/next-server-only/src/app/(blog)/page.tsx

@@ -7,10 +7,10 @@ import CoverImage from './CoverImage'
 import MoreStories from './MoreStories'
 import Date from './PostDate'
 import { postFields } from '@/lib/queries'
-import { sanityFetch } from '@/lib/fetch'
+import { loadQuery } from '@/lib/loadQuery'
 
 export default async function BlogIndexPage() {
-  const data = await sanityFetch<any>({
+  const [data, RevalidatePreviewQuery] = await loadQuery<any>({
     query: /* groq */ `
 *[_type == "post"] | order(publishedAt desc, _updatedAt desc) [0] {
   ${postFields}
@@ -67,6 +67,8 @@ export default async function BlogIndexPage() {
           </Suspense>
         </aside>
       )}
+      {/* When Draft Mode is enabled this component lets the Sanity Presentation Tool revalidate queries as content changes */}
+      <RevalidatePreviewQuery />
     </>
   )
 }

apps/next-server-only/src/app/layout.tsx

@@ -1,8 +1,8 @@
 import 'tailwindcss/tailwind.css'
 
 import type { Metadata } from 'next'
-
 import { Inter } from 'next/font/google'
+
 import { CMS_NAME } from '@/lib/constants'
 
 const inter = Inter({
@@ -18,18 +18,12 @@ export const metadata = {
 
 export default function RootLayout({
   children,
-  visualEditing,
 }: {
   children: React.ReactNode
-  visualEditing: React.ReactNode
 }) {
-  console.log('RootLayout', { children, visualEditing })
   return (
     <html lang="en" className={inter.variable}>
-      <body className="bg-white text-black">
-        {children}
-        {visualEditing}
-      </body>
+      <body className="bg-white text-black">{children}</body>
     </html>
   )
 }