Home Icon
LinkedIn logo
GitHub logo
Profile Picture
ERICWHITEFIELD
front-end developer

This blog is an SEO friendly Single Page Application

I built this site using Next.js to take advantage of Server Side Rendering for SEO

Since I'm a developer I decided to build my own blog site from scratch. I chalenged myself to keep it super lightweight without compromising on any features I really wanted.

The main stack:

  • Next.js
  • React.js (as part of Next.js)
  • react-markdown
  • marked
  • next-seo
  • react-highlight

I use Markdown to create articles which keeps things simple

The goal was not to create a full blown online editor for a CMS. I already have convenient tools for writing in Markdown and pushing files to servers. I also like the idea of having my articles in plain text files. Keeping with agile methods I don't need a database for handling massive records when I only need to store articles written by me. Besides, files lend themselves easily to the current trend of serverless deployments, CDNs, source control, free online file backup. Basically there's just already a lot of ways to handle files.

The fun part

Building in React is so satisfying because so many cool things can be done quickly and reliably. If you navigate between the home page and blog posts on this site you'll see the header is animated. This is possible due to ReactJS updating only the parts of the page that need chaning. Forward and back buttons still work, and any URL can be hit directly from an exernal link.

Can't have a blog without SEO - time for SSR

As a developer I just can't call it a blog if it fails in the SEO department. Even though it would be easy to say that Google now indexes javascript loaded content so we don't need server side rendering. Generally the first 6 seconds of loaded content should be indexed. However, the serious SEO experts are still recommending that SEO content and tags be rendered server side. Facebook doesn't load javascript to consume the Open Graph tags, so that's a deal killer right there in my opinion.

The meta tags for blog posts need to be dynamic because I wanted everything to come from the Markdown files that contain my posts. So I implemented Next.js to create an isomorphic/universal website. This way I get the best of both worlds. Server side rendered content for SEO, with the benefits of an SPA on the client side.

Things I learned

  • It's hard to handle SSR without code changes. SSR can be seen as extending the React.js component lifecycle to include the server side render. This naturally introduces complications.

  • Next.js does a good job of solving these SSR proplems. However, I did have to work around some weird behavior and the documentation is too simple for even the most basic real use case.

  • There's more to the world of Markdown than I initially realized. Thanks to GitHub for GFM - GitHub Flavored Markdown.