How to build ultra-fast and manageable websites with Astro and Strapi

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 chat about Astro and Strapi. We will delve into how the combined use of these technologies provides performance and flexibility, which contributes to optimizing the digital experiences that we build at Worköholics.

Yes, today we will talk about web development. And, although we use certain technical terms, our goal is that this post is understandable and useful for everyone. After all, web development is not an isolated discipline, but the decisions that are made from the code have a direct impact on areas such as design, communication, SEO, management, or even commercial work.

In case of doubt 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, yes, 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 choosing the rendering strategy (process that allows us to visualize a graphic, object or scene on the computer) or set up 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 makes Astro different 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 like 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 its advantages? And its disadvantages?

Igor: One of the advantages of Astro is its learning curve and the ease of handling its templates system. In addition, it has extensive documentation, an ecosystem of very useful addons or 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, I could talk about its great flexibility, which can lead us to make mistakes when selecting it as a solution for a project. For example, even if Astro can execute client-side code, in no case would I use it to create a SPA (Single Page Application) since that is not its purpose and there are other frameworks like Angular or React that are very adaptable. better to this casuistry.

And Strapi, what is it? What is it for?

Nerea: Strapi is a super powerful open source 100% JavaScript headless CMS. It is totally decoupled from the front 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. Already from the base, Strapi provides you with basic functionalities such as role management or sending emails that at first can be complex functionalities to cover.

Well, but what exactly is a headless CMS?

Nerea: Strapi is called a headless CMS because it is a CMS that does not depend on anyone, that is, on a front (the part that the user sees). It is totally decoupled and separated from the front. So to speak, we would have a website and a content manager that could live separately and would not depend on each other. When developing, in relation to the scalability of the web or app, or in the event of possible API drops, it would be a brutal advantage.

Why is it good that Strapi is open source?

Nerea: Having the freedom to see how the program works and its innards is great. Changing or extending it to do what we want, collaborating in a community and feeding on the contributions of other developers is what makes it open source beautiful. And it is that, developers expose ourselves every day to new challenges and functionalities, so it is very important that there is a large community to lean 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, bringing great flexibility and customization to application development.

In addition, developers can also create and manage their content through an easy-to-use user interface.

How are Strapi and Astro integrated?

Igor: The good thing about Astro is its versatility. He 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 specific case, Strapi is exposed through a REST API over which we will 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 giving great importance to performance, therefore, 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: Astro's versatility compared to other js frameworks, together with the power of CMS Strapi, makes it work much faster and achieve truly 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 there are several projects that we have developed with both technologies and we anticipate that, either together or separately, we will continue to use them very often to solve different cases that we have in the agency. In addition, 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 is being a very gratifying experience due to the ease and versatility of the two technologies. It is very gratifying to obtain results that at first glance may be complex to achieve, but that Strapi and Astro solve easily and quickly. It's a great solution for frontend developers who need to create some API for their applications.

In what kind of projects is it a good idea to use them? In which it is not?

Igor: To assess when to use this combination we should take into account many factors. For example, in the case of Astro, if the goal 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, since it is often decisive to lean towards Strapi, or opt for other CMSs such as WordPress, much more established in this sense.

Nerea: It's a tricky question, but I think I'd use Astro on content-rich websites, since that's its biggest competitive advantage right now: building blazing-fast static websites, sending less JavaScript at compile time, and converting everything to static HTML. The latter greatly favors SEO, so it would also be a good option for commercial landings or where organic positioning is going to be worked.

What level of content management does Strapi allow? Is it easy to manage?

Igor: As for content management, we do not set 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 casuistry. In addition, Strapi has a role system that allows us to customize the fields or entities that each user can see and edit.

Nerea: I think that at the management level, and based on what we have found in the projects in which we have integrated Strapi, we have not found any limits. And it is that Strapi allows great flexibility and customization in development.

What does Google think of all this? How are they getting 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, such as when generating a sitemap, managing headers, etc. Even the compiler is capable of warning us if in any case there are attributes that we must complete, such as the alt of an image. On the other hand, Strapi would not have any limitations in this regard either, since, although they are not as well-known as those of WordPress, it has a plugin to manage content related to organic positioning. However, the most important thing in this aspect is to take into account that there is a technical SEO that we must apply and that there are certain fields that we must enable in the entities so that the communication and marketing team can manage them.

Do you miss something when you develop using Astro + Strapi?

Igor: 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's a really useful feature, but it has a shortcoming: it is not capable of generating the optimized images when content is hydrated on the client side. This is because the compiler is not able to guess all possible images to render 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, either JS or any other programming language, is a development tool that allows us to speed up 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 the ability to write browser-readable 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. We call the action of loading the content of a component hydration.
• Static site: It is a site that is served statically through HTML, CSS and JavaScript. The hydration of the content is carried out at compilation time, so the server will only be in charge of serving pre-generated files.
• Backend: Backend development means working on server-side software, which generally focuses on things that the user doesn't see. Backend developers make sure that the website works properly, focusing on the 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 interactivity to a project.
• 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 restrictions 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.