How to count page views ?
Unanswered
Podenco Canario posted this in #help-forum
Podenco CanarioOP
Hi,
I'm looking for a way to count page view but I'm struggling with the strict react mode.
Right now I'm doing a increment in a useEffect when my page load, but as react strict mode does always 2 renders I get a +2 instead of a +1.
How do you guys handle that ?
I'm looking for a way to count page view but I'm struggling with the strict react mode.
Right now I'm doing a increment in a useEffect when my page load, but as react strict mode does always 2 renders I get a +2 instead of a +1.
How do you guys handle that ?
26 Replies
@Podenco Canario Hi,
I'm looking for a way to count page view but I'm struggling with the strict react mode.
Right now I'm doing a increment in a useEffect when my page load, but as react strict mode does always 2 renders I get a +2 instead of a +1.
How do you guys handle that ?
In dev its just going to be that way, prod doesnt render twice?
Podenco CanarioOP
Prod does render twice 🥴
I could have done something wrong here
sec lemme look
How are you storing the page visit counter? a db?
Podenco CanarioOP
Yeah, using supabase
Gotcha, one sec lemme setup something in my test workspace
using
npm run build
npm run start
Your useEffect is triggering twice?
npm run start
Your useEffect is triggering twice?
Podenco CanarioOP
trying it
only one test for me unless im in dev
Podenco CanarioOP
Yup still got two 🤔
Can you show me your useEffect?
Is this a client component your loading into a server component or is the entire page 'use client'?
Podenco CanarioOP
Actually it might not be a useEffect, I forgot I changed that for test purposes actually I'm using it like this :
const getBuild = async (uuid: string) => {
const { data, error } = await supabase
.from('Build')
.select()
.eq('uuid', uuid)
.single()
if (error) throw new Error(error.message)
await supabase.rpc('increment_views', { row_id: uuid })
return data
}
...
export default async function SingleBuild({ params } : { params: { uuid: string } }) {
const build = await getBuild(params.uuid)
const user = await getUser()
return <PageSingleBuild build={build} user={user} />
}I wanted to get all the dynamic logic outside my client component, but maybe I should reverse it ?
Ill take a look after this meeting, I was doing it as a client component. just a few mins
well 30ish minutes
Podenco CanarioOP
Thx
Podenco CanarioOP
Well I moved the logic to a useEffect and it works like a charm.
I don't know why but it seems that outside a useEffect my page is always called twice. Not sure if this is normal or anything 🤔
I don't know why but it seems that outside a useEffect my page is always called twice. Not sure if this is normal or anything 🤔
Im not 100% sure but UseEffect is probably the way to do here.
Podenco CanarioOP
I had to create a dedicated API Route to handle it properly thou, but "if it ain't broke, don't fix it", right ?
You could just use a serverAction instead of an API route!
I obviously dont have a db locally to plug into but you can do it this way, you can even add arguments for the increment count so it increments the proper count.