Today we are going to talk about web development. We will do it with Nerea Gómez and Igor Nieto, members of the agency's development team, with whom we will talk about Astro and Strapi. We will delve into how the combined use of these technologies brings performance and flexibility, which contributes to optimize the digital experiences we build at Workoholics.
Yes, today we will talk about web development. And, although we use certain technicalities, our goal is to make this post understandable and useful for everyone. After all, web development is not an isolated discipline, but the decisions that are taken from the code, has a direct impact on areas such as design, communication, SEO, management, or even commercial work.
In case of doubt (consult your pharmacist) with any of the concepts used throughout the interview, you can consult the glossary of terms related to the world of web development that we include at the end.
Now, let's start at the beginning: what is Astro?
Igor: Astro is a web development framework that, unlike React, Angular, Gatsby or other well-known tools in the JavaScript ecosystem, gives us incredible flexibility when it comes to choosing the rendering strategy (process that allows us to visualize a graphic, object or scene on the computer) or configuring different data sources. In addition, it is capable of creating so-called “islands” with which we can develop isolated components or functionalities developed in different frameworks.
So, what differentiates Astro from other frameworks?
Igor: I would say that Astro is a great tool that coexists perfectly with other frameworks. In no case would I pit Astro against other frameworks such as React, Angular, Vue or Svelte. Astro is precisely a tool that allows us to use different frameworks as part of the same project. On the other hand, we can follow different rendering strategies depending on the context of the project. Through the initial configuration we can choose between Server Side Rendering or Static Site Generation.
What are the advantages and disadvantages?
Igor: One of the advantages of Astro is its learning curve and the ease of handling its template system. In addition, it has extensive documentation, an ecosystem of addons or very useful plugins. It is an open source project in continuous development that, despite being young, has a large development community.
As a disadvantage, and although it may seem contradictory, its great flexibility can lead us to make mistakes when selecting it as a solution for a project. For example, although Astro can execute client-side code, in no case I would use it to create a SPA (Single Page Application) because that is not its purpose and there are other frameworks such as Angular or React that are much better suited to this case.
What is Strapi, what is it and what is it for?
Nerea: Strapi is a super powerful open source 100% JavaScript headless CMS. It is completely decoupled from the front end so it allows developers to create an API, extend or create endpoints or create a data structure quickly and easily.
In addition, it is possible to manage the content of an application or a website in a simple way without the need for extra development. Strapi provides you with basic functionalities such as role management or sending emails, which at first can be complex functionalities to cover.
Okay, but what exactly is a headless CMS?
Nerea: Strapi is called headless CMS because it is a CMS that does not depend on anyone, that is, on a front end (the part that the user sees). It is totally decoupled and separated from the front end. So to speak, we would have a website and a content manager that could coexist separately and would not depend on each other. At the time of development, in relation to the scalability of the web or app, or in case of possible API crashes, it would be a brutal advantage.
Why is it positive that Strapi is open source?
Nerea: Having the freedom to see how the program works and its guts is great. Changing it or extending it to do what we want, collaborating in a community and feeding off the contributions of other developers is what makes it nice that it is open source. As developers, we expose ourselves to new challenges and features every day, so it is very important to have a large community to rely on.
Broadly speaking, how does Strapi work?
Nerea: Basically, Strapi works using a module-based architecture. Strapi modules are packages that contain specific functionality, such as a user authentication module or a content management module. These modules can be added or removed as needed, providing great flexibility and customization in application development.
In addition, we developers can also create and manage
How do Strapi and Astro integrate?
Igor: The great thing about Astro is its versatility. It is able to integrate with different data sources. For example, we could consume content in the same project from a Markdown, JSON, an API... In this particular case, Strapi is exposed through a REST API over which we have full control, being able, for example, to configure the visibility of each of its endpoints.
Why do Astro and Strapi work so well together?
Igor: In my opinion, they are 2 tools that are developed with a lot of importance to performance, so we get really fast websites or applications. In addition, with the same technological stack, we are able to provide solutions to the requirements of very different projects.
Nerea: The versatility of Astro compared to other js frameworks, along with the power of the CMS Strapi, makes it work much faster and get really incredible results. In short, it allows us to develop websites with great performance even with a large load of data or content.
What is your experience so far developing with Astro+Strapi?
Igor: Currently we have developed several projects with both technologies and we foresee that, either together or separately, we will continue to use them very often to solve different cases that we have in the agency. Besides, Strapi allows us to develop on it and extend its functionalities to adapt them to our needs, being a really powerful CMS.
Nerea: The truth is that it has been a very rewarding experience because of the ease and versatility of the two technologies. It is very gratifying to obtain results that at first sight can be complex to achieve, but that Strapi and Astro solve in a simple and fast way. It is a great solution for frontend developers who need to create some API for their applications.
In which types of projects is it a good idea to use them, and in which ones is it not?
Igor: To evaluate when to use this combination we should take into account many factors. For example, in the case of Astro, if the objective is to develop a SPA application that will run on the client, I would not use it. On the other hand, in the case of Strapi, being a “developer first” CMS, I would value the level of knowledge of the person who will manage the content, as it is often decisive to choose Strapi, or opt for other CMSs such as WordPress, much more established in this regard.
Nerea: It's a complicated question, but I think I would use Astro on content-rich websites, since right now it's their biggest competitive advantage: creating ultra-fast static websites, sending less JavaScript at compile time and converting everything into static HTML. The latter is very SEO-friendly, so it would also be a good choice for commercial landings or where SEO is to be worked on.
What level of content management does Strapi allow, and is it easy to administer?
Igor: When it comes to content management, we don't set ourselves any limits. Strapi gives us the ability to create a very complete data architecture through its plug & play interface, but the interesting thing is that we can make it much more advanced and customized by extending the CSM and enabling specific endpoints for each case. In addition, Strapi has a role system that allows us to customize the fields or entities that each user can view and edit.
Nerea: I think that in terms of management, and based on what we have found in the projects in which we have integrated Strapi, we have not found any limits. And the fact is that Strapi allows great flexibility and customization in development.
What does Google think of all this, and how do you get along with SEO?
Igor: In principle these tools would not have any restrictions in terms of SEO, in fact there are Astro plugins that can help us in different aspects, for example, when generating a sitemap, manage headers, etc.. Even the compiler is able to warn us if in any case there are attributes that we must complete as the alt of an image. On the other hand, Strapi would not have limitations in this regard, since, although they are not as well known as those of WordPress, it has some plugins to manage content related to organic positioning. However, the most important thing in this aspect is to keep in mind that there is a technical SEO that we must apply and that there are certain fields that we will have to enable in the entities so that the communication team can manage them.
Do you miss anything when you develop using Astro + Strapi?
Igor: For my part there is one thing I would like to improve about Astro when running in SSG mode. Its image management plugin, based on Sharp, allows us to optimize images for different resolutions and formats. It is a really useful functionality, but it has a shortcoming: it is not able to generate the optimized images when hydrating client-side content. This is because the compiler is not able to guess all possible images to be rendered after the static content has been generated. To solve this problem in a real project, we have used Sharp directly to download and optimize all the images of the project in order to be able to render them, both statically and dynamically, on the client side.
Nerea: Not at the moment, but I know that I still have a lot to discover and learn from both Strapi and Astro.
Glossary
- Framework: A framework, whether JS or any other programming language, is a development tool that allows us to speed up our work by solving many implementations and tasks that we would otherwise have to generate adhoc or from scratch.
- JavaScript: JavaScript is a cross-platform programming or scripting language. Popularly, it is known for its ability to write browser-interpretable programs. Today its use extends to a multitude of applications in the digital ecosystem.
- Hydration: A component, in addition to its definition, can have parameters that allow its content to be loaded. The action of loading the content of a component is called hydration.
- Static site: It is a site that is served statically through HTML, CSS and JavaScript. The hydration of the content of such a site is done at compile time, so the server will only be responsible for serving pre-generated files.
- Backend: Backend development means working on server-side software, which generally focuses on the aspects that the user does not see. Backend developers make sure that the website works properly, focusing on databases, logic, APIs etc.
- Frontend: Frontend web development is the development of the graphical user interface of a website. Through HTML, CSS and Javascript, or making use of different frameworks, the frontend developer is in charge of providing the user interface of the website.
- CMS: (Content Management System) is a content management system, a tool that allows us to manage the data of a digital project.
- API: (Application Programming Interface) is a REST API (also known as RESTful API) is an application programming interface (API or web API) that conforms to the constraints of the REST architectural style and allows interaction with RESTful web services. REST stands for representational state transfer and was created by computer scientist Roy Fielding.
- Markdown: Markdown is a lightweight markup language for creating formatted text using a plain text editor.
- Render: Print the interface across the screen.