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.
Leave a Reply