Creating websites based on the Gatsby.js framework?

CREATING WEBSITES IN GATSBY

Gatsby is a framework that uses the React library, in which web development is extremely enjoyable, with a strong emphasis on supporting development work. In this article, you will learn about the pros and cons of using Gatsby.js in your project, and what you need to think about before implementing it.

USE GATSBY JS TO BUILD WEBSITES

GATSBY.JS - WHAT IS IT?

Gatsby is a framework that allows you to build super-fast websites and web applications based on React JS. It allows you to easily optimize the website code. A special feature of Gatsby is that it combines the advantages of many other solutions:

speed of operation of pages built on the basis of a static page generator,
dynamic elements of applications created using the React.js library,
comfortable and optimized preconfigured development environment,
the ability to manage content at the level of popular CMS systems (eg WordPress or Drupal).

WHY IS IT WORTH CREATING A GATSBY-BASED WEBSITE?

SPEED AND PRODUCTIVITY

Web Creation with Gatsby is a guarantee of speed and efficiency. The creators of the framework put a lot of work on optimizing the speed of pages created with it. By building static page files, it will load very quickly. While loading the page on the server side, no scripts or database queries are executed. All the server has to do is return static HTML, CSS, and JavaScript files.

After loading the basic structure of the page, content and styles, the JavaScript code is launched, which then loads the React application and preloads some data for the remaining subpages. Thanks to this, switching to other subpages does not require a full page reload. Retrieves only the content of the specified page and automatically replaces changed parts. In addition, when the downloaded data is cached in the browser, returning to the subpage visited by us does not require sending a query to the server and the page loads faster.

DATA ACCESS AND PLUGINS

Gatsby allows you to download data from multiple sources simultaneously. For example, content for a blog can be prepared using WordPress and a store can be run using Shopify. These features can be combined with a consistent and unified Gatsby-based user interface. In addition, each team or content creator on a given site can use their preferred tool. For example, if the content of a subpage is prepared in Google Docs and then manually pasted into the CMS system, Gatsby will automatically upload it directly to the website, downloading data from the CMS system. In addition, there is an extensive library of ready-made elements and plugins with which you can significantly speed up the process of creating a website. You will find there, among others:

plugins that support embedded images, their responsiveness, optimization and delayed loading,
plugins add the ability to download data from various sources such as Wordpress, Drupal, but also unmarked files or Google Docs documents,
preconfigured templates for blogs, documents, or e.g. video course platforms,
a full range of plugins for various aspects of SEO.

SECURITY

Gatsby prepares websites to be safe and resistant to external attacks. Websites based on traditional CMS systems have a much lower level of security. By constructing a static page resource, no code is executed when the user loads it on the server side. In addition, the system on which the content is prepared (eg Drupal) can be configured in the local network, behind a firewall, and only the compilation version of the page is visible on the outside. As a result, even the CMS connection table will not be accessible from the outside, effectively reducing the number of potential vulnerabilities to zero.

INDEXING IN SEARCH ENGINES

Gatsby, while building a website, also ensures its full indexing in search engines. The content of all subpages in the build process are rendered to static HTML files. When the user loads the page, he first receives the HTML and CSS code, and then the loaded React application. Thanks to this, when indexing, search engine robots can read and index the entire content of the page by reading only the HTML code.

FACILITIES FOR DEVELOPERS WHEN CREATING WEBSITES

Gatsby provides a convenient development environment. We run the locally created version of the website with one command. All code changes are automatically visible on the monitor in real time. The environment is configured so that you can use the latest technologies, which, if necessary, will be compiled to versions that support older browsers (even IE9). The GraphQL API conveniently takes data and displays it on the screen. All of this makes web development for developers easier and faster than with traditional CMS systems. Where often after making changes to the code you have to rebuild the style, clear the cache and refresh the open page in the browser. When working with Gatsby, everything happens automatically and takes a few seconds.

HOSTING

Gatsby-based website hosting is easy and cheap. Rebuilding the page will generate static HTML, CSS and JS files, and only these will be made available to the user. As a result, you can use almost any hosting provider, as no code runs on the server, you won't need any particular PHP version or library. When you buy website hosting, you don't have to pay for CPU processing power or available RAM. Our website will only use a small amount of disk space and transfer data. There are also service providers that offer hosting of these static page files for free. Moreover, you can take full advantage of CDN services as you can use them to host almost any website.

WHAT SHOULD BE CONSIDERED IF YOU DECIDE TO CREATE WEBSITES BASED ON GATSBY JS?

Introducing changes to the content requires rebuilding the website so that they are visible to users. This may take a while for larger pages with a lot of content. However, work is underway on the gradual reconstruction of the framework, which will significantly accelerate this process by rebuilding only those subpages that have actually changed. Moreover, content editors are often used to the fact that as soon as you click "Publish", new content or changes are immediately visible to the user. When using Gatsby, you need to rebuild your site first. So, before you start working with the Gatsby framework, make sure that those who will later import and edit the content know about this extra step that needs to be taken before any changes are made public.

By default, you cannot preview changes made before publishing. The entire page needs to be rebuilt for the changes to be visible, so you cannot click the preview button before saving the changes and checking that the new content is correct outside of the content editor. This convenience is only available in developer mode. Work to address these issues is ongoing and the first results are in the form of a Gatsby Preview on Gatsby Cloud Servers.