overengineered view counter

Author: FranciscoMoretti

app/Home.tsx

@@ -5,6 +5,7 @@ import { formatDate } from 'pliny/utils/formatDate'
 import NewsletterForm from 'pliny/ui/NewsletterForm'
 import { CoreContent } from 'pliny/utils/contentlayer'
 import { Blog } from 'contentlayer/generated'
+import { PostViews } from '@/components/post-views'
 
 export function Home({
   posts,
@@ -36,7 +37,7 @@ export function Home({
                 <li key={slug} className="py-12">
                   <article>
                     <div className="space-y-2 xl:grid xl:grid-cols-4 xl:items-baseline xl:space-x-6 xl:space-y-0">
-                      <dl className="flex flex-row items-center justify-start gap-4 xl:flex-col xl:items-end xl:gap-3">
+                      <dl className="flex flex-row items-center justify-start gap-4 font-mono xl:flex-col xl:items-end xl:gap-3">
                         <div className="">
                           <dt className="sr-only">Published on</dt>
                           <dd className="text-base font-medium text-muted-foreground">
@@ -47,7 +48,7 @@ export function Home({
                           <div className="">
                             <dt className="sr-only ">View count</dt>
                             <dd className="flex flex-row items-center gap-1 text-base font-medium text-muted-foreground">
-                              {viewCount} views
+                              <PostViews slug={slug} prev={viewCount} />
                             </dd>
                           </div>
                         )}

app/actions.ts

@@ -1,43 +1,9 @@
 'use server'
 
-import { unstable_cache } from 'next/cache'
+import { revalidateTag, unstable_cache, unstable_noStore } from 'next/cache'
 
 import { db } from '@/lib/db'
 
-export async function upsertPost(slug: string) {
-  if (!db) {
-    return null
-  }
-  const result = await db.post.upsert({
-    where: {
-      slug,
-    },
-    create: {
-      slug,
-      views: 0,
-    },
-    update: {},
-  })
-  return result
-}
-
-export async function updatePostViews({ slug }: { slug: string }) {
-  if (!db) {
-    return null
-  }
-  const result = await db.post.update({
-    where: {
-      slug: slug,
-    },
-    data: {
-      views: {
-        increment: 1,
-      },
-    },
-  })
-  return result.views
-}
-
 export async function upsertIncreasePostViews({ slug }: { slug: string }) {
   if (!db) {
     return null
@@ -56,6 +22,7 @@ export async function upsertIncreasePostViews({ slug }: { slug: string }) {
       },
     },
   })
+  revalidateTag('post-views')
   return result
 }
 
@@ -74,7 +41,6 @@ export async function getPostViews({ slug }: { slug: string }) {
 
 export const getAllViews = unstable_cache(getAllViewsInternal, ['post-views'], {
   tags: ['post-views'],
-  revalidate: 3600, // TODO: Fine tune views revalidation time for a better user experience
 })
 
 async function getAllViewsInternal() {

app/blog/[...slug]/page.tsx

@@ -13,6 +13,8 @@ import siteMetadata from '@/data/siteMetadata'
 import { notFound } from 'next/navigation'
 import { getPostViews } from '@/app/actions'
 
+export const experimental_ppr = true
+
 const defaultLayout = 'PostLayout'
 const layouts = {
   PostSimple,

bun.lockb

@@ -8,7 +8,7 @@ export function NavigationEvents() {
 
   useEffect(() => {
     // TODO: create simpler logic
-    const slug = pathname?.split('/blog/').slice(1).join('/')
+    const slug = pathname?.split('/blog/').slice(1).join('/').split('#')[0]
 
     if (slug && process.env.NODE_ENV === 'production') {
       fetch('/api/posts/' + slug, {

components/navigation-events.tsx

@@ -1,19 +1,23 @@
 import { Suspense } from 'react'
 
 import { getPostViews } from '@/app/actions'
+import { unstable_noStore } from 'next/cache'
 
-export function PostViews({ slug }: { slug: string }) {
+export function PostViews({ slug, prev }: { slug: string; prev: number }) {
   return (
-    <span title="views">
-      <Suspense fallback={<>{'...'}</>}>
+    <span>
+      <Suspense fallback={<>{prev}</>}>
         <ViewCount slug={slug} />
       </Suspense>{' '}
       views
     </span>
   )
 }
 
-export async function ViewCount({ slug }: { slug: string }) {
+async function ViewCount({ slug }: { slug: string }) {
+  unstable_noStore()
+  // 1 sec delay to not switch abruptly on load
+  await new Promise((resolve) => setTimeout(resolve, 1000))
   const count = await getPostViews({ slug })
   return <>{count != null ? count : '-'}</>
 }

components/post-views.tsx

@@ -117,7 +117,7 @@ export default function ListLayout({
             return (
               <li key={path} className="py-4">
                 <article className="space-y-2 xl:grid xl:grid-cols-4 xl:items-baseline xl:space-y-0">
-                  <dl className=" flex flex-row items-center justify-start gap-4">
+                  <dl className="flex flex-row items-center justify-start gap-4 font-mono">
                     <dt className="sr-only">Published on</dt>
                     <dd className="text-sm font-medium text-muted-foreground">
                       <time dateTime={date} suppressHydrationWarning>

layouts/ListLayout.tsx

@@ -125,7 +125,7 @@ export default function ListLayoutWithTags({
                 return (
                   <li key={path} className="py-5">
                     <article className="flex flex-col space-y-2">
-                      <dl className=" flex flex-row items-center justify-start gap-4">
+                      <dl className="flex flex-row items-center justify-start gap-4 font-mono">
                         <dt className="sr-only">Published on</dt>
                         <dd className="text-sm font-medium text-muted-foreground">
                           <time dateTime={date} suppressHydrationWarning>

layouts/ListLayoutWithTags.tsx

@@ -17,7 +17,7 @@ interface LayoutProps {
   prev?: { path: string; title: string }
 }
 
-export default function PostMinimal({ content, next, prev, children }: LayoutProps) {
+export default function PostBanner({ content, next, prev, children }: LayoutProps) {
   const { slug, title, images } = content
   const displayImage =
     images && images.length > 0 ? images[0] : 'https://picsum.photos/seed/picsum/800/400'

layouts/PostBanner.tsx

@@ -9,8 +9,8 @@ import Image from '@/components/Image'
 import Tag from '@/components/Tag'
 import siteMetadata from '@/data/siteMetadata'
 import ScrollTopAndComment from '@/components/ScrollTopAndComment'
-import { Eye } from 'lucide-react'
 import { formatDate } from 'pliny/utils/formatDate'
+import { PostViews } from '@/components/post-views'
 
 const editUrl = (path) => `${siteMetadata.siteRepo}/blob/main/data/${path}`
 const discussUrl = (path) =>
@@ -41,7 +41,7 @@ export default function PostLayout({ content, authorDetails, next, prev, childre
         <div className="xl:divide-y xl:divide-border">
           <header className="pt-6 xl:pb-6">
             <div className="space-y-1 text-center">
-              <dl className="mb-1 flex flex-row items-center justify-start gap-4">
+              <dl className="mb-1 flex flex-row items-center justify-start gap-4 font-mono">
                 <div className="">
                   <dt className="sr-only">Published on</dt>
                   <dd className="text-sm font-medium text-muted-foreground">
@@ -52,7 +52,7 @@ export default function PostLayout({ content, authorDetails, next, prev, childre
                   <div className="">
                     <dt className="sr-only ">View count</dt>
                     <dd className="flex flex-row items-center gap-1 text-sm font-medium text-muted-foreground">
-                      {viewCount} views
+                      <PostViews slug={slug} prev={viewCount} />
                     </dd>
                   </div>
                 )}