Modern tech stack for blog in 2021 [Jamstack, Next.js & Notion CMS]

February 05, 2021

My next task will be to do research on the technological stack, which I will use in creating my blog. This is an important task because it will have a direct impact on other things in the backlog that I will have to do in the near future. The choice of the solution will have an effect on how fast I will be able to add posts, how fast the page will load on the user's device, or how much I will be able to customize my blog.

Everyone in the world probably knows that if you want to create a blog, you use the WordPress platform. It is undoubtedly the biggest player on the market, with countless plugins, a very large community, and serving probably half of the pages that are available online. WordPress is also known, on the other hand, as an outdated platform, with numerous security gaps and above all, slow.

 

Most popular CMS

WordPress is a CMS representative. So what actually is CMS? It means a Content Management System and it is basically a software that allows you to create a website and manage its content without having coding skills. All you have to do is buy a web domain and hosting, then choose the right template, create content and your website is live.

WordPress is a tycoon on the CMS market, but that does not mean that there is no competition. On quite the contrary, the CMS market is highly diversified, and when looking for an alternative one can pay attention to:

 

Headless CMS as a new movement in the industry

While a standard CMS deals with both the data layer (backend) and the visual layer (frontend), in the case of headless CMS it is slightly different. The latter separates these two layers and makes the responsibility for storing and creating content lie with the CMS and the responsibility for displaying data lie with independent applications.

 

It seems to be a more complicated approach, but in recent years the Jamstack movement has gained in popularity, which has significantly increased interest in headless CMS. And what exactly is Jamstack? It is a modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup. In this scheme, headless CMS acts as a prebuilt Markup, so the content is delivered to various frontend applications using APIs.

 

As in the case of standard CMS, many headless platforms were created. Each has its pros and cons, and a very interesting comparison can be found here. Examples of platforms include:

 

It should be noted here that although this headless approach has many advantages, it is not a solution for everyone. The Jamstack architecture is mainly aimed at people who have programming skills. Many who want to build a website or a blog for their business or passion do not have such skills, so they need to use standard CMS. I would like to use the Jamstack approach in my project and in the next steps, I will think about which exactly technologies will help me achieve my goals in an easy and fast way.

 

Jamstack framework for frontend

I only consider solutions related to React, because I know this technology best, and according to the rules of product development/MVP, use those technologies in which you are an expert. The most popular are 3 solutions on the market:

Create React App

Create React App is a template for creating web applications quickly. When creating a blog, its biggest disadvantage is that the content is dynamically generated on the client's browser side, which at the start causes a great loss in terms of blog SEO, because the web crawlers robots will not be able to see what I am writing about on the site.

Gatsby

Gatsby is a fantastic technology that makes it possible to write in React, but it also gives a lot of features that are extremely necessary to build and maintain a modern style blog. It has good image management, supports SEO, but most importantly, it is the Static Site Generator, which means that subpages are built ahead of time, so they can load in the user's browser very quickly. Of course, this is just a brief description of Gatsby's capabilities.

Next.js

Next.js is a popular solution that combines the best features from different tools. It supports both hybrid static and server rendering. It also has a large community that supports the Vercel team in building even better solutions.

 

It is not easy to choose the right tool for your needs. To better understand the topic of Server Side Rendering (SSR), Client Side Rendering (CSR), and Static Site Generation (SSG), I encourage you to check out this fantastic resource by Ahmad Awais who thoroughly explains differences in those approaches.

 

In my case, the choice is quite simple. I've already created a lot of projects using Create React App, but these were applications that didn't require any SEO related functionality. Therefore this solution is not considered by me. I also had the pleasure to work with Gatsby and it's a great tool to build both simple blogs and complex online stores that support SEO to a large extent and allow simple development from a programmer's perspective. However, in the case of the current blog, I would like to move towards Next.js. As the unwritten rules of experienced product developers say, choose those technologies in which you are an expert and which will allow you to deliver the product efficiently rather than the joy of writing code and having fun.

 

Unfortunately, in this case, I have to break this rule, because I have never participated in a project using Next.js. So why such a decision? There are several reasons.

Why Next.js is the right choice?

First of all, I've heard about Next.js for a long time and I always wanted to learn it, but there was never any time or opportunity. In recent months I have even heard more and more about it, which made me even more convinced that I should go this way. Sounds a bit like Hype Driven Development, but I am aware of how many good solutions Next.js offers and I would like to try them out.

Secondly, I think it's a kind of investment because at the moment I have such an impression that Next.js may soon become the first choice when writing React projects. I would like to test my theory, and if it is confirmed, I will be able to know a little more about building applications in Next.js.

Thirdly, it's still JavaScript and React, so I don't think it's going to be that painful to switch to another library. I wouldn't build a product based on PHP that I don't know, just to learn PHP.

 

This is how it looks when it comes to the frontend of the application. I will use Next.js.

 

Best backend for the blog

By backend I mean a place where I can store, write and edit my blog posts. Here the decision will no longer be as simple as in the case of frontends. But let's see...

As I wrote in previous posts, I have been using Notion to a large extent for a long time as a tool to manage matters related to both work and private duties. I'm also writing this text in Notion and I thought if I could use Notion as headless CMS. Unfortunately at the moment, it does not provide an official API for integration, but there are workarounds that allow the API to be used in an unofficial way and I want to check them in the first place.

 

In order to use Notion as a CMS, there are two steps to be taken. First, download the data from Notion, preferably in JSON or markdown format. Then, you should display these data on the frontend application page.

 

When it comes to data retrieval from Notion, the following projects on github are most popular:

 

Of course, I'm only interested in javascript solutions, so I'm only considering the last two proposals. Additionally, you need to consider solutions that will help you display the downloaded data. It seems that the creator of notion-api-worker also provides a second package (react-notion), which I must admit looks very promising.

 

Summary

There are many options when choosing technology to blog as a product MVP. Headless CMS and the Jamstack approach are very popular right now. I'll go in that direction by choosing Next.js as the frontend solution. On the backend side, I would like to use Notion as the CMS that I intend to test in the next steps.

Hey, did you like the post?

2021