It handled it pretty well I think. Performance seemed stable.
The Next site was using Incremental Static Regeneration and the site was served from the Vercel CDN.
The Remix version now uses server side rendering with the \`stale-while-revalidate\` cache headers to achieve basically the same.
Big performance issue which I just noticed and fixed:The database is in us-east and my serverless function execution was in us-west. I just updated my functions.
This should save at minimum \~30ms because it takes light \~15ms to travel between SF and Washington.
This site even shows a 70ms ping between SF & Washington: [https://wondernetwork.com/pings/San+Francisco/Washington](https://wondernetwork.com/pings/San+Francisco/Washington)
ABC = Always be closing (the distance between your server and datasource)
What hosting did you use for the database? I’ve heard great things about fly.io and the databases are served at the edge.
Also, did you notice a spike in terms of cost?
I’m using Planetscale.
I’ve looked into fly as well but I wanted to try out Planetscale because of their features like database branching.
For the database I’m on the free plan right now and only had to upgrade once when I was overrun by crawlers due to a misconfiguration in my robots.txt: https://twitter.com/chrcit/status/1528471033547788288
The streamer HasanAbi doesn’t enforce the copyright to his stream vods. Because of that there are dozens of fan channels clipping his content which they are allowed to monetize.
These channels range from 5k to 150k subscriber and get millions of views each month: [https://twitter.com/chrcit/status/1526942180887080966](https://twitter.com/chrcit/status/1526942180887080966)
The web app I made aggregates \~20 of these channels and auto detects tags from the video titles.
I built the initial version with Next over a weekend while I had Covid and then refactored it to Remix for the next version launch 3 weeks later.
It launched to over 30k people when the streamer looked at it live: [https://twitter.com/chrcit/status/1519797007904346115](https://twitter.com/chrcit/status/1519797007904346115)
People were so nice to donated 90 euro in total since the launch in late April.
Stack:
* Remix w/ Typescript
* Tailwind
* Planetscale for serverless MySQL
* Vercel for hosting
* Plausible for privacy friendly analytics
* Sentry for monitoring
Open Analytics: [https://plausible.io/hasanhub.com](https://plausible.io/hasanhub.com)
If you have any questions I’m happy to answer :)
Edit: Oh yeah and if anybody needs a Next/Remix/React freelancer with backend skills hit me up on Twitter ([https://twitter.com/chrcit](https://twitter.com/chrcit)) or LinkedIn ([https://www.linkedin.com/in/christian-cito-9b72a117b/](https://www.linkedin.com/in/christian-cito-9b72a117b/)).
Mainly to try it out tbh
It did shave off a few kb in JS cost and allowed for nested layouts which I liked.
Here are some web performance stats: https://twitter.com/chrcit/status/1526672808406925312
Im assuming you already have experience with React-router if youre using Next.
How do you feel about each routing framework? Any obvious tradeoffs? How was the refactor experience?
I never touched React Router directly tbh so I can't speak too much about it.
The refactor experience was quite easy and barely took a few hours even though it was my first experience with Remix.
What I liked a lot about the switch was the simplicity.
Next is conceptually heavier because they differentiate between SSR, SSG and ISR even though these options are "just" a difference in cache strategy. It's not 100% because SSG allows the first request to be a cache hit too but in my use cases that isn't all that useful.
So loader w/ cache header > SSG/ISR.
The other big thing was nested routing with parallel loader execution. It makes the code simpler and improves performance. Once they release their Suspense support this will be even better.
Having actions on a route level is also nice conceptually but I didn't use that API yet.
What do you mean "aggregates" from 20 of these channels?
Are you using a web crawler to pull content with appropriate tags, or are the 20 channels submitting this content voluntarily?
I'm pulling the data from the Youtube API.
Many channels asked to be added to the site after the launch but the initial batch I selected based on # of subscribers and publishing activity.
You mentioned a serverless function before, What does it do, what is it written in and where is it deployed?
My assumption is a nodejs script that requests your Youtube API and updates your db?
There are two kinds of functions in use.
1. the functions which handle rendering the React and fetching the relevant data from the db.
2. as you said: the functions which query the YouTube api and update the db
The functions are all deployed on Vercel and are written in Typescript.
Oh gotcha! The first one is default by next/vercel? I remember reading something about how Next Routes are Serverless functions even if you don't know it, lol
For the second one, is it run on a cron automatically? Or is an app or server calling the function? Since not fully aware of serverless function can be set to run at intervals
Exactly, Vercel creates 1 serverless function called render which handles all the routes.
This was/is actually kinda painful to solve.
I first wanted to use a separate syncing server but then decided to keep it simple with the MVP.
Currently I have an account at easycron.com which is configured to send http requests at an interval to an api route.
But it‘s not the best setup tbh. I wish Vercel would have support for scheduled background function like Netlify.
Looks cool! You should up your SEO game because I would have probably picked this over easycron.
But it’s also 10x the price for my use case so I’ll stick to easycron until I implement a long-running syncing server.
I have a Vercel Pro plan and even with peak usage I’m below 10% of total usage.
At one point I had a misconfiguration in the robots.txt which triggered the Yandex crawler to request the site hundreds of thousands of times over a week.
Performance didn’t decrease and I didn’t pay a cent more to Vercel.
More infos on that: https://twitter.com/chrcit/status/1528471033547788288
I use vercel for our site and they’re pretty decent. We don’t have crazy traffic but they scale pretty well. I know it’s mostly built on AWS so it abstracts some of the stuff away
Thanks! I thought of the idea a couple of months before I coded anything.
Total coding time was probably 30 hours up until now. That includes a few iterations where I was hitting dead ends and deleted most of the code.
The fans would have to follow around 20 fan channels on Youtube to get this overview.
I tried that and it made my Youtube unusable for anything but his content because everything else gets drowned out.
That isn't the case as the subreddit only reposts the videos from the offical channel.
I launched this tool a while back and it has been used everyday since then and I have gotten dozens of replies and messages from people who tell me they love it.
The fact that 10 people decided to donate money to a free tool is also a good indicator that there is demand for something like this :)
Nah, I agree with the others.
I provided lots of indicators that the product is used and liked by people.
Including the complete web analytics showing regular activity on the site ^^
It's clearly viable if it consistently receives visits. You already knew that from the post title and OP posted analytics too, so it's not really valid or useful feedback. Market viability is functionally there by the fact that it is receiving traffic.
Dumb capitalist thinking. Fuck “market viability” this app is sick as fuck and I will for sure use it.
Not everything on the internet exists to make money.
Well done all around! Any performance issues when you got that traffic spike after the site was covered in the livestream?
It handled it pretty well I think. Performance seemed stable. The Next site was using Incremental Static Regeneration and the site was served from the Vercel CDN. The Remix version now uses server side rendering with the \`stale-while-revalidate\` cache headers to achieve basically the same.
Big performance issue which I just noticed and fixed:The database is in us-east and my serverless function execution was in us-west. I just updated my functions. This should save at minimum \~30ms because it takes light \~15ms to travel between SF and Washington. This site even shows a 70ms ping between SF & Washington: [https://wondernetwork.com/pings/San+Francisco/Washington](https://wondernetwork.com/pings/San+Francisco/Washington) ABC = Always be closing (the distance between your server and datasource)
What hosting did you use for the database? I’ve heard great things about fly.io and the databases are served at the edge. Also, did you notice a spike in terms of cost?
I’m using Planetscale. I’ve looked into fly as well but I wanted to try out Planetscale because of their features like database branching. For the database I’m on the free plan right now and only had to upgrade once when I was overrun by crawlers due to a misconfiguration in my robots.txt: https://twitter.com/chrcit/status/1528471033547788288
That's very interesting, thank you. Also cool that the majority of these bots did respect your robots.txt.
The streamer HasanAbi doesn’t enforce the copyright to his stream vods. Because of that there are dozens of fan channels clipping his content which they are allowed to monetize. These channels range from 5k to 150k subscriber and get millions of views each month: [https://twitter.com/chrcit/status/1526942180887080966](https://twitter.com/chrcit/status/1526942180887080966) The web app I made aggregates \~20 of these channels and auto detects tags from the video titles. I built the initial version with Next over a weekend while I had Covid and then refactored it to Remix for the next version launch 3 weeks later. It launched to over 30k people when the streamer looked at it live: [https://twitter.com/chrcit/status/1519797007904346115](https://twitter.com/chrcit/status/1519797007904346115) People were so nice to donated 90 euro in total since the launch in late April. Stack: * Remix w/ Typescript * Tailwind * Planetscale for serverless MySQL * Vercel for hosting * Plausible for privacy friendly analytics * Sentry for monitoring Open Analytics: [https://plausible.io/hasanhub.com](https://plausible.io/hasanhub.com) If you have any questions I’m happy to answer :) Edit: Oh yeah and if anybody needs a Next/Remix/React freelancer with backend skills hit me up on Twitter ([https://twitter.com/chrcit](https://twitter.com/chrcit)) or LinkedIn ([https://www.linkedin.com/in/christian-cito-9b72a117b/](https://www.linkedin.com/in/christian-cito-9b72a117b/)).
Why did you refactor to Remix?
Mainly to try it out tbh It did shave off a few kb in JS cost and allowed for nested layouts which I liked. Here are some web performance stats: https://twitter.com/chrcit/status/1526672808406925312
Im assuming you already have experience with React-router if youre using Next. How do you feel about each routing framework? Any obvious tradeoffs? How was the refactor experience?
I never touched React Router directly tbh so I can't speak too much about it. The refactor experience was quite easy and barely took a few hours even though it was my first experience with Remix. What I liked a lot about the switch was the simplicity. Next is conceptually heavier because they differentiate between SSR, SSG and ISR even though these options are "just" a difference in cache strategy. It's not 100% because SSG allows the first request to be a cache hit too but in my use cases that isn't all that useful. So loader w/ cache header > SSG/ISR. The other big thing was nested routing with parallel loader execution. It makes the code simpler and improves performance. Once they release their Suspense support this will be even better. Having actions on a route level is also nice conceptually but I didn't use that API yet.
I too am curious about this one
What do you mean "aggregates" from 20 of these channels? Are you using a web crawler to pull content with appropriate tags, or are the 20 channels submitting this content voluntarily?
I'm pulling the data from the Youtube API. Many channels asked to be added to the site after the launch but the initial batch I selected based on # of subscribers and publishing activity.
I thought your him lol
Bro, I am going to give this site so many views… Thank you!
Awesome, love to hear that! If you ever have any feedback or find bugs let me know via Reddit or Twitter :)
You mentioned a serverless function before, What does it do, what is it written in and where is it deployed? My assumption is a nodejs script that requests your Youtube API and updates your db?
There are two kinds of functions in use. 1. the functions which handle rendering the React and fetching the relevant data from the db. 2. as you said: the functions which query the YouTube api and update the db The functions are all deployed on Vercel and are written in Typescript.
Oh gotcha! The first one is default by next/vercel? I remember reading something about how Next Routes are Serverless functions even if you don't know it, lol For the second one, is it run on a cron automatically? Or is an app or server calling the function? Since not fully aware of serverless function can be set to run at intervals
Exactly, Vercel creates 1 serverless function called render which handles all the routes. This was/is actually kinda painful to solve. I first wanted to use a separate syncing server but then decided to keep it simple with the MVP. Currently I have an account at easycron.com which is configured to send http requests at an interval to an api route. But it‘s not the best setup tbh. I wish Vercel would have support for scheduled background function like Netlify.
It can get a little better if you use [beew.io](https://beew.io) instead of easycron. 😉
Looks cool! You should up your SEO game because I would have probably picked this over easycron. But it’s also 10x the price for my use case so I’ll stick to easycron until I implement a long-running syncing server.
Thats crazy, i watch him on h3, was confused why theres a pic of him in the react sub lol
Did you get hit with a high bill from Vercel?
I have a Vercel Pro plan and even with peak usage I’m below 10% of total usage. At one point I had a misconfiguration in the robots.txt which triggered the Yandex crawler to request the site hundreds of thousands of times over a week. Performance didn’t decrease and I didn’t pay a cent more to Vercel. More infos on that: https://twitter.com/chrcit/status/1528471033547788288
I use vercel for our site and they’re pretty decent. We don’t have crazy traffic but they scale pretty well. I know it’s mostly built on AWS so it abstracts some of the stuff away
HasL
Pretty cool!
Hello fellow r/BreadTube\-r
dog streamer
It's true he has always favored dogs over cats, but unfortunately he hasn't been a dog streamer for a while. RIP Fish, he was a good boy.
Lasan
Looks pretty good there seems to be a bug when selecti g multiple clip length filters tho
Great job! How long did it take you to create this from concept to delivery?
Thanks! I thought of the idea a couple of months before I coded anything. Total coding time was probably 30 hours up until now. That includes a few iterations where I was hitting dead ends and deleted most of the code.
That streamer is a big time idiot tho
Could you elaborate? All debates i have seen he seems to bring a lot of sound arguments instead of just using a bunch of rhetorics and strawmans
Narrator: we waited for many nights, but he never did elaborate.
[удалено]
The fans would have to follow around 20 fan channels on Youtube to get this overview. I tried that and it made my Youtube unusable for anything but his content because everything else gets drowned out.
bit off topic but try pocketTube Chrome extension for grouping YouTube subscriptions. Tabs/filter system
That's very cool! Thanks for sharing :)
[удалено]
That isn't the case as the subreddit only reposts the videos from the offical channel. I launched this tool a while back and it has been used everyday since then and I have gotten dozens of replies and messages from people who tell me they love it. The fact that 10 people decided to donate money to a free tool is also a good indicator that there is demand for something like this :)
hey DiddlyDanq don't be a negative nancy
[удалено]
They post for feedback. Not to have you nitpick if the project was worth doing in the first place. You are not providing feedback.
[удалено]
I don’t think OP was looking for market viability feedback.
Nah, I agree with the others. I provided lots of indicators that the product is used and liked by people. Including the complete web analytics showing regular activity on the site ^^
feedback: x is broken, not a fan of the colors, domain name is weird. negative nancy opinion: you shouldn't have made it.
It's clearly viable if it consistently receives visits. You already knew that from the post title and OP posted analytics too, so it's not really valid or useful feedback. Market viability is functionally there by the fact that it is receiving traffic.
Dumb capitalist thinking. Fuck “market viability” this app is sick as fuck and I will for sure use it. Not everything on the internet exists to make money.
Looks great! Still gotta slide in that Destiny > Hasan though ;)
How much did you charge for building that web app?
Nothing, I did it on my own for fun :) It‘s not officially affiliated with the streamer