JAMstack and WordPress: Friends or Foes?

The Evolution of Websites

1. A Look Back at Static Websites in 1999

Around 1999, websites were primarily composed of HTML and CSS, making them simple and static. This era was dominated by platforms like Geocities, which, though they may seem unsightly today, evoke a sense of nostalgia. Even my first web agency site, which was static, now seems rudimentary. While building static websites was straightforward, maintaining them proved cumbersome when clients requested minor changes, such as adding a comma. This led me to seek a content management solution, ultimately opting for WordPress, enabling clients to edit their own sites, which was a significant improvement.

The Challenge of Aging LAMP Architecture

2. The LAMP Stack and Its Limitations

WordPress, the content management system we embraced, relies on the LAMP (Linux, Apache, MySQL, PHP) stack. Over time, this stack has aged and slowed down. In this system, a browser sends requests, PHP processes these requests, the database is queried, and the content is displayed on the page. This approach worked for a while, but websites have since become increasingly heavier, with an abundance of images, tracking codes, and JavaScript.

3. The Growing Weight of Websites

The size of webpages has notably increased over the years. From March 2015 to 2018, the median desktop webpage size saw a 25.8% increase, and the median mobile webpage size grew by 77.5%. WordPress sites are no exception, with a 15% increase in median desktop webpage size and a 28.6% increase in median mobile webpage size. To mitigate this issue, many have turned to caching and speed-related plugins, found in abundance in the WordPress plugin repository. However, these solutions are complex to configure and offer only limited improvements.

4. AMP: A Solution or a Challenge?

Google’s Accelerated Mobile Pages (AMP) project aims to expedite mobile website loading. Nevertheless, AMP introduces a new web format, raising the question of whether it is necessary when the traditional format suffices. Moreover, Google’s caching of AMP pages on its servers erodes the control website owners have over their content, contradicting the principle of owning and controlling one’s content on the web.

Emerging Challenges

5. The Trials of Website Security and Scaling

Website security is an ongoing challenge due to the need for frequent patching of plugins with security vulnerabilities. WordPress is often targeted, accounting for 90% of hacks analyzed by Sucuri. Despite the availability of numerous security plugins, none have offered comprehensive solutions.

Scaling WordPress websites poses a major challenge during traffic peaks or DDoS attacks. This difficulty in handling traffic surges may deter potential site owners. Scaling should be exciting, not a barrier to entry.

The JAMstack Revolution

6. Introduction to JAMstack

JAMstack, a term coined by Matt Billman, founder of Netlify, describes a modern approach that extends the capabilities of static sites. JAMstack stands for Javascript, API, and Markup. It encourages the development of frontend-focused websites that retrieve content through APIs, employ dynamic functionality via JavaScript, and present content using Markup.

7. The Rise of Static Site Generators

Static site generators are at the forefront of the JAMstack revolution. They allow for the creation of page templates and the automated generation of site pages. Prominent examples include Jekyll, Hugo, and Gatsby, with Gatsby emerging as the current favorite.

8. Hosting Options for Static Sites

Several services cater to hosting static sites, including Netlify, GitHub Pages, GitLab Pages, Serverless, Firebase, and AWS. These services offer a range of features to accommodate different needs.

9. Handling Dynamic Functionality with APIs

Static sites, being inherently static, require solutions for handling dynamic functionality such as forms, comments, and search. This is where APIs come into play. Numerous third-party tools offer solutions for adding functionality to static sites, enhancing the user experience.

10. Overcoming Challenges with JAMstack

Despite the advantages of JAMstack, there are hurdles that hinder its widespread adoption. Static site generators typically require command-line usage, limiting accessibility for some users. Furthermore, long build times may impede quick content publishing. JAMstack lacks built-in multi-author capabilities and relies on developer skills. The plugin and theme ecosystem, while growing, remains less extensive than that of WordPress. People’s familiarity with and attachment to WordPress can also deter them from embracing JAMstack.

Bridging the Gap with WordPress and JAMstack

11. Embracing Both Worlds: WordPress and JAMstack

WordPress has achieved widespread usage, powering over one-third of the web. However, it is showing signs of age, prompting the need to modernize it and bridge the gap with JAMstack.

12. Option 1: Headless CMS with WP REST API

One approach to modernizing WordPress is to use its REST API, transforming its content into a portable format. Headless CMS is an excellent way to utilize the REST API. WordPress remains the content management system, while the REST API delivers content to frontend technologies like React or Angular. This approach offers flexibility, portability, speed, security, and scalability. However, it may pose challenges in terms of adoption, vendor lock-in, plugin limitations, theme restrictions, and live previews.

13. Option 2: WordPress Static Site Generator Plugins

Two WordPress plugins, Simply Static and WP2Static, offer the ability to generate a static version of a WordPress site. These plugins can be cost-effective, easy to install, and used alongside WordPress. They allow deployment to various static hosting services. Nevertheless, they may require developer skills, impose server load, have lengthy build times, and lack support for certain features.

14. Option 3: WordPress as a Static Site Generator on Serverless Hosting

A third approach involves using platforms like Strattic to transform a WordPress site into a static version hosted on serverless architecture. With this method, a WordPress site remains the content source, but a single click deploys a fast, secure, and scalable static version on a content delivery network (CDN). This approach simplifies the publishing process, making it accessible to a broader audience. It offers speed, security, scalability, and future-proofing, but may not appeal to developers accustomed to traditional WordPress practices.

In conclusion, the intersection of WordPress and JAMstack offers multiple avenues to address the challenges faced by website owners and managers. Each approach has its merits and drawbacks, providing flexibility and choice for those seeking to modernize their web presence. It is essential to weigh the advantages and limitations of each option in light of specific project requirements and priorities.