Our great sponsors
-
Prisma
Next-generation ORM for Node.js & TypeScript | PostgreSQL, MySQL, MariaDB, SQL Server, SQLite, MongoDB and CockroachDB
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
Plausible Analytics
Simple, open source, lightweight (< 1 KB) and privacy-friendly web analytics alternative to Google Analytics.
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
Usually, these kinds of view counters involve some kind of database-API setup. Hence, I thought of multiple possibilities such as PlanetScale, Upstash or even a more custom approach with Prisma and some kind of self-hosted database. I do have an own VPS running in Germany, which currently only homes my self-hosted Plausible Analytics instance.
In the component, we're fetching the data with the useSWR hook. We can determine if there's no data and no error either that the request ist still pending. In that case, we want to display a loading state. I put together a small component with a skeleton-like loading animation using Tailwind CSS.
All right, let's create a component to display our data and use the revalidation features of swr. You can read more about the usage of SWR ontheir documentation website. We're going to use the basic useSWR hook and target our API route. We provide the slug of interest via a property.
Usually, these kinds of view counters involve some kind of database-API setup. Hence, I thought of multiple possibilities such as PlanetScale, Upstash or even a more custom approach with Prisma and some kind of self-hosted database. I do have an own VPS running in Germany, which currently only homes my self-hosted Plausible Analytics instance.
Whilst rebuilding my personal homepage, I wanted to implement a simple view counter for my posts. I've seen this a few times on popular blogs (e.g. Lee Robinson) and thought it would be a nice thing to build.