Beri.Media

Hi! I’m Felix. And this is my love story with software.

More about me: Coding wasn’t on my map for a long time. Yes, I was into Lego mindstorms as a kid and if I now think about it, maybe coding wasn’t that of a foreign topic for me. At least I was part of the robotics team for 2 years. But I was never the guy that geeked out completely and ran the entire School IT on his behalf. That changed about 2 years ago.

Why do you write this blog?

1. As a now tech guy I want to improve in a completely different field - story telling.
2. I want to put myself out there. Don’t be shy and see what comes from that.
3. I talk way too much about software with my friends and girlfriend. So I’ll let it all out here.
4. Maybe that’s kind of a diary.

Anyways…

… I wanted to post my first blog article here, but it did not show up on the production page. To fix that, BuySmarter.online needed to go on hold this weekend and I dove down a new rabbit hole. Object Storage & Revalidation.

How did you get there?

My portfolio page basically works like this:

I rent a server at Hetzner and installed coolify on it to facilitate the maintenance of my self hosted services. One of these self hosted services is my next.js website project including the payloadcms. Next to that there is a mongoDB running that serves payloadcms as a database. So every blog articles heading, for example, is stored as a database entry. But images are not stored in a database. but I had to acknowledge, that images are stored on the SSD of the rented server. Similar as if you save an image on your laptop in a folder. “Locally” so to say. I wanted that because I do not need to pay extra for this storage. It’s included in my hetzner fee. Event though I know one can make better use of SSD storage than to store files there that don’t need to be accessed a lot. Don’t ask me what!

The problem now is, that this local storage apparently does not survive a rebuild of my website. Which always happens if I introduce fixes, changes, etc by running

npm run build

That’s why suddenly all images of my blog were missing. They simply got deleted. That meant no way around S3 storage, which will cost some extra money now. I'll update you how much.

What is object storage?

I can only explain what I know and I know little so far about object storage. BUT obviously there are different provider that offer this kind of storage and they have different technologies to do so. The most famous kind is S3 storage from AWS (Amazon Web Services). Since I cannot fully grasp and therefore compare the pricing structure of all those providers I simply opted for AWS.

💡 There comes an idea to my mind: one should build a page to compare normalized prices of those cloud providers

And AWSs services are enormous. No surprise that the biggest apps and websites rely on them. So it took me quite some time to find my corner of S3 storage in their ugly UI, create the right access rights and implement them with payloadcms. But now when uploading a new article files will be stored in my S3 storage and also fetched from there and everything else remains in my mongoDB database. I am a little proud that I now touched this part of web development as well.

But that did not fix everything

Now my images stay there on rebuild. But still, new articles are not shown. And that was due to static side generation (SSG).

In a nutshell, next.js fetches the data from the mongoDB and S3 storage once on build. So everytime I push a new feature or something to my main branch in the GitHub repo. But if I post a new article the website is not rebuild. I needed to implement a kind of revalidation, for which I had a few options:

• revalidating in a time interval (let’s say every minute)
• revalidation on demand

Due to less load for the server and since my content does not change that often, I opted for revalidation on demand. That means that everytime I post a new blog, my page revalidates the data. Acknowleding, that there is a new blog article and fetching the new data, istead of just doing this every 15min or something and in that way causing unneccessary load on my server. This is the page I referred to: https://nextjs.org/docs/app/guides/incremental-static-regeneration

Other Buzzwords one can search is:

• ISR (Incremental Static Regeneration)
• SSR (Server Side Rendering)
• SSG (Static Side Generation)

See you next week! ✌🏽

Disclaimer: This blog is not AI polished. Not even corrected with ChatGPT. Raw from my techie brain trying to be artsy.