Powerful and superfast Hashnode Blogs, now powered by Next.js 11 and Vercel ๐Ÿš€

Powerful and superfast Hashnode Blogs, now powered by Next.js 11 and Vercel ๐Ÿš€

Hashnode blogs are now powered by Vercel


7 min read

Featured on Hashnode

Today, we are excited to announce that we have migrated our blogging platform to Vercel. As a result, Hashnode-powered blogs are now going to benefit from Vercel's robust and fast edge network. We have already been using Next.js for quite some time, and are big fans of it. Vercel provides first-class support for both static and dynamic Next.js sites, and serves content from a blazing fast CDN. So, all of our blogs are now automatically optimized for speed, and SEO. In this blog post, I am going to share some of the key highlights, and the impact of this huge upgrade.

Before we move further, can you check the following video, and guess if it's localhost or a live website? ๐Ÿค”

The beginning ๐ŸŽฌ

Before Vercel, we used to run our own infrastructure using AWS/DigitalOcean. We used a combination of Caddy and Amazon Route53 to generate, and manage SSL certs for our custom domains. We had automated the process, and it was smooth to a great extent. But we would occasionally run into bugs, and edge cases - not to mention we had to monitor and manage the infrastructure ourselves. Although our solution was working, we were always on the lookout for a better solution. In Feb, Guillermo Rauch suggested that we consider Vercel, and offered to help. To be honest, the decision was a no-brainer. After a few days, we started exploring, and worked with Vercel's support team to evaluate the feasibility. After we were sure, we decided to migrate our platform in 2 phases:

  • Migrate the blogging infra
  • Migrate Hashnode community web app next

We started working on the migration on 1st May, and I am glad to announce that we've completed the first phase of the migration, and upgraded most of our users to the new platform. ๐Ÿ™Œ

A detailed technical article is on the way. But let me highlight a few of my favorite updates from this migration.

SSR + stale-while-revalidate = โค

Vercel supports a recent extension to Cache-Control header called stale-while-revalidate. When you send this header, Vercel always serves the content from their CDN cache, while simultaneously updating the cache with latest response from the origin. Here's how it looks like:

res.setHeader('Cache-Control', 's-maxage=1, stale-while-revalidate');

The above header tells Vercel that the cached response is valid for max 1s. After that, Vercel will update the cache with fresh content in the background. As a result, when you start a blog using Hashnode, it's guaranteed to be fast, and efficient. After the initial load, your content is cached on Vercel's edge network, resulting in a really low TTFB value (< 100ms). This not only delights your readers, but also helps your blog rank higher in Google search.

When we deploy an update, Vercel automatically clears your CDN cache, making sure your readers always see the most up-to-date version of your blog.

Real Experience Score

Screenshot 2021-07-26 at 3.54.25 PM.png

Vercel has built-in Analytics, and helps us optimize the page speed by indicating a "Real Experience Score". We can also check a detailed breakdown by pages, and notice any patterns leading to increase or decrease in score.

Screenshot 2021-07-26 at 3.58.16 PM.png

We have always been super focused on speed, and performance. This will definitely help us monitor, and optimize the speed.

Lighthouse Improvements

With this new update, we have rebuilt blogs from scratch to make sure it's optimized for speed. We constantly run lighthouse tests to get more insights into core web vitals, and page speed. I am proud to announce that every Hashnode powered blog gets a score of ๐Ÿ’ฏ in lighthouse analysis.

We also keep track of our core web vitals provided by Vercel:

Screenshot 2021-07-26 at 4.07.28 PM.png

We still have some work to do to further optimize our performance on mobile devices. Considering we are a small team, and are operating with limited resources, we are really proud of what we have achieved in the last 60 days. A huge shout-out to our engineers ๐Ÿ™Œ for pulling this off fast.

Automatic Image Optimization

Next.js already defers image loading through intersection observer. Next 11 goes a step further, and supports automatic size detection and blur-up placeholders, which results in even more delightful reading experience. Additionally, Vercel automatically takes care of resizing images, which further improves the performance. So, this update has a lot to offer when it comes to image optimization.

Manage Custom Domains at Scale ๐ŸŒ

We have thousands of custom domains mapped to us. We need to serve them over HTTPS, and keep renewing the certs every 90 days. With this migration, we can safely delete our existing infra, and let Vercel upkeep the burden. We'll stand on the shoulders of a giant who has been doing this at scale.

We are also using Vercel's API to manage these domains, which means we have more control over SSL issuance now. Whenever you add a new domain, we continuously scan the DNS records in the background, and issue a cert when DNS changes take effect.

Screenshot 2021-07-26 at 5.29.44 PM.png

Vercel offers Anycast IP, which has minimal latency. As per their docs, it makes web pages load 6x faster (depending on location, ISP and DNS involved). Before migrating to Vercel, we used to offer a CNAME record for mapping custom domains. But those who wanted to point their apex domain to us, used to map an A record (which lacked edge caching) because not all DNS providers support CNAME flattening. After the migration, we are able to confidently support all types of domains, and offer edge caching to all of our users because of Vercel's Anycast IP range.

We are also getting enterprise ready with this migration, and are better prepared to offer SLA, and DDoS protection to businesses who will be using Hashnode in the future.

Optimized Styling ๐ŸŽจ

We have completely revamped the way we use styles for Hashnode blogs. We are now using Tailwind + Emotion + twin.macro, which helps us use tailwind classes inside our React components without maintaining a global stylesheet. As a result, the critical CSS is inlined, and there is no external stylesheet to load while rendering your pages ๐Ÿคฏ

Improved DX

I really love the DX provided by Next.js. If you deploy it to Vercel, you are in for a treat. Here are a few things I really love about the experience offered by Vercel + Next.js combo:

  • Ability to replicate the edge network on localhost. This is very important to us because we can completely replicate production environment locally.

  • Ability to preview before shipping to prod. This helps our engineers, and PM to test changes in a real environment that closely resembles prod. Without it, we have to invest a lot of time to configure, and manage our staging environment.

  • Webpack 5 is enabled by default, which brings a lot of performance benefits, and introduces a ton of new features and optimizations.

  • Ability to map custom domain to preview environment.

  • Set env variables to prod, preview, and development easily.

The list goes on. ๐Ÿ˜€ All in all, the ability to mimic prod setup on dev, and preview modes is the biggest advantage here.

We have shipped many more changes in this update. But the above ones are the biggest, and are my favourite. โœŒ๏ธ

With Vercel, we are going to spend less time managing the infra, and more time delivering value to our users. We have made a tons of improvements to the way we write code, test, and ship to production. A detailed article with more technical details is being authored by our engineering team.

As always, let us know what you think in the comments below!

If you have been using CNAME record (hashnode.network) to point to Hashnode, you have been migrated automatically - Congrats! If you are using A record, you need update its value in order to upgrade. We have sent an email with update instructions to all of our users who are using A record to map their domains. Alternatively, you can visit your blog to check out the instructions. If you have questions, come chat with us on our discord server.