WordPress VS NextJS+Strapi. Is the migration worth it?

Hi everyone. I haven’t been much active in my blog due to other occupations and also because of the doubt whether to migrate this blog to another tech stack or not.

Regarding this last part I did extensive research on my free time and tried out NextJS + Strapi CMS to build something similar like WordPress, and I did so got super close.

What I tried

I want to let know that everything I build is free and open source for you the reader to use and try out.

First I adjusted Strapi to

1. create custom data models needed for the blog and I also added seeds and provisioning to developer easier.
2. added script to migrate wordpress categories, tags, posts+pages to my strapi cms

My Strapi blog cms project can be found here

https://github.com/kristijorgji/strapi-blog-cms

After I had a CMS to store my data I moved on to the frontend part.

For this task I used NextJS+React (last version using app routing) as it is the most trending for the moment and gets all the attention.

Is this attention worth the hype ?

We will figure out.

My NextJS+Strapi blog project is free for all of you here

https://github.com/kristijorgji/nextjs-strapi-blog

I built:

1. connection to the first Strapi Blog CMS project
2. generated in built time routes for the posts + home page + pagination

That is the core of a functional blog, new functionalities can be added with ease and I have created “to dos” in the github project.

If you are a developer I also invite you to contribute and bring the project forward.

You might be wondering right now how the results of my project might look.

Here is a preview of this very website (currently on WordPress) migrated automatically thanks to my script in NextJS+Strapi:

First impressions

My first impressions is that this is blazing fast, and indeed is so.

I exported statically the blog and it works great. If you want to do a “load more” or “infinite scroll pagination” then have to implement in frontend size calls to fetch the next articles.

I was very hyped about the potential of this project and the possibility of building something modern, fast and easy to maintain.

I was also very excited thinking that the site won’t crash, will be no more plugins chaos and all the issues that one might face with WordPress. But I still dropped this project(for now) after figuring out that will not scale well for real big blogs.

The dark side of the NextJS+React hydration

The title above is the main reason why I lost hope on this project, yes the hydration.

For every component that we render on the server, even server components in the latest NextJS version, next doubles the html and injects the props and html again!!!

I can explain this in depth about what hydration is and what Next is doing but considering there are a lot of other articles online I will leave you up to them.

I use this blog only to share and receive useful information and not duplicate content, alsdo don’t expect anything in return.

The issue mentioned with NextJS is reported below and you can get fully informed:

https://github.com/vercel/next.js/discussions/42170

To cut it shortly, the html size almost doubles! due to this sort of hydration.

This does not happen in wordpress because they server-side render the html with php in the backend, return it to the client and there is no hydration involved.

But does this matter?

Do not get scared yet. If you have a small blog or an e-commerce site it is “fine” to have twice the html size or the JS bundle size. The performance benefits will make up for it and you will end up with google pagespeed score higher than wordpress anyway. In addition the customers will enjoy more using your new site than the wordpress.

BUT if you have a huge blog or big category pages you need both performance and small page size

Ok… Kristi but what shall we do for big projects?

My recommendation is to go old school and server side render the html on the backend and do not use any hydration at all, this way the bundle size will be minimal and you benefit from performance improvements as well.

You can an use templating languages to statically generate what you need and interaction observer to pre-load links when user is scrolling or hovering toward them.

Alternatively you can use React just to render the htlm in the backend and return it but disable the hydration (you need your own server and not use nextjs). The only problem here is that you cannot attach handlers to the client like click etc as React needs them and hydratio to handle these events.

You can render the html and add old style js event handlers and for performance critical pages will work wonderfully. The rest can be done in React + hydration especially for single product pages where the page size will never grow much.

I also do believe that the Next team will fix this issue at some point and then it will be the best framework ever. Please keep in mind that hydration is always needed so this is not an issue in itself or something they did wrong. They are a wonderful team of great developers doing amazing innovations.

As this particular optimisation is not something standard they haven’t considered it yet. The “server” only, or “render server side only” components need a way to render only html and not hydrate, thats all.

Then at least the user can render html only for a page with 100 blog posts, and for other places use Next+React normally with hydration.

The other factors

1. WordPress has a huge community and plugins availability.

This is without a doubt a great thing because you can market and launch your site very fast, but on the other hand your site will be generic and like most other sites out there.

Before starting to replatform your site to Next consider this fact that many things that you will do manually are already offered with “1 click” thanks to some WordPress plugin.

This happened to me as well. I implemented from scratch seo optimisations, dark/night mode and many other things that I just installed with 1 click in WordPress…

2. In addition the WordPress editor is very good and the entire CMS is built on a single specific purpose: To let you write!

You cannot adjust Strapi so easily to let you do that.

Yes you can use “RichtText” and render it correctly in Next like I did in my demo but still it is not so flexible like the WordPress editor. Strapi will need a lot of plugin to offer you such a easy way of expressing and writing the content that you need.

The other factor is familiarity. You can easily find writers that know and can use WordPress but you need to teach and train people to use Strapi(or any other custom CMS).

There are many WordPress experts out there available to help you.

3. Many more other WordPress features

WordPress has “revisions”, drafts and many more features build-in.

You can easily see changes to the article from one version to another one and by who. It is again the idea of specificity. It is build only to blog. Of course the same can be done in any other framework but you will need so much time reinventing the wheel and probably without any need to do so.

Summary

Before I give my final tips I want again to mention that there cannot be a direct comparison between them both because one is a framework build specifically for blogging and the other(next) is a framework build for building generic websites of all kind and provides server-side rendering functionality.

Let’s move to the conclusions.

I would suggest that you use NextJS+Some Cms(ex Strapi) only if

1. your project does not have multiple elements on a same page. Example: many products or blog posts
2. You want a fully custom blog integrated to your custom site and add additional components and functionality to these blocks. This can be done with Strapi dynamic zones, example: you define a block named “subscribe” and handle it in React as you with to send some email to a particular backend endpoint and store it.
3. You use it for your own blog and don’t care much about possible business expansions or needing to hire writers or other authors with different accounts later. This is my use case, I might switch later the blog to something else for fun although as described WordPress does the job perfectly.

I would suggest you to use WordPress if:

1. You want only to blog and do not foresee having any flexible functionalities with complex ui and needs. Example: Blog but also create a social network in same platform
2. You have a lot of articles and a lot of authors! In this case sticking to WordPress is the wisest choice. All the authors you hire know the system already and you can find experts from the community to fix your issues very fast

And if you really insist of using Next but are sceptic of what CMS to use, you can still use WordPress as a headless cms and integrate it with Next.

This way you will reduce some of the disadvantages that I mentioned above and benefit from the great editing tools of WordPress and from the performance of next.

I do hope you find this article useful and saves you some time on deciding.

Comment below what are your thoughts and if you can think of a solution regarding Next hydration issue.

Until next time, K.