Merge pull request #200 from mobeigi/use-client-side-view-counting

Disable PPR, use client side request to register views

app/next.config.mjs

@@ -17,9 +17,6 @@ const nextConfig = {
     // Process all files & folders
     dirs: ['.'],
   },
-  experimental: {
-    ppr: true,
-  },
   images: {
     contentDispositionType: 'inline',
     remotePatterns: [

app/src/app/(frontend)/api/custom/posts/[postId]/register-view/route.ts

@@ -0,0 +1,31 @@
+import { NextResponse } from 'next/server';
+import { headers } from 'next/headers';
+import { registerView } from '@/payload/utils/viewCounter';
+
+export const POST = async (request: Request, { params: paramsPromise }: { params: Promise<{ postId: string }> }) => {
+  try {
+    const params = await paramsPromise;
+    const { postId: postIdString } = params;
+
+    const postId = Number(postIdString);
+
+    if (isNaN(postId)) {
+      return NextResponse.json({ error: 'Invalid postId' }, { status: 400 });
+    }
+
+    const headerList = await headers();
+    const ipAddress = headerList.get('x-forwarded-for');
+    const userAgent = headerList.get('user-agent');
+
+    if (!ipAddress || !userAgent) {
+      return NextResponse.json({ error: 'Missing headers' }, { status: 400 });
+    }
+
+    // Fire async
+    void registerView({ postId: postId, ipAddress, userAgent });
+    return new NextResponse(null, { status: 204 });
+  } catch (error) {
+    console.error('Error registering view:', error);
+    return NextResponse.json(error, { status: 500 });
+  }
+};

app/src/app/(frontend)/blog/[...slug]/page.tsx

@@ -14,8 +14,6 @@ import { generateBreadcrumbs } from './breadcrumbs';
 import { Post as PayloadPost, Category as PayloadCategory } from '@/payload-types';
 import { resolvePostsUrl } from '@/payload/collections/Posts/resolveUrl';
 import { unstable_cache_safe } from '@/utils/next';
-import { Suspense } from 'react';
-import { RegisterViewSc } from './RegisterViewSc';
 
 export const revalidate = 900;
 
@@ -213,11 +211,6 @@ const BlogPostHandler = async ({ params: paramsPromise }: { params: Promise<{ sl
         </>
       )}
       <BlogPost {...blogPostProps} />
-
-      {/* Dynamically register view */}
-      <Suspense fallback={null}>
-        <RegisterViewSc postId={post.id} />
-      </Suspense>
     </div>
   );
 };

app/src/containers/BlogPost/BlogPost.tsx

@@ -12,27 +12,32 @@ import { BlogPostProps } from './types';
 import Sidebar from './Sidebar';
 import CommentSection from './CommentSection';
 import { serializeLexical } from '@/payload/lexical/serializeLexical';
+import RegisterView from './RegisterView';
 
 export const BlogPost = ({ meta, content, comments }: BlogPostProps) => {
   const contentBodyReactNode = serializeLexical(content.body);
+
   return (
-    <BlogPostContainer>
-      <BlogPostArticle>
-        <BlogSummaryWrapper>
-          <BlogSummaryContainer>
-            <BlogSummary blogPostMeta={meta} headingLevel="h1" linkHeading={false} showExcerpt={false} />
-            <hr />
-          </BlogSummaryContainer>
-        </BlogSummaryWrapper>
-        <BlogPostBodyContainer>
-          <BlogPostContents id="blogpost-contents">{contentBodyReactNode}</BlogPostContents>
-          <BlogPostSidebarWrapper>
-            <Sidebar body={contentBodyReactNode} />
-          </BlogPostSidebarWrapper>
-        </BlogPostBodyContainer>
-      </BlogPostArticle>
-      <hr />
-      <CommentSection comments={comments} postId={meta.post.id} commentsEnabled={meta.post.commentsEnabled} />
-    </BlogPostContainer>
+    <>
+      <RegisterView postId={meta.post.id} />
+      <BlogPostContainer>
+        <BlogPostArticle>
+          <BlogSummaryWrapper>
+            <BlogSummaryContainer>
+              <BlogSummary blogPostMeta={meta} headingLevel="h1" linkHeading={false} showExcerpt={false} />
+              <hr />
+            </BlogSummaryContainer>
+          </BlogSummaryWrapper>
+          <BlogPostBodyContainer>
+            <BlogPostContents id="blogpost-contents">{contentBodyReactNode}</BlogPostContents>
+            <BlogPostSidebarWrapper>
+              <Sidebar body={contentBodyReactNode} />
+            </BlogPostSidebarWrapper>
+          </BlogPostBodyContainer>
+        </BlogPostArticle>
+        <hr />
+        <CommentSection comments={comments} postId={meta.post.id} commentsEnabled={meta.post.commentsEnabled} />
+      </BlogPostContainer>
+    </>
   );
 };

app/src/containers/BlogPost/RegisterView/RegisterView.ts

@@ -0,0 +1,13 @@
+'use client';
+
+import { useEffect } from 'react';
+
+export const RegisterView = ({ postId }: { postId: number }) => {
+  useEffect(() => {
+    void fetch(`/api/custom/posts/${postId}/register-view/`, {
+      method: 'POST',
+    });
+  }, [postId]);
+
+  return null;
+};

app/src/containers/BlogPost/RegisterView/index.ts

@@ -0,0 +1 @@
+export { RegisterView as default } from './RegisterView';