Designing a Customizable, SEO-Optimized Personal Website With React + Next.JS

Anmol Parande
Aug 9 · 6 min read
Image for post
Image for post

For the past couple of years, my personal website has been hosted on a Heroku free dyno. It was Node.JS with an Express backend and a EJS front-end. It worked well for the most part, but there were several downsides.

  1. After 30 minutes of no use, my dyno would go to sleep, leading to high load times since the server needed to restart
  2. Any content changes required redeploying the site
  3. An Express backend is overkill since its only purpose was to route users to each page

While none of these issues are earth-shattering, it was definitely a sub-optimal setup, particularly since slow loading time is a bad user-experience and results in poor SEO.

Issues 1 and 3 are easily solved by migrating the site to a static hosting solution (i.e get rid of the Node.JS server and serve raw HTML, CSS, and Javascript). Issue 2, however, would require some kind of backend to fix because the site data would have to be hosted somewhere other than my codebase.

At first glance, these seem counter to each other. This is where React comes in.

React.JS

React was particularly appealing because of its component-based approach to development. There are an incredible number of components from the web ready to be imported. It’s also simple to create and style your own components. This makes development time significantly easier since I could import complicated components (like timelines) rather than spend time making them myself. It was also helpful in making sure my design was consistent across the site since all I had to do was reuse the same components.

There is, however, one huge downside to React: SEO.

Search Engines and SEO

During indexing, Google’s bots download your webpage and crawl through the content. They look at the images, links, text, and metadata on the site in order to extract keywords and determine what type of site it is. They use this predict what kinds of queries the site will be relevant to. Site responsiveness (this is where my initial Heroku site was lacking), keywords, in-going and outgoing links are all important parts of the indexing process.

Why is React bad for SEO? Javascript. Bots have a much easier time parsing HTML than they do code. The way React generally works is that a nearly empty HTML file is served to the user along with Javascript and css. The Javascript attaches itself to the DOM and “hydrates” it with the site content. What this means is that in order for indexing bots to parse the webpage, they have to render the Javascript (See how they do it).

This, of course, assumes the bot indexing the page knows how to render Javascript and that the Javascript works with no errors. Not to mention, the time it takes to index (i.e load speed) also negatively impacts the site’s ranking.

The solution to this: compiling the site at build time into HTML, using Javascript for interactivity. That’s where Next.js comes in.

Next.JS

There is one big caveat, however. All of my data is in a database, so if I am pre-rendering the site, all my content will still be added to the site via client-side Javascript, meaning the bots would essentially be indexing an content-less site unless I pulled the data from the database during build time. But of course, pulling data at build time would make the database useless because I would still need to manually rebuild the site each time I made a content change.

Next.JS has a solution for this: incremental static regeneration

Static Rendering, SSR, and Incremental Static Regeneration

Static rendering is when all HTML is generated before the site is deployed. This is what happens when you upload an HTML file to a hosting site or use a framework like Jekyll.

SSR is what my old website on Heroku did. The client would make a request to the server. The server would parse the request, construct the HTML, and return it to the user. Each request regenerated the HTML (disregarding caching).

Incremental Static Regeneration is a mix between the two of these. It’s inspired by the stale-while-revalidate (SWR) caching mechanism. With SWR, a server caches the HTML to send to the client. When the client requests the content, the cached content is delivered. Once the cache reaches its expiry limit and a new request comes in, the server rebuilds the site, still serving the dirty site until the rebuild is complete. When the rebuild finishes, the clean site is put into the cache and is ready to be served to users.

This results in zero-downtime and I can still generate static HTML with site content that automatically updates itself.

Vercel

On Vercel, you can host Next.JS sites entirely for free. On top of this you get SSL encryption, asset compression, cache invalidation, and CDNs to deliver all the static assets for the site. What this does is make the website scalable, fast, and always update-to-date.

The Database

Rather than going for something flexible like Firebase, I decided to use Airtable. Airtable is a powerful spreadsheet alternative. With an intuitive GUI and simple API, it’s the perfect content-management system (CMS). Although its more limiting than Firebase, using Firebase would require either building a GUI or dealing with the Firebase GUI (which is not meant for manually editing the database).

Airtable makes it easy to quickly add and remove content from the site. Its API provides JSON for Next.JS to use while pre-rendering, meaning I could always migrate to a different database in the future. Another huge benefit is Airtable’s rich text field support which allows me to inject and render arbitrary markdown into designated locations and render it as pure HTML. In other words, it fit my requirements perfectly.

Summary

  1. Free hosting with zero down-time
  2. Automatic website updates (except for structural changes or new images)
  3. CDN delivery
  4. An easy-to-use CMS GUI
  5. SEO Optimization
  6. Asset compression, SSL, Scalability, etc

Overall, it was worth the effort. You can check out my site at anmolparande.com to see what the end result looks like. Thanks for reading!

The Startup

Medium's largest active publication, followed by +707K people. Follow to join our community.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store