good enough view counter

Author: FranciscoMoretti

app/actions.ts

@@ -1,6 +1,6 @@
 'use server'
 
-import { revalidateTag, unstable_cache, unstable_noStore } from 'next/cache'
+import { revalidateTag, unstable_cache } from 'next/cache'
 
 import { db } from '@/lib/db'
 
@@ -23,6 +23,8 @@ export async function upsertIncreasePostViews({ slug }: { slug: string }) {
     },
   })
   revalidateTag('post-views')
+
+  const newRes = await getAllViews()
   return result
 }
 

app/api/posts/[slug]/route.ts

@@ -1,4 +1,5 @@
 import { upsertIncreasePostViews } from '@/app/actions'
+export const dynamic = 'force-dynamic'
 
 export async function POST(request: Request, { params }: { params: Promise<{ slug: string }> }) {
   try {

app/providers.tsx

@@ -7,6 +7,7 @@ import { TailwindIndicator } from '@/components/tailwind-indicator'
 import { ThemeProvider as NextThemesProvider } from 'next-themes'
 import { Suspense } from 'react'
 import { NavigationEvents } from '@/components/navigation-events'
+import { ReactQueryProvider } from './react-query-provider'
 
 const PHProvider = dynamic(
   () => import('@/components/posthog-provider').then((mod) => mod.PHProvider),
@@ -23,18 +24,20 @@ export function Providers({ children }: { children: React.ReactNode }) {
       enableSystem
       disableTransitionOnChange
     >
-      {/* Render children immediately */}
-      {children}
+      <ReactQueryProvider>
+        {/* Render children immediately */}
+        {children}
 
-      {/* Defer analytics initialization */}
-      <Suspense fallback={null}>
-        {process.env.NEXT_PUBLIC_POSTHOG_KEY && (
-          <PHProvider>
-            <PostHogPostHogPageView />
-          </PHProvider>
-        )}
-        <NavigationEvents />
-      </Suspense>
+        {/* Defer analytics initialization */}
+        <Suspense fallback={null}>
+          {process.env.NEXT_PUBLIC_POSTHOG_KEY && (
+            <PHProvider>
+              <PostHogPostHogPageView />
+            </PHProvider>
+          )}
+          <NavigationEvents />
+        </Suspense>
+      </ReactQueryProvider>
       <TailwindIndicator />
     </NextThemesProvider>
   )

app/react-query-provider.tsx

@@ -0,0 +1,16 @@
+'use client'
+
+import React from 'react'
+import { QueryClientProvider, QueryClient } from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+
+export function ReactQueryProvider({ children }: React.PropsWithChildren) {
+  const [client] = React.useState(new QueryClient())
+
+  return (
+    <QueryClientProvider client={client}>
+      {children}
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  )
+}

app/seo.tsx

@@ -11,6 +11,7 @@ interface PageSEOProps {
 
 export function genPageMetadata({ title, description, image, ...rest }: PageSEOProps): Metadata {
   return {
+    metadataBase: new URL(siteMetadata.siteUrl),
     title,
     description: description || siteMetadata.description,
     openGraph: {

bun.lockb

@@ -2,26 +2,31 @@
 
 import { useEffect } from 'react'
 import { usePathname } from 'next/navigation'
+import { useQueryClient } from '@tanstack/react-query'
 
 export function NavigationEvents() {
   const pathname = usePathname()
+  const queryClient = useQueryClient()
 
   useEffect(() => {
     // TODO: create simpler logic
     const slug = pathname?.split('/blog/').slice(1).join('/').split('#')[0]
 
-    if (slug && process.env.NODE_ENV === 'production') {
+    if (slug) {
       fetch('/api/posts/' + slug, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
         },
         body: JSON.stringify({}),
       })
-        .then((response) => response)
+        .then((response) => {
+          queryClient.invalidateQueries({ queryKey: ['postViews', slug] })
+          return response
+        })
         .catch((error) => console.error(error))
     }
-  }, [pathname])
+  }, [pathname, queryClient])
 
   return null
 }

components/navigation-events.tsx

@@ -1,31 +1,24 @@
 'use client'
 
-import { useEffect, useState } from 'react'
-
 import { getPostViews } from '@/app/actions'
+import { useQuery } from '@tanstack/react-query'
 
 export function PostViews({ slug, prev }: { slug: string; prev: number }) {
   return (
-    <span>
+    <span title="views">
       <ViewCount slug={slug} prev={prev} /> views
     </span>
   )
 }
 
 function ViewCount({ slug, prev }: { slug: string; prev: number }) {
-  const [views, setViews] = useState(prev)
-
-  useEffect(() => {
-    // Fetch updated view count
-    async function fetchViews() {
-      // Wait 1 second to view to be added to db
-      await new Promise((resolve) => setTimeout(resolve, 1000))
-      getPostViews({ slug }).then((count) => {
-        if (count != null) setViews(count)
-      })
-    }
-    fetchViews()
-  }, [slug])
-
-  return <>{views ?? '-'}</>
+  const { data } = useQuery({
+    queryKey: ['postViews', slug],
+    queryFn: async () => {
+      // Add artificial delay for smoother UI transition when switching between posts
+      await new Promise((resolve) => setTimeout(resolve, 500))
+      return getPostViews({ slug })
+    },
+  })
+  return <>{data != null ? data : prev}</>
 }

components/post-views.tsx

@@ -8,6 +8,7 @@ import type { Blog } from 'contentlayer/generated'
 import Link from '@/components/Link'
 import Tag from '@/components/Tag'
 import siteMetadata from '@/data/siteMetadata'
+import { PostViews } from '@/components/post-views'
 
 interface PaginationProps {
   totalPages: number
@@ -113,7 +114,7 @@ export default function ListLayout({
         <ul>
           {!filteredBlogPosts.length && 'No posts found.'}
           {displayPosts.map((post) => {
-            const { path, date, title, summary, tags, viewCount } = post
+            const { path, date, title, summary, tags, viewCount, slug } = post
             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">
@@ -128,7 +129,7 @@ export default function ListLayout({
                       <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>
                     )}

layouts/ListLayout.tsx

@@ -9,6 +9,7 @@ import Link from '@/components/Link'
 import Tag from '@/components/Tag'
 import siteMetadata from '@/data/siteMetadata'
 import tagData from 'app/tag-data.json'
+import { PostViews } from '@/components/post-views'
 
 interface PaginationProps {
   totalPages: number
@@ -121,7 +122,7 @@ export default function ListLayoutWithTags({
           <div>
             <ul>
               {displayPosts.map((post) => {
-                const { path, date, title, summary, tags, viewCount } = post
+                const { path, date, title, summary, tags, viewCount, slug } = post
                 return (
                   <li key={path} className="py-5">
                     <article className="flex flex-col space-y-2">
@@ -136,7 +137,7 @@ export default function ListLayoutWithTags({
                           <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>
                         )}