036 — Pedal to the Metal

Watch the video on YouTube: https://youtu.be/rLRNnlzIOQM

I connected with Vercel this past week to discuss how I could both optimize and try to control the costs that https://www.starterpacks.net was accumulating. I did walk away with some techniques that I will try on the next site I launch on Vercel where I need to try to maintain a consistent bill. Most notably:

• Fluid Compute is good and does reduce function use/chaos
• Controlling the cache key to maintain the cache between deploys (when possible)
• Play with Cache-Control headers to see if it's possible to increase the number of cached edge request hits, and ultimately skip the function rendering for each cached page

So, some good pointers to keep in mind for the next site that takes off on Vercel.

On the client front, it was a busy week, but I was able to play around with writing my own Cache Handler to support the Render deploy of the frontend. I played around with various approaches trying to write a Cache Handler backed by a Redis instance, but ultimately had to back out of that approach since I wasn’t able to fully grasp the life cycle flow for when a cache handler is initialized and abandoned, resulting in either too many Redis connections remaining open and overloading the instance, or clients cleaning themselves up too early and causing errors when get/set methods were called. Instead, I ended up writing a Cache Handler that is using a LRU cache, and it seems to be enough to smooth out the instance, serve things fast, but without all the complexity of the Redis stuff. I might circle back to a Redis-based solution down the road, but the LRU approach seems to be working for now.

After a long week of client work and troubleshooting, I wanted to make progress on something new that I have been putting off for a while, so I sat down on Friday on got the first instance of the open graph images renderer setup and deployed for https://www.opengraphs.com. OpenGraphs is essentially a re-write/re-imagination of a previous service that I wrote and was using  to generate open graph images for my projects, but I have some plans to both optimize and expand that previous services vision, and hopefully customers, which I will be focusing on as I continue to build out the admin portions of the app.

Along with getting the OpenGraphs renderer deployed, I was able to publish an update to the library that I use to handle the open graph data in my NextJS sites. You can check it out here: https://github.com/ryanhefner/next-meta

And, don’t think that I have forgot about https://www.skylounge.social. After getting Starter Packs stabilized and no longer sucking money out of my wallet, and getting the OpenGraphs renderer setup and deployed, I should have the headspace available to wrap up a few of the remaining features on Skylounge and start inviting some early people to host sessions on the site and see how well it either does, or does not, work 🤞 More on that to come... 

To follow along, you can find me at https://www.ryanhefner.com, follow me on Bluesky @ryanhefner.com (https://bsky.app/profile/ryanhefner.com) and keep up with the show on https://www.allplay.fm and @allplay.fm (https://bsky.app/profile/allplay.fm).

Help yourself, while supporting the show, by trying some of the services that I use, and highly recommend:
Transistor FM (https://transistor.fm/?via=allplay)
Fathom Analytics (https://usefathom.com/ref/EKONBS)

#buildinpublic #podcast #startups #webdevelopment  #webdesign #bluesky #indiedev #bootstrapping #indiehackers

Episode Transcript

Ryan (00:15):
Hey. How's it going? I'm Ryan Hefner and this is the All
Play podcast. So it's Saturdaynight and I was just sitting
around trying to figure outwhether I should work on
anything or not and instead, Idecided to pick out this, new
pedal I picked up actually overa year ago that I haven't even

(00:36):
plugged in yet. It's the FenderShields Blender, pedal and it is
pretty cool.
It's been fun to play aroundwith it. And I realized that I
didn't record an episode tonightor this week, so I figured why
not record an episode tonightand catch you up on what I did
this week, what's going on withstarter packs, and some other

(00:59):
stuff. So I ended up having thatcall with Vercel, and it was a
really interesting call. Ithink, I learned a few things
coming out of it, and I havesome stuff that I'll probably
try in the future in the eventthat I post something on Vercel,
and I need to try to kind oflike corral the cost. So couple
things I ended up learningduring that phone call.

(01:20):
One, the fluid compute is realand it does work. They had kind
of like a an extended or like,expanded observability view that
they were kind of walking methrough, going over different
metrics of the site. And he'slike, oh, this looks like
probably like I was like, Iturned on fluid computing. He's

(01:41):
like, he went to this one tab,checked it out, and you could
see like a clear drop off on afunction. I guess, kinda just
like the the sporadicness of it.
As soon as fluid compute was on,it was kind of solid. Maybe
good, maybe bad, but it seemslike from, like, a kind of

(02:02):
chaotic use of of functions andstuff, it seems like it smoothed
it out, which was good. So Ithink it did what it does. It
kinda made it a little bit morefluid and, consistent, which is
probably what you want. As faras, you know, ways that I could
have approached optimizing thesite or whatever, it's kinda
tricky.

(02:24):
I think there's a coupledifferent things I could have
done. One, I probably could haveset my own static cache key. So
there was some every time youredeploy and you're doing ISR,
you're basically blowing awaythe, the cache every time you do
that. And so any pages that youhad in there, basically, are

(02:46):
gonna get rewrote again, sothey're gonna go against your
ISR rights. If I had basicallymanaged my, like, the cache
prefix, I could have controlledthose ISR rights, kept that
cache warm between deploys,assuming that I didn't change
something on the page that Iactually wanted to go out.
So that's the reason why they dothat. They basically probably

(03:08):
peg it to, like, the git hash ofthe, either the commit or the
the merge or whatever when thatgoes out. So that makes sense on
why that it is. I probably couldhave one, reduced the amount of
rights that I was doing bymanaging that and, I don't know,
maybe maybe could have savedsome stuff. The other thing that

(03:30):
was recommended was maybeinstead of doing the ISR, which
obviously kind of spins up itsown whole, like, cost kind of
structure thing and also stilldoes have the get static props
and that all the that thatmethod that gets called for all
those pages that, that have togo in.

(03:50):
Basically, like setting thecache control header so that
way, even if I was using getserver side props, I could have
had that cache control so everyso that page sits out at the
edge for a longer period oftime. Because essentially right
now, every time it goes, it'sit's like really not hitting the
edge. Obviously, if it is ISRed, it would. But, I think it

(04:15):
said in the cache controlhandler or cache control header
would, have maybe helped thatout a little bit. It's a tricky
thing though because there areauthenticated pages on the site,
so you gotta kinda play aroundwith that.
Again, I would probably have toto still do the, you know, the
token check to see if they'reauthenticated and then

(04:37):
basically, like, rehydrate thepage with an authenticated
state, which I already did forthe ISR pages. But, you know, I
don't know. It opens up its ownwhole can of worms. So the site
is still on render. It was agreat conversation with Vercel.
I have at least now an open lineof communication with them in

(04:57):
the event that I wanna tryanything else out in the future
on future sites or if I wannaexplore ways of, like, migrating
starter packs back. But so far,the site seems to be doing well
over on a render right now.Regarding that, I did play
around with writing my own cachehandler that was using Redis and

(05:18):
some other stuff. I just wasn'treally able to, really, like,
control the I don't know. Justthe the life cycle of when it
would make a connection.
I kinda made this ephemeralRedis client where essentially

(05:38):
after a certain period of time,it would try to, like,
disconnect and close itself outin the event that it wasn't
used, and then it would try to,like, bring itself back or
extend its life when, get orset, methods were called on it.
It just kinda got a little bitwild. It didn't see it seemed
like it bugged out the Redisinstance, and, it seemed like it

(06:01):
was kinda turning into moretrouble than it was worth. I did
end up actually implementing acustom cache handler, but it's
using an LRU cache, and it seemslike it's kinda doing the trick.
It seems like it kind ofsmoothed out some of the the
inconsistencies or thesporadicness of the, CPU and
memory on the render box thatit's currently running on.

(06:25):
And, I think it kind of createda little bit of buffer so that
that box has a little bit ofheadroom. So I was able to drop
the retice instance, which was$10 a month. So I and then I
even toyed around with, droppingit down to the $25 a month box
over on render. It was kindaholding up the site, but the

(06:45):
problem is I think it would getthese kind of bursts in traffic
and bursts in memory and CPUuse, and it would kinda make the
box unstable. And theneventually, it would do that a
certain number of times, andthen it would kinda, like, trip
up.
And so I just bumped it back upto the $85 a month plan. It
seems like it has the headroomthat it needs to stay up and

(07:09):
stay live and it's fast andperformant and it's gonna do the
job. And at least I know thatit's just the locked in $85 a
month right now, and I don'treally see traffic going higher.
If anything, I just I need towork on ways to get people to
connect and use the site more.So I have some ideas of some

(07:29):
stuff I'm gonna do both to thehomepage as well as, writing up
some other stuff to make it moreapparent that you can kinda like
make a, you know, a starter packreal quick or quickly add
someone to an existing starterpack and those kind of things as
well as, see the packs that, youappear in and stuff.

(07:50):
So some ideas for that, but atleast things seem to be
stabilized. It was kind of aheavy client week, so, I didn't,
you know, between talking withHercel and just kind of like
playing around with some stuffon starter packs, I didn't
really get a whole lot done onSky Lounge and, on that front.

(08:11):
But I am looking for, you know,trying to get back to that
because I think I do haveeverything to a stage where I
can at least start doing someearly testing and maybe do some
early sessions, with peopleusing the, you know, the WebRTC
and sockets and stuff, to havesome audio conversations on the
site and just see what stuff Ididn't account for. But just a

(08:37):
few little odds and ends that Ineed to do there and basically
kinda get to get a properhomepage together right now. The
one kinda looks like a a showflyer, but we'll see how it
goes.
The one thing I did end up doingbecause I was just kinda like
getting a little bit I don'tknow if it's like burnout or
whatever, but, you know, I waslike really heavy on client

(08:58):
stuff all week, dealing with thestarter pack stuff. I just
wanted to get something kind oflike up that I've been meaning
to get up for a while, and thatis actually the instance of the
opengraphs.com. Soopengraphs.com is, like an
OpenGraph image generatorservice plus. Basically, it's a

(09:23):
re a refactor rewrite of anexisting service that I was
using that, was called LinkCard. So linkcards.io, which
actually just forward you overto opengraphs.com right now.
But it was a service that I wasusing for my sites to
dynamically generate OpenGraphimages. OpenGraphs is gonna be a
little bit broader than that. Itwill do the the image

(09:44):
generation, but I have someplans on how I can kind of,
like, inspect and manage andcontrol a little bit more than
just the just the imagesthemselves. But, again, that's
to to be determined as I'mkinda, like, building out the
app and some of the other stuff.But I did end up getting a early
version of the renderer up thatI could use to start just like

(10:08):
basically like troubleshootingor not troubleshooting, but
testing the performance of someof my assumptions around that.
So I actually got that spun up,got it deployed, have two sites
using it. So I'm using it on mypersonal site, ryanhoeffner.com,
as well as allplay.fm. And so,you know, I'm gonna be

(10:28):
publishing some more pages tothose sites and kind of tweaking
around the images, that arerendered for those. And it seems
like it's working well. It'ssuper bare bones right now.
It's basically just kinda doingsome some really generic stuff.
There will be, you know, moreadvanced kind of like caching

(10:49):
and dynamic serving of differentthings. But, for now, at least
it's up and running and doingthe job basically of what the
previous one is doing with butjust no admin controls right
now. So gonna get start workingon the app and get that up, but
it feels good to just get thatout. I also ended up pushing out

(11:09):
a update to a open sourcepackage that I have, which is
called Next dash Meta, which isessentially the way that I
compose all my, OpenGraph datainto my Next.
Js, projects. So I got a littlebump on that because there were
some tweaks that I had made thatI wanted to roll into this, And
so that's out and that's feelinggood. And yeah. And basically,

(11:36):
just trying to regroup. It feltlike a scattered week.
I feel like this is a scattered,podcast episode. But, you know,
that's kinda what happenssometimes. You get a little
scattered. I'm gonna try to geta little bit more zeroed in this
coming week on some stuff. SoI'm feeling good with having
that initial opengraphs.comrenderer up.

(11:59):
Gonna obviously publish thisepisode, share it around. We'll
see how those images are being,pulled in and served, in the
various, you know, platforms andsites and everything. And, it'll
be a good little test on theOpen Graphs front, and I will be

(12:23):
working on getting that initialbeta of Sky Lounge out and also
integrating Open Graphs intothat site as well. So I think
it'll be fun. It's kind of, youknow, it's like a tool for a
tool for a tool and hopefully Ican also, get it to where this
starts making some money and, Ican still keep using it and

(12:43):
other people can too because Ido think it's valuable, and
simplify some stuff even though,obviously, it still does take
time to build.
But, yeah, I'm rambling on. It'sI'm over on what I thought was
gonna be a relatively short,video. So gonna leave it there
and I'll play out, I guess.Alright. Have a great one.

(13:20):
Later.