Enfoque Jamstack para equipos felices

Technology is loaded with promise, but it also comes with certain risks. And no, we're not talking about Terminator. When working with code, it's easy to focus on the shiny new features (or those that have been around for years as standard) instead of making sure development is actually useful. Truly useful.

Soluble's purpose is to make people happier at work. We think, design, and develop so that other companies and their teams can do better day to day. And our Jamstack approach is one of the ways we use to make it happen. Let us tell you more.

Agility, autonomy, and quality

Usually, marketing and product teams are forced to choose between agility (iterating quickly and efficiently), autonomy (not depending on third parties), and quality (enjoying results that approach excellence and maintain brand consistency).

Usually, if you decide to be agile and autonomous, the results won't be excellent in terms of consistency (brand customization) or visual experience quality. If you prefer autonomy and ambitious results, you won't be fast. If you prioritize quality and agility, you'll likely need help from third parties.

And, oh, surprise! This is where Jamstack comes in—the approach we use at Soluble to deliver agility, autonomy, and quality.

What is Jamstack and where to apply it

Jamstack is an architecture that separates the data feeding a website from what's displayed. In other words: it's an approach that lets you pull information from each source (CRMs, internal databases…) and build a custom website from there. The framework queries information through APIs and generates static pages served fast, cost-efficient, and environmentally conscious through CDNs or any web server.

To understand its value, imagine a corporate website with two goals: showcase your brand and offer a broad product catalog.

To meet these goals, people working on the website need to manage content—our homepage copy or a blog, for example—independently and easily. But products also need to stay in the ERP. Because duplicating information and disconnecting the web from your management system would only complicate things: strange duplicates, update headaches…

Ease for users and teams

Since Jamstack offers the possibility of multiple content sources, we streamline the work of the teams we partner with. For marketing-related data (pages, sections…) we use DatoCMS. Thanks to this solution, we can work on development while page creation or translation work moves forward. We even gain agility compared to other tools that at first glance are more efficient due to ease of use, like no-code platforms.

(Quick note on something we're really excited about: we're the first native digital branding agency with a DatoCMS partnership in Spain)

You can also connect the blog with Notion or Hubspot APIs, for example. This way, we avoid content creators having to copy and paste text between the internal tool and the CMS. Extra time to achieve high-quality results.

Keep in mind that we're not only after performance and scalability. We also want an outstanding user experience, and here we find several advantages:

• Response time is unbeatable (with the resulting SEO improvement)
• User experience is excellent because the user navigates in a client app that doesn't load other pages

The tech angle

From a development perspective, the major advantage of using this approach is that you can share components between the web we're building—a new landing page, for example—and the existing product without needing to develop two separate frontends. Developers can make changes to the web easily and quickly following the same principles as the product. By the way: reducing this kind of friction is useful for talent retention. We'll leave it at that.

The frameworks we usually use to build the web are based on React. Depending on the project, we opt for Gatsby or Next. But if you use Vue for the frontend, we can use Nuxt, which follows the same principles. Choose the adventure that saves you the most headaches.

Remember the earlier example? The stack used was this:

• NextJS as orchestrator. Framework for generating static sites (and much more) built on React. It's the key piece that queries the APIs and generates the static site.
• DatoCMS as Headless CMS. It lets us create models and blocks however we want, achieving flexibility in content.
• Vercel for infrastructure. Although static pages can be served from any CDN, Vercel offers us a more complete experience: plenty of development aids, serverless functions, and its Edge functions, focused on speed for serving dynamic and personalized content.

The cherry on top is the Design System we implemented from our Soluto Design System, which we've worked on (and continue to work on every day) with care. Thanks to this prior work, we deliver a set of components used on the site so you can reuse them in your product. This will be useful for version 2.0 of the site, where changes will be fast because they'll be built from Design System variables. No need to go page by page changing element by element. More tools to create and maintain the site.

Conclusion and bonus track

Let's recap: the primary goal is to optimize the time and energy of the people we work with. We empower them through tools that give them peace of mind because they're functional and prevent errors. Plus, we save them the headaches of working with powerful software that, in day-to-day reality, doesn't justify its complexity.

If all that weren't enough, Jamstack increases security. The attack surface shrinks because there's no database like in WordPress and requests are served through bulletproof CDNs that have no contact with the APIs.

Plus, Jamstack is a future-proof solution. Companies don't have to worry if they need to migrate the data feeding the site, because the solution is as simple as connecting to the new API and adapting the data.

Let's talk? S-)