USE A STATIC SITE GENERATOR WITH THE WORDPRESS API

Today it is possible to create web pages using the

administration of WordPress associated with a static generator. You thus have

access to the best of both worlds: WordPress to manage content and Nuxt.js /

Gatsby to generate optimized, lightweight, and accessible pages.

NB: Nuxt.js from version 2.13.0 can deliver only static

content (which was not the case in previous versions)

Why substitute the WordPress theme system?

WordPress is excellent for its administration interface

and content management. But the environment proposed to create the visible part

of the website, or in other words, the files in the / themes / WordPress

directory is sometimes not suitable for specific projects.

WordPress has often criticized these numerous calls to

the database to display a page of content. There can be dozens of hidden and

energy-consuming queries even when the visitor wants to view a standard post or

page, especially since the contents of many sites using WordPress change very

little, if at all.

What is a Static Site generator?

This tool generates at a given moment a static version

from content coming from a database (this is an example) and a CSS / HTML

layout coming from another source.

A generator is one solution that arises when you want to

optimize a website whose content is not constantly evolving, such as a blog or

a showcase site. It will assemble the dynamic contents (those of the database)

with the CSS / HTML layout and produce HTML pages, containing CSS and js and

only HTML / CSS / js content. These pages will be served when a user requests

them. No code executed on the server-side, no SQL queries.

Let’s take an example.

A user wants to go to a blog post at the

page:/blog/mon-article

  • In WordPress and its integrated theme system, the user visiting the page /blog/mon-article will make (HTTP) request server to verify the page /blog/on article’s existence. Since it does not exist, the HTTP request is sent back to the WordPress core files, which will provide the directives to display the page in question. For example, calling a script in the header, applying modifications to the article’s content via a plugin, retrieving the report’s content from the database by making an SQL request, which itself opens an authentication with the SQL server, etc.… The list is generally much longer.
  • In Nuxt.js, the user makes an HTTP request to the server, which searches for the page or the folder /blog/mon-article. It will find the page /blog/mon-article/index.html(previously generated by next). It’s over, the page is displayed, no SQL query, no code execution on the server-side (Php or others).

Why use a static Site generator like Nuxt.js?

A static site generator is a powerful tool that provides

many features to optimize your web pages.

The pages will be faster to display thanks to the HTML,

javascript, and CSS code minification. Image optimization, quick navigation and

pleasant page transitions, accessible and SEO-optimized content. 

It is also enjoyable to develop in an environment with

such flexibility. Finally, this allows you to use only one language: javascript.

There are many generators, among the most famous: gatsby

and nuxt.js

For the development of the site you’re reading, I decided

to use dl Nuxt.js after reading an article (in English) explaining how to

integrate with WordPress admin Nuxt.js.

It was a great starting point to test and ultimately

adopt Nuxt.js for http://bestitsol.com/.

The WordPress REST API, a bridge between the two worlds

Chances are, you are asking yourself a legitimate

question. How to choose another system than the WordPress theme to display

WordPress content?

The WordPress API is the missing link. The WordPress API

can deliver a website’s content naturally to any person or tool visiting a

predefined URL to put it and quickly.

WordPress is also a Headless CMS.

Sometimes you will come across this barbaric term.

(Headless CMS!), a CMS’s specific category. The CMS headless, as opposed to

traditional CMS provides no environmental or ecosystem to display the content.

Instead, it provides an API.

WordPress, with its API, offers the possibility of being

used as a headless CMS since you can do without its theme system.

Example of use in production

The page you are reading was written via the WordPress

administration and was delivered to you, thanks to Nuxt.js. So here is a

concrete case of using a static site generator in combination with the

WordPress API.

You can explore the source code; it has little to do with

code from a WordPress theme. Yet everyone is a winner.

The editor takes advantage of the WordPress

administration interface, and the reader accesses the content in a fast,

optimized, accessible way. And the waiter is solicited at least.

The stack necessary to carry out a project like this is

not complicated but requires rethinking its functioning.

Switch from a WordPress theme to a Nuxt.js project

Before: a single server is necessary (OVH, for example);

it hosts the database and the hosting of PHP pages (including WordPress) and

all image files, javascript, CSS, etc.

After: a server hosting the WordPress administration and

having the same capacities as before.

Another server or new service on the same server capable

of generating static pages. In the case of Nuxt.js, you need to install node.js

and install Nuxt.js. The alternative that I use, however, is a free turnkey

service from Netlify. This service can generate static content from a nuxt.js

project and serve it to readers. And what’s more, it’s free.

Without going into details, you must rethink your site’s functionality and explore the new possibilities that Nuxt can offer you. It’s exciting and generally easy to implement.

Web development agency provides best static & dynamic WordPress site.


Posted

in

by

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *