MyPage is a personalized page based on your interests.The page is customized to help you to find content that matters you the most.


I'm not curious

Server vs Client: The Pros and Cons Of Building WordPress Front-Ends In JavaScript

Published on 03 October 18
412
0
0

In the early days of the web, pages were stored on servers and delivered unchanged to browsers. Later, templating systems and content management systems like WordPress rendered pages on the server. Code executed on the server filled placeholders with information from a database, building HTML pages that browsers could display.

Later still, JavaScript applications became popular. JavaScript code running in the browser used content from APIs to build HTML pages which browsers then displayed.

WordPress is a content management system that renders pages on the server. When a browser makes a request, PHP code is executed, fetching data from the database, processing it according to various conditions, then sending the rendered HTML to the browser.

But that is not the only way a WordPress site can provide content to a browser. A couple of years ago, the WordPress REST API was introduced. The REST API allows developers to create JavaScript applications that create HTML pages in the browser, requesting content and other data from the API.

The majority of WordPress sites use server rendering, but there is increasing interest in WordPress as a headless content management system. When used as a headless CMS, WordPress handles content creation and management, data is stored in the WordPress database, but the site’s front end, the part that displays the content, is a JavaScript application running in the browser.

There are advantages and disadvantages to both approaches.

The Pros and Cons Of WordPress Server Rendering

As I have already explained, WordPress was built to render pages on the server, as were most content management systems. The browser receives a complete HTML document to display.

Assuming the site is hosted with a competent hosting provider, the rendering of the page takes milliseconds – often quicker with caching. More complex pages may take longer, but server rendering is unlikely to negatively impact performance.

Because server rendering provides the browser with a complete pre-rendered page, the initial page load is faster. JavaScript apps have to download and execute a lot of code before the page is rendered.

Server-side rendering is also great for SEO. Search engine crawlers can execute JavaScript, with some limitations, but they’re more comfortable with pre-rendered HTML.

However, server-side rendering is often slower for subsequent page loads because the CMS creates a full page each time a link is clicked. Server rendering may also require more requests to the server and it offers none of the interactivity and slick page transitions JavaScript is capable of.

The Pros and Cons Of WordPress Client Rendering

WordPress content rendered on the client is created by JavaScript web applications, often using view frameworks such as React and Vue. The framework, JavaScript libraries, and other code has to be downloaded before the page is displayed to the user. This takes time, which means the initial page load is likely to be slower than if it were rendered on the server.

Subsequent page loads are faster because the web app only has to request the content from the server, which doesn’t have to build a full page. Additionally, intelligent caching and prefetching can make subsequent page loads almost instantaneous. In fact, the web app doesn’t have to reload the full page. It just changes the content of the currently loaded page.

With the introduction of web technologies such as Service Workers and the Push API, JavaScript web apps became even more powerful. They can provide offline functionality, push notifications, and very fast page transitions – benefits that server rendering can’t compete with.

Which Is Right For Your Website?

WordPress is a fast and reliable content management system. There is a huge ecosystem of plugins and themes that hook into its server rendering model. For most websites, servers rendered WordPress is the right choice.

But for site owners who need complete control over the front-end experience or who prefer to work with JavaScript and its ecosystem, client-side web applications based on WordPress combine the best of JavaScript with WordPress’s excellence as a content management system.

In the early days of the web, pages were stored on servers and delivered unchanged to browsers. Later, templating systems and content management systems like WordPress rendered pages on the server. Code executed on the server filled placeholders with information from a database, building HTML pages that browsers could display.

Later still, JavaScript applications became popular. JavaScript code running in the browser used content from APIs to build HTML pages which browsers then displayed.

WordPress is a content management system that renders pages on the server. When a browser makes a request, PHP code is executed, fetching data from the database, processing it according to various conditions, then sending the rendered HTML to the browser.

But that is not the only way a WordPress site can provide content to a browser. A couple of years ago, the WordPress REST API was introduced. The REST API allows developers to create JavaScript applications that create HTML pages in the browser, requesting content and other data from the API.

The majority of WordPress sites use server rendering, but there is increasing interest in WordPress as a headless content management system. When used as a headless CMS, WordPress handles content creation and management, data is stored in the WordPress database, but the site’s front end, the part that displays the content, is a JavaScript application running in the browser.

There are advantages and disadvantages to both approaches.

The Pros and Cons Of WordPress Server Rendering

As I have already explained, WordPress was built to render pages on the server, as were most content management systems. The browser receives a complete HTML document to display.

Assuming the site is hosted with a competent hosting provider, the rendering of the page takes milliseconds – often quicker with caching. More complex pages may take longer, but server rendering is unlikely to negatively impact performance.

Because server rendering provides the browser with a complete pre-rendered page, the initial page load is faster. JavaScript apps have to download and execute a lot of code before the page is rendered.

Server-side rendering is also great for SEO. Search engine crawlers can execute JavaScript, with some limitations, but they’re more comfortable with pre-rendered HTML.

However, server-side rendering is often slower for subsequent page loads because the CMS creates a full page each time a link is clicked. Server rendering may also require more requests to the server and it offers none of the interactivity and slick page transitions JavaScript is capable of.

The Pros and Cons Of WordPress Client Rendering

WordPress content rendered on the client is created by JavaScript web applications, often using view frameworks such as React and Vue. The framework, JavaScript libraries, and other code has to be downloaded before the page is displayed to the user. This takes time, which means the initial page load is likely to be slower than if it were rendered on the server.

Subsequent page loads are faster because the web app only has to request the content from the server, which doesn’t have to build a full page. Additionally, intelligent caching and prefetching can make subsequent page loads almost instantaneous. In fact, the web app doesn’t have to reload the full page. It just changes the content of the currently loaded page.

With the introduction of web technologies such as Service Workers and the Push API, JavaScript web apps became even more powerful. They can provide offline functionality, push notifications, and very fast page transitions – benefits that server rendering can’t compete with.

Which Is Right For Your Website?

WordPress is a fast and reliable content management system. There is a huge ecosystem of plugins and themes that hook into its server rendering model. For most websites, servers rendered WordPress is the right choice.

But for site owners who need complete control over the front-end experience or who prefer to work with JavaScript and its ecosystem, client-side web applications based on WordPress combine the best of JavaScript with WordPress’s excellence as a content management system.

This blog is listed under Open Source and Development & Implementations Community

Related Posts:
Post a Comment

Please notify me the replies via email.

Important:
  • We hope the conversations that take place on MyTechLogy.com will be constructive and thought-provoking.
  • To ensure the quality of the discussion, our moderators may review/edit the comments for clarity and relevance.
  • Comments that are promotional, mean-spirited, or off-topic may be deleted per the moderators' judgment.
You may also be interested in
 
Awards & Accolades for MyTechLogy
Winner of
REDHERRING
Top 100 Asia
Finalist at SiTF Awards 2014 under the category Best Social & Community Product
Finalist at HR Vendor of the Year 2015 Awards under the category Best Learning Management System
Finalist at HR Vendor of the Year 2015 Awards under the category Best Talent Management Software
Hidden Image Url

Back to Top