<img src="https://imgix.cosmicjs.com/0bc852a0-827e-11eb-8b5d-951d83ec2ae4-gatsby-vs-next.png?w=10&auto=fomat" data-image="https://imgix.cosmicjs.com/0bc852a0-827e-11eb-8b5d-951d83ec2ae4-gatsby-vs-next.png?w=2000&auto=fomat" data-name="gatsby-vs-next.png" style="width: 100%;" class="fr-fic fr-dib lazy-load">Creating websites and developing web applications is arguably easier than ever thanks to the broad number of open-source frameworks at your disposal. Whether you&rsquo;re developing a simple static website or an e-commerce platform designed to scale, you have plenty of framework options, including <a href="https://www.gatsbyjs.com/">Gatsby</a> and <a href="https://nextjs.org/">Next.js</a>.Using web frameworks, you can develop viable websites much more efficiently than if you started from scratch. Moreover, by combining frameworks with a <a href="https://www.cosmicjs.com/blog/headless-cms-the-foundation-for-modern-digital-experiences">headless Content Management System (CMS)</a>,
you get the best of both worlds. That is to say, a system that enables you to create and manage content at scale with a small performance footprint, alongside all the tools you need to create user-friendly website for users to interact with.As powerful a combination as that is, you can&rsquo;t go ahead and use any framework alongside any headless CMS. Fortunately, both Gatsby and Next.js happen to be fantastic options to use alongside a headless CMS (<a href="https://www.cosmicjs.com/">such as Cosmic</a>).In this article, we&rsquo;re going to compare Gatsby vs. Next.js to help you choose the right framework for your next web project. We&rsquo;ll talk about how they handle data and render static websites. Then we&rsquo;ll go over headless CMS integration
for both frameworks. That way, you&rsquo;ll have all the information you need to make an informed decision.<h2>An Introduction to Gatsby and Next.js</h2>Both Gatsby and Next.js are among the most popular frameworks for websites and online applications. Some of the most popular websites in the world use Next.js, <a href="https://nextjs.org/showcase">including Twitch, Hulu, and Nike</a>. Gatsby doesn&rsquo;t
fall far behind, though, with plenty of household names attached to the framework, including IBM and PayPal.It would be easy to say that both frameworks are so popular because they&rsquo;re based on React. Since its launch in 2011, React has become one of the web&rsquo;s most loved frameworks. That&rsquo;s not an exaggeration either, it actually beat out <a href="https://vuejs.org/">Vue.js</a> in an internal <a href="https://insights.stackoverflow.com/survey/2019">Stack Overflow survey in 2019</a> that asked developers what their favorite framework was.Despite the fact that both Next.js and Gatsby share roots, they&rsquo;re very different frameworks with unique applications. In a nutshell, Gatsby combines React and GraphQL to provide you with a user-friendly tools that you can use for <a href="https://www.cosmicjs.com/blog/static-site-generators-explained-in-5-minutes">static website generation</a>.Next.js, on the other hand, generates HTML dynamically whenever your server gets a new request. That has an impact on website performance, but it&rsquo;s also necessary for dynamic websites. If your website has users, includes comments, or you sell products
online, static pages simply won&rsquo;t cut it.<h2>Gatsby vs Next.js: Which Framework Is Best for Static Content Generation?</h2>Now more than ever, we understand that site performance is critical when it comes to providing the best possible user experience. As much time and effort as you spend into optimizing your setup, dynamic websites, by design, can&rsquo;t match the sheer
speed of static pages.If&nbsp;you&rsquo;re working a website where you know you won&rsquo;t need to update pages often or use dynamic elements, a framework such as Gatsby is your best bet. Using Gatsby, you only load critical HTML, JavaScript, and CSS, which makes
it a steamroller when it comes to performance.The primary difference between Gatsby and Next.js is that the former generates HTML content on the client-side. That means if you use Gatsby to build your web application, your server doesn&rsquo;t need to render anything when it gets a request &ndash;
it all happens during build or runtime time.&nbsp;Next.js isn&rsquo;t necessarily a worse choice from a performance standpoint. However, the way the framework works (pardon the pun) means that whenever someone attempts to visit your website, your server generates the page that they&rsquo;ll see dynamically.It&rsquo;s important to note that during recent updates, Next.js has made a lot of strides when it comes to static content generation. Next.js 9.3 introduced support for static side generation, which means the framework now also support build-time rendering.&nbsp;That makes Next.js a great option both for dynamic and static websites. However, Gatsby still has an edge when it comes to the latter since it&rsquo;s baked into its DNA.<h2>Gatsby vs Next.js: How Each Framework Tackles Data Handling</h2>Gatsby has a structural advantage over Next.js as far as data security goes. However, that&rsquo;s because the framework doesn&rsquo;t fetch data from your server or a database. By their nature, static content generators are more secure, but that means
your options are limited if you need dynamic data handling.&nbsp;For example, if you want to enable user registration, commenting, dynamic elements, and more, then you need to expand Gatsby&rsquo;s functionality. Fortunately, that&rsquo;s possible. The framework offers a lot of plugins that enable you to connect with
CMSs such as WordPress and it also works with headless options (which we&rsquo;ll discuss in a minute).One data-handling aspect where Gatsby does shine is when it comes to images. The framework comes with massive library of plugins that you can use to extend its functionality. For example, <a href="https://www.gatsbyjs.com/plugins/gatsby-image/">Gatsby-images</a>enables
you to resize the images your visitors see at build time, which translates to faster loading times without it impacting server usage. Plus, it also includes lazy-loading functionality.To put it another way, serving a static website doesn&rsquo;t mean that your pages will look boring. As we mentioned before, plenty of household-name companies use Gatsby, and if you check out their websites, you&rsquo;ll see they&rsquo;re far from being drab.Next.js, on the other hand, is capable of data handling. However, just like with Gatsby, you need to set up a backend solution that can actually manage the data and content Next.js uses to generate pages dynamically.<h2>Why Use Gatsby or Next.js With a Headless CMS</h2>The concept of a headless CMS is simple. You take what is arguably the best part of a CMS, which is content management and generation, and use that as the backend for your web projects. That frees you up to use any approach that you want when it comes
to the frontend, which includes using React frameworks such as Gatsby and Next.js.So far, we&rsquo;ve gone over a lot of the upsides and downsides of using Next.js and Gatsby. Using the right headless CMS, you can make up for a lot of either framework&rsquo;s downsides. Let&rsquo;s break down how:<ul><li>Content creation and management.&nbsp;With the right CMS, you get powerful features that enable you to create, edit, and publish content more efficiently. You use your preferred framework for rendering, but get access to a user-friendly
CMS for everything else.</li><li>Data handling.&nbsp;CMSs provide data-handling solutions for both Gatsby and Next.js.&nbsp;</li><li>Scalability.&nbsp;Instead of generating and maintaining each page manually from the ground up, a CMS provides you with tools to ensure that you can manage data efficiently.</li></ul>The whole point of using a headless CMS in combination with a React framework is to provide you with a flexible setup that adapts to whichever type of project you intend to develop. With the right headless CMS, you can launch any type of website, from
a simple blog to an online store, and use your preferred React framework to power its frontend.&nbsp;There are plenty of options when it comes to headless CMS integrations for both Gatsby and Next.js. However, Cosmic provides built-in support and functionality for both frameworks.If you want to use Next.js, you can <a href="https://docs.cosmicjs.com/guides/#next-js">create a Next.js app</a> and install the Cosmic NPM module in a matter of minutes. Launching a project that combines Cosmic with Gatsby is equally as simple, since there&rsquo;s a <a href="https://www.npmjs.com/package/gatsby-source-cosmicjs">Cosmic source plugin</a> for the framework.With Cosmic, you get a cloud headless solution that works with most popular frameworks. The headless CMS provides both a GraphQL and a REST API, which makes it an incredibly versatile solution.<h2>When to Use Gatsby vs Next.js (And Vice Versa)</h2>Although both Gatsby and Next.js are fantastic framework options to use alongside a headless CMS, they&rsquo;re not interchangeable solutions. Let&rsquo;s go over which framework you should use depending on the type of project that you&rsquo;re working on:<ol><li>Gatsby.&nbsp;This framework&rsquo;s strength lies in its unmatched static site generating performance. Although using a headless CMS can make up for a lot of features that it doesn&rsquo;t offer out of the box, Gatsby is perhaps not the
best option for client-side applications or websites that require massive amounts of dynamic content.</li><li>Next.js.&nbsp;If you&rsquo;re working on a project that&rsquo;s about as far as you can get from static, Next.js definitely has an advantage over Gatsby. When you combine its features with a headless CMS, you get a stack that&rsquo;s
about as flexible as it gets.</li></ol>Overall, which framework to use comes down to the type of project you&rsquo;re working on. If you use Cosmic, though, you can easily switch between frameworks for each new project and still get to use the same backend.If you&rsquo;re ready to check out what a headless CMS platform can enable you to do, try out Cosmic. We offer a&nbsp;<a href="https://www.cosmicjs.com/pricing">free Personal plan</a>&nbsp;that use can use to check out the platform.

Gatsby vs. Next.js: Which Framework to Use with a Headless CMS?

Developers have long faced challenges with API standardization.REST was a big improvement over SOAP, providing greater flexibility in standardized data formats like JSON, and increased performance. Now GraphQL has emerged to provide developers a new way to interact with data services; it&#39;s proved to be a very popular alternative to REST.In this guide, we will show you the benefits and drawbacks of using REST and GraphQL to help you decide which is best suited for your development projects. <img src="https://cdn.cosmicjs.com/7d9a6f90-7080-11eb-87a2-9be5e90cdf74-GraphQLvsRest.png" style="width: 100%;" class="fr-fic fr-dib"><h2>The Struggle for Standardization: GraphQL vs. REST</h2>In the simplest sense, GraphQL and REST are <a href="https://www.cosmicjs.com/blog/what-is-graphql#graphql-vs-rest">two different ways to call functions</a> over a network. Here&rsquo;s a quick overview of each.&nbsp;<h3>What is REST?</h3>REST stands for <a href="https://www.codecademy.com/articles/what-is-rest">Representational State Transfer</a>. It&rsquo;s an API design paradigm meant to standardize web services via a series of constraints and was created in 2000. In particular, REST
is stateless and was built so that any compliant web service can interact with textual resource representations. In other words, using REST when building a web service makes it easier for clients and servers to understand each other even when one does
not have knowledge of the other.It also means that both the client side and server side can take an independent, modular approach to their evolution. As long as they follow the right format to send requests and responses, they&rsquo;ll understand each other regardless of future code
updates.<h3>What is GraphQL?</h3>GraphQL is a relatively new API query language that was developed and <a href="https://facebook.github.io/react/blog/2015/02/20/introducing-relay-and-graphql.html">open-sourced by Facebook</a> in 2012. It&rsquo;s designed to handle the complex, nested data dependencies found in modern applications. Specifically, it enables <a href="https://css-tricks.com/declarative-data-fetching-graphql/">declarative data fetching</a> to allow clients to specify exactly what data is needed from an API.GraphQL was designed with efficiency and flexibility in mind with particular attention to how web services have evolved since 2000. Since it isn&rsquo;t tied to any specific database or storage engine, developers don&rsquo;t need special knowledge of
the backend to use it. Instead, it can be applied anywhere an API is used, and it&rsquo;s backed by the code or already existing data.<h2>GraphQL vs. REST: What&rsquo;s the Difference?</h2>REST and GraphQL are fundamentally similar in that they both include the idea of resources with specific IDs. <a href="https://docs.cosmicjs.com/rest-api/">REST fetches data with GET</a> and <a href="https://docs.cosmicjs.com/graphql-api/methods-overview.html">GraphQL uses POST</a>, but they can both return JSON data in that request. They can also both handle many different types of resources and will ensure that a web API functions correctly for a given client.Although REST has been the standard for a while, GraphQL has several advantages. It also has three distinct features that developers must consider before working with it. These are:<ul><li>Different handling of endpoints:&nbsp;In REST, the endpoint is tied to the identity of a resource. That means lots of endpoints with specific shapes. In contrast, GraphQL separates them. That means one endpoint regardless of the query&rsquo;s
complexity.</li><li>Different handling of resources: In REST, the server determines the shape of the resource. When a client asks for a resource, it can result in the return of too much or too little information (called over-fetching or under-fetching). In GraphQL, the server declares what resources exist and the client asks for what it needs. That makes it easier to receive more specific data from the server.</li><li>Different
handling of caching: REST can handle caching using the GET method. However, GraphQL uses POST for fetching data, and entities are not identified by URLs &ndash; which means GraphQL lacks native caching functionality. Some libraries exist that can help developers get around this, or caching needs can be handled on the client&rsquo;s end. GraphQL generally posits that caching should be handled by clients.</li></ul><h2>So, When Should I Use REST? When Do I Use GraphQL?</h2>GraphQL and REST both have advantages that make them ideal in different situations. GraphQL incorporates a lot of REST elements but takes a more advanced approach. It&rsquo;s also a favorite among many developers working with APIs.Yet, projects still crop up where REST is better suited to handle things. In general, use REST when:<ul><li>A simpler web service is involved:&nbsp;REST was developed when web services were still relatively simple. It&rsquo;s perfectly fine to use it for projects that don&rsquo;t need a hyper-efficient way to handle endpoints or resources.</li><li>Maximum compatibility is desired:&nbsp;REST is more established and enjoys widespread support. As a result, it&rsquo;s easier to find more tools, integration, and infrastructure for a more specialized project.</li></ul>REST can accomplish the job beautifully in both of these cases. In contrast, go with GraphQL when a project must:<ul><li>Account for increased mobile usage:&nbsp;GraphQL creates more efficient data loading by minimizing the data that must be transferred over a network. That helps underpowered devices or those on poor-quality networks access web services
with minimal disruption.</li><li>Call many nested endpoints in one request:&nbsp;GraphQL solves the problem of over- or under-fetching data and can retrieve multiple resources with a single query. It can call many related functions without making multiple trips, which
makes the entire process more straightforward.</li></ul><h2>What GraphQL and REST Mean for Jamstack</h2>Another key instance to consider the advantages of GraphQL vs. REST occurs when <a href="https://www.cosmicjs.com/blog/how-to-build-a-jamstack-website">building a site using Jamstack</a>. It&rsquo;s an emerging architecture that decouples the frontend
and backend, emphasizing client-side JavaScript, reusable APIs, and prebuilt Markup. The result is the functionality of a dynamic site with the advantages (load time, security, etc.) of a &ldquo;static&rdquo; one.Both GraphQL and REST APIs can be used with Jamstack, especially when a headless CMS is involved. And while there&rsquo;s no one right answer as to which is better here, consider the following:<ul><li>Over-fetching can slow down a site:&nbsp;A REST API that returns too much data can lead to a frustrating user experience, defeating the benefit of using Jamstack in the first place.</li><li>REST still has more integrations and infrastructure:&nbsp;Although most major services are adopting GraphQL, sites leveraging highly specialized third-party services may need to use REST.</li></ul><h2>Key Takeaways When Considering GraphQL vs. REST</h2>Comparing GraphQL vs. REST? We&rsquo;ve briefly covered some instances of when one might be more effective in a project than the other.Ultimately, they&rsquo;re two different ways to accomplish mostly the same things. REST is the older of the two. It enjoys more widespread support and infrastructure. In contrast, GraphQL solves some of the long-standing shortcomings of REST, especially
by increasing the amount of control developers have over what data they call. These differences have implications when using architecture like Jamstack.Luckily, Cosmic offers both a REST and a GraphQL API. If you are not ready to make the switch to GraphQL, or just prefer REST, the Cosmic REST API gives you GraphQL-like declarative data fetching using props. See <a data-reactroot="" data-token-index="3" href="https://docs-v2.cosmicjs.com/api-reference/objects#using-props" rel="noopener noreferrer" target="_blank">the documentation</a> for more info.

GraphQL vs. REST: A Quick Guide

If you aren&rsquo;t using or experimenting with static sites, it&rsquo;s time to jump (back) onboard.Static content is the future.Given the shift away from static sites to their more dynamic counterparts, this might have seemed far-fetched not long ago. However, new methods for building websites - like Jamstack - have grown in popularity, and static sites are in the middle of a
renaissance.&nbsp;Quick Links:<ul><li dir="ltr"><a href="#what-is-ssg">What&#39;s a Static Site Generator?</a></li><li dir="ltr"><a href="#what-is-static-site">What is a Static Website?</a></li><li dir="ltr"><a href="#why-ssg">Why are SSG&#39;s becoming so popular?</a></li><li dir="ltr"><a href="#ssg-benefits">The Benefits of a SSG</a></li><li dir="ltr"><a href="#how-does-ssg-work">How do SSG&#39;s work?</a></li><li dir="ltr"><a href="#headless-ssg">SSG&#39;s and Headless CMS</a></li><li dir="ltr"><a href="#get-started-ssg">Get Started with a Static Site Generator</a></li></ul> <a href="https://jamstack.org/generators/" rel="noopener noreferrer" target="_blank"><img src="https://cdn.cosmicjs.com/170044f0-5f53-11eb-852b-43268d756f2e-Static-Site-Generation.png" style="width: 100%;" class="fr-fic fr-dib lazy-load card-shadow" alt="jamstack.org has listed the popular SSG services by category"></a>How does Static Site Generation work? Previously, static sites only had a limited number of use cases; those included mostly microsites and landing pages. While developers still rely on them for these purposes, there are also a host of new applications thanks to advancements in web architecture.A key component for bringing static sites to life is what is known as a static site generator.&nbsp;In this article, we&rsquo;ll delve into static site generators, explain how they work, their benefits, and illustrate how to combine them with a headless CMS for best results.&nbsp;<h2 dir="ltr" id="what-is-ssg">What is a Static Site Generator (SSG)?</h2>As its name suggests, a static site generator (SSG) is quite literally used to build static sites.&nbsp;A static site generator creates a fully static site from a set of HTML files and deploys it to an HTTP server.&nbsp;An SSG doesn&rsquo;t require a database or server-side rendering for execution like a traditional CMS does. Instead, content in the form of text-based files is compiled into HTML pages with the help of templates. Then the site is rendered and uploaded
to a CDN, typically a global one, so content can be delivered to visitors anywhere in the world, fast.SSGs can eliminate some of the issues which can occur when using a traditional CMS to deliver these smaller websites. Traditional CMS platforms have been around for some time, and while they are still prevalent today, the main benefit comes from working
with dynamic content.&nbsp;<h3 dir="ltr" id="what-is-static-site">What is a Static Site?</h3>In the past, most web development was done using static sites. A static site consists of HTML, CSS and frontend JavaScript. Pages&nbsp;on a static site can run dynamically, but they&rsquo;re not generated on the server. Instead, files are pre-rendered
and pre-built, then hosted on the server. They don&rsquo;t change with every user request.Each page on a static site is a separate file. In the past, if a static website needed to be updated, each page needed to be updated separately. For instance, if you wanted to update the footer on a website you built, each page would have to be updated
individually.During the early days of the internet, this was how most of the websites were created, until dynamic sites burst onto the scene.When a user visits a dynamic site, the site is rendered dynamically on the server, enabling the server to build pages on the fly. This made it easier to publish changes to websites, as well as update content. Using our footer example, with dynamic sites
you can update the footer once and those changes are then applied to the footer on all pages.The modern web supports dynamic sites because of the plethora of front-end frameworks available. Dynamic sites are handy for their personalization and omnichannel features, but, can become complex to manage, hard to scale, and the costs of maintaining
this type of website will add up.&nbsp;<h3 dir="ltr" id="why-ssg">Why Are Static Site Generators So Popular?</h3>Static site generators are growing in popularity, as static sites see a comeback. Advancements in web technology over the past decade allow developers to decouple the server (or a serverless back-end) from the front-end. Today developers of web apps can
have the speed of the lightweight static website on the front-end, and the flexibility of dynamic websites on the back-end, by using static site generators.Modern enterprises favor using SSGs for performance and security, whereas solo developers enjoy design freedom and development simplicity. Furthermore, there are a wealth of SSG options available to serve every use case. We&#39;ll examine a few in a minute.&nbsp;Let&#39;s take a closer look at the benefits of using an SSG for your next project.&nbsp;<h2 dir="ltr" id="ssg-benefits">Benefits of Static Site Generators</h2><h3 dir="ltr">Security</h3>Traditional CMS platforms are quite susceptible to hacks such as SQL injections and more attacking the holes in a server-side database. SSGs don&rsquo;t have this database, and display the page a user requests, removing the possibility of a hack.&nbsp;<h3 dir="ltr">Scalability</h3>Because SSGs are designed such that each page is ready to go upon request from the CDN, the drawback of server-response times is gone. Additionally, less computing power is required to respond to additional requests, making it far easier for the site
to handle additional traffic. The result is near-infinite scalability.<h3 dir="ltr">Speed</h3>Speed is one of the primary benefits of an SSG - again, thanks to the CDN. The precompiled files can be served directly to browsers, and&nbsp;with lower overall latency when served via a global CDN.<ol><li>Precompiled files = elimination of server-response time.</li><li dir="ltr">Closer to the request (via global CDN) = faster response time.</li></ol>&nbsp;These two factors work together to dramatically cut user load times.<h3 dir="ltr">Ease of Use and Flexibility</h3>Without the templates and page builders of a traditional CMS, which were nearly required traditional dynamic websites, through SSG&#39;s and a decoupled CMS, developers have much more freedom to design and create.&nbsp;<h2 dir="ltr" id="how-does-ssg-work">How Do Static Site Generators Work?</h2>The general procedure of static site generation is actually a simple process. At build time, before the content reaches a CDN, a static site generator or framework reads content from files; usually, this content comes in a format such as markup.Content then gets rendered to HTML based on templates and served to the CDN.Finally, the results are saved in a directory and laid out to match the source files and keep them available when requests to view the content are made.&nbsp;This simplicity is the basis for the benefits of using an SSG, the features are very limited. Enterprises especially need the flexibility to deploy either static sites or dynamic sites depending on the use cases. For some of those use cases, an SSG can
be combined with a headless CMS for best results.&nbsp;<h3 dir="ltr">The Drawbacks of SSGs</h3>The way that SSGs turn data into easily deployable static sites can be appealing for many companies. However, the feature limits of an SSG mean that marketers are limited and don&rsquo;t have the capabilities to deliver omnichannel content.Static site generators are great for developers, but marketers and content creation team members can struggle with the more technical aspects. They often don&rsquo;t provide the out-of-the-box workflows that enable valuable collaboration and input from
a team. However, there is a way around these challenges.<h2 dir="ltr" id="headless-ssg">Integrating SSGs with a Headless CMS</h2>Static site generators can be connected to a headless CMS with the help of APIs. Instead of the tightly coupled approach that traditional CMS platforms rely on, a headless CMS removes the frontend presentation layer and instead connects to multiple frontends
using APIs. One of those multiple frontends can be a static site generator. This allows you to generate a fast and flexible frontend for your content needs.&nbsp;The result is vast possibilities for SSGs: through headless cms, they can easily be used for various use cases including blogging, microsites or landing pages, documentation, and even more advanced use cases such as marketing sites and eCommerce stores.Getting the most out of your SSG will depend on what you need to use it for, so it&#39;s crucial you pick the right static site generator for that use case.&nbsp;<h3 dir="ltr" id="ssg-examples">Examples of Static Site Generators</h3><h4 dir="ltr"><a href="https://nextjs.org/" rel="noopener noreferrer" target="_blank">Next.js</a><a href="https://nextjs.org/" rel="noopener noreferrer" target="_blank"><img src="https://cdn.cosmicjs.com/a2439e20-5b4a-11eb-afa6-e9412ba0a77c-welcome-to-nextjs.png" style="width: 100%;" class="fr-fic fr-dib" alt="Everyone's favorite SSG, Next.js"></a></h4> Next.js is a lightweight React framework that can be used to generate static sites as well as do server-side rendering. Because it&#39;s created by the <a href="https://vercel.com/" rel="noopener noreferrer" target="_blank">Vercel team</a>, Next.js provides
a great developer experience no matter what type of site you want to build.&nbsp;Features: Great for building both static and dynamic sites. Versatility in how you can fetch data. The team at Vercel has put a lot of thought into the Next.js framework, creating features like <a href="https://vercel.com/blog/nextjs-server-side-rendering-vs-static-generation#incremental-static-generation" rel="noopener noreferrer" target="_blank">Incremental Static Generation</a> to reduce pre-rendering time.Drawbacks: Requires server-side knowledge from developers and can be more challenging that other SSGs.Best For: Enterprises that need to generate static sites for multiple use cases.<h4 dir="ltr"><a href="https://jekyllrb.com/" rel="noopener noreferrer" target="_blank">Jekyll</a></h4><a href="https://jekyllrb.com/" rel="noopener noreferrer" target="_blank"><img src="https://cdn.cosmicjs.com/1b19dd40-5b60-11eb-afa6-e9412ba0a77c-jekyll-quickstart.png" style="width: 100%;" class="fr-fic fr-dib" alt="Quickstart with Jekyll, an open-source, public SSG"></a> Jekyll is a Ruby-built static site generator that lets you focus on content. Jekyll is a known entity among SSGs but hasn&rsquo;t added as many features as others on the list.&nbsp;Features: Simple and blog-aware (permalinks, pages, posts and layouts all available for use). Also includes free hosting on GitHub pages.&nbsp;Drawbacks: There is a slow build. It will take a long time to generate larger sites, and there are limited built-in features.&nbsp;Best For: Smaller websites and personal portfolios.<h4 dir="ltr"><a href="https://www.gatsbyjs.com/" rel="noopener noreferrer" target="_blank">Gatsby</a></h4><a href="https://www.gatsbyjs.com/" rel="noopener noreferrer" target="_blank"><img src="https://cdn.cosmicjs.com/4d4a8710-5b60-11eb-afa6-e9412ba0a77c-gatsby-home.png" style="width: 100%;" class="fr-fic fr-dib" alt="Gatsby is the biggest next.js competitor in the SSG space"></a> Gatsby is an open source React-based framework for creating blazing fast websites and apps. It features plenty of plugins and can integrate using APIs.&nbsp;Features: Static progressive web app (PWA) generator. Ideal not just for static websites but apps that load quickly and are also available offline. Also includes a rich library of plugins.&nbsp;Drawbacks: Not ideal for sites with large volumes of content.Best Use Cases: Perfect for small and medium-sized businesses.&nbsp;<h2 dir="ltr" id="get-started-ssg">Cosmic Combines With Static Site Generators for Blazing Fast Results</h2>As static sites surge to the leading-edge of modern web development, static site generators make the build of these sites a walk in the park for developers. Enterprises and complex applications will need the right architecture to handle their content
to fully utilize static site generation.<a href="https://www.cosmicjs.com/">Cosmic</a> provides a flexible headless CMS architecture that is perfect for plugging into any static site generator. With Cosmic, it&#39;s easy to manage content by yourself or with teams. Use APIs to combine with all of the latest-and-greatest static site generators to generate static sites and other content applications.&nbsp;For more information, check out our collection of <a href="https://www.cosmicjs.com/knowledge-base/gatsby-cms">Gatsby resources</a> or <a href="https://www.cosmicjs.com/knowledge-base/nextjs-cms">Next.js Resources</a>.Or, start building right now with our quick-start guides:<ul><li dir="ltr"><a href="https://docs.cosmicjs.com/guides/#next-js">Next.js Getting Started Docs</a></li><li dir="ltr"><a href="https://docs.cosmicjs.com/guides/#gatsby">Gatsby Getting Started Docs</a></li></ul>

Static Site Generators Explained in 5 minutes

The modern web is far too complex; full of bloated websites, slow loading speeds, and vulnerabilities that can whet any hacker&#39;s appetite.&nbsp;It can be a challenge for developers to meet users&#39; ever-changing needs and build a website that checks all the boxes, yet is still fun to work with. At least, it was a challenge until Jamstack came into the picture.In this article, we&#39;ll explain:<ul><li dir="ltr"><a href="#jamstack">What is Jamstack?</a></li><li dir="ltr"><a href="#benefits">Why use Jamstack?</a></li><li><a href="#compare">Jamstack vs. Traditional Methods</a></li><li><a href="#get-started">How to get started with Jamstack</a></li><li dir="ltr"><a href="#headless">How to incorporate a Jamstack-ready CMS</a></li></ul> <img data-image="https://imgix.cosmicjs.com/eb3f4150-6a19-11eb-afd3-010bb5d66a3e-jamstack.jpg?w=1300&auto=format" src="https://imgix.cosmicjs.com/eb3f4150-6a19-11eb-afd3-010bb5d66a3e-jamstack.jpg?w=10&auto=format" style="width: 100%;" class="fr-fic fr-dib lazy-load"> <h2 dir="ltr" id="jamstack">What Is Jamstack?</h2>Jamstack is the latest breakthrough in web and app development, and much more than a trend. It&#39;s a modern architecture that offers both security and performance while delivering an improved developer experience.&nbsp;While much of the web is built on using traditional CMS platforms, Jamstack has the capacity to supersede how developers choose to build websites, and it comes with a host of benefits. From serving pre-generated pages and assets, to infinitely scaling
CDNs, to a simplified developer experience, Jamstack sites are much better equipped than traditional sites to utilize recent breakthroughs in development infrastructure.&nbsp;But what is it, what makes up a Jamstack?&nbsp;Jamstack is a technical development stack used by developers with 3 core components. A tech stack is simply a set of technologies that an organization uses when building a software application. Tech Stacks are the programming languages, frameworks, libraries, and other tools used by developers. The Jamstack&nbsp;is a modern stack using JavaScript, APIs, and Markup. This web architecture is used for building faster websites and makes them more secure and easier to scale. &nbsp;Legacy web apps must run on web servers, which slows things down and makes them susceptible to attacks. On the other hand, Jamstack websites separate the front-end user interface from the backend databases that power them, enabling pages to be pre-rendered
at run time and pushed to a CDN.&nbsp;<h2 dir="ltr">What Does Jamstack Stand For?</h2>Coined by Netlify co-founder Mathias Biilmann, Jamstack stands for JavaScript, APIs and Markup and is frequently used in building static websites. These three core components combine to provide unique traits to the stack.<h3 dir="ltr">JavaScript</h3>The web&#39;s programming language, JavaScript, is responsible for much of the popularity surrounding Jamstack and provides the dynamic elements found in Jamstack applications. Jamstack relies heavily on prebuilt static pages and assets for the front-end.
These pre-rendered files are served from a CDN directly to the browser.&nbsp;JavaScript is then used in conjunction with APIs to communicate with the backend services and enhance these static files, transforming them into experiences.&nbsp;<h3 dir="ltr">APIs</h3>APIs provide integration capabilities for Jamstack sites, enabling them to connect with third-party services to improve functionality.<h3 dir="ltr">Markup</h3>Markup provides the formatting code for the static sites pre-rendered at build time before a Jamstack site is deployed to a CDN.<h2 dir="ltr" id="benefits">Benefits of Jamstack</h2>Developing modern websites using Jamstack architecture provides some benefits when compared to legacy web applications.&nbsp;<h3 dir="ltr">Heightened Security</h3>Legacy web development applications usually include a tightly coupled database. Databases are server-side technologies, which provides a large area for hackers to attack using various methods, including SQL injection. In Jamstack, there is no database.
You can still use one, but it&#39;s connected via API. With server-side processes handled by APIs, there is less area to attack, resulting in heightened security.&nbsp;<h3 dir="ltr">Increased Speed</h3>Files in a Jamstack are prebuilt and served over a CDN, thus, Jamstack sites are blazing fast. This increase in speed leads to happier users, lower page load times, and higher user engagement. This speed is not limited to front-facing content - flexible
backends make applications faster to market and circumvent legacy platforms&#39; limitations.&nbsp;<h3 dir="ltr">Optimized Scalability</h3>The ability to serve files over a CDN means less server support is required to manage a Jamstack site. Deployment requires that the files be sent to a CDN, enabling them to be served anywhere, facilitating the scalability that legacy applications can
sometimes struggle with.&nbsp;<h2 dir="ltr" id="compare">Jamstack vs LAMPstack vs MEANstack</h2>The Jamstack approach differs from other software development stacks such as LAMPstack or MEANstack in that they are made up of different components. LAMPstack includes Linux, Apache, MySQL and PHP, and is used for Linux hosted websites. On the other
hand, MEAN is an acronym for MongoDB, ExpressJS, AngularJS and Nodejs and is used for building dynamic sites and web applications.Both of these stacks include connections to databases, and while LAMP and MEAN have specific applications where they will be most appropriate, Jamstack is quickly overtaking them.<h2 dir="ltr" id="get-started">Getting Started With Jamstack</h2>For Jamstack to be effective, there are five components required: A JavaScript framework, a static site generator, a headless CMS, a content delivery network, and services to connect via APIs.&nbsp;<h3 dir="ltr">Choose The Right JavaScript Framework for You</h3>JavaScript forms the backbone of Jamstack development and provides a wealth of frameworks for developers to choose from. JavaScript is used for everything from single-page applications and progressive web applications. Most developers building for the
web will already be familiar, but popular starting points are Angular, Vue, and React.&nbsp;<h3 dir="ltr">Generate Static Sites with an SSG</h3>The next step in getting up and running with Jamstack is picking the right static site generator to launch your static sites. SSGs create static sites from a set of HTML files and deploy them to a server or CDN. In keeping with the popularity of JavaScript
frameworks, the likes of Gatsby and Next have sprung up to offer static site generation and more. Still, there are also a host of other tools available that can be used for the same purpose.&nbsp;<h3 dir="ltr">Add A Headless CMS&nbsp;</h3>Next, if you want to get the most out of your Jamstack website, you need to add a <a href="https://www.cosmicjs.com/blog/best-headless-cms-list">headless CMS</a> to the equation. A headless CMS does away with traditional CMS platforms&#39; legacy architecture and provides freedom for developers to choose their front-end interface.&nbsp;A headless CMS includes a backend repository for storing content and connects to different front-ends by using APIs. However, a headless CMS can consist of content authoring tools and a clean interface that can be used by less technical teams.&nbsp;Jamstack is a developer-focused architecture. However, the end-user will still rely on content input from marketers and other non-technical personnel. For enterprises that want to use Jamstack websites for multiple purposes, the ability to connect to
a headless CMS with APIs and then let that CMS manage the content experience is pivotal.&nbsp;<h3 dir="ltr">Deploy Your Digital Experience to a CDN</h3>Next is the CDN where a Jamstack site is deployed. Building a beautiful experience with your static site generator and headless CMS wouldn&#39;t be half as good if there was nowhere to host it. For Jamstack sites, there are a host of options including
Netlify, Vercel and Cloudflare.<h3 dir="ltr">Connect to Services with APIs</h3>Finally, you can get the most out of your Jamstack site by connecting to different services with APIs to achieve more functionality. If you need to integrate an eCommerce solution to your Jamstack site or enable videos or comments and interactivity on
your website, then simply connect to the appropriate service using APIs.<h2 dir="ltr" id="headless">Cosmic: A Jamstack-ready Headless CMS</h2>Choosing a headless CMS to pair with your Jamstack site can be difficult, especially as any headless CMS can theoretically function to build Jamstack sites. However, you want to maximize the quality of your Jamstack sites, while providing a comprehensive
interface for your developers and an intuitive one for your content creators. In that case, you need a Jamstack-ready headless CMS.&nbsp;<a href="https://www.cosmicjs.com/">Cosmic&#39;s headless CMS</a> architecture provides the tools you need to manage content for a Jamstack-powered site or web application and even includes starters and templates to get you off the ground. These templates and examples can fit multiple use cases, no matter your needs.&nbsp;For example, you can use Cosmic and database and server to store your products as you construct a <a href="https://www.cosmicjs.com/apps/gatsby-ecommerce-website">Gatsby powered eCommerce website</a> or connect with Cosmic using GraphQL to launch a <a href="https://www.cosmicjs.com/apps/react-static-blog">React static site</a>.&nbsp;Learn more about getting started with Jamstack by checking out our Jamstack<a href="https://www.cosmicjs.com/apps?q=Jamstack">&nbsp;applications</a>.&nbsp;

Jamstack Explained In 5 Minutes

In the modern world, companies must adapt to new realities constantly, and quickly. Changes are happening as a result of unique customer preferences, which in turn are driven by an increase in new communication channels including IoT devices, wearables, and incessant new mobile applications.&nbsp;<img src="https://imgix.cosmicjs.com/9caa7b10-db01-11ea-84a8-4b73110d28e6-headless-CMS.png" data-name="headless CMS.png" style="width: 100%;" class="fr-fic fr-dib" alt="a Headless CMS like Cosmic sets up your content to deploy to any final destination with minimal additional effort">The rapid addition of new channels has a tremendous impact on the modern digital experience - the interactions customers and brands have with each other across the digital landscape. The quest for an optimal digital experience has increased our focus on the customer. Customers of today, and in the future, won&#39;t be satisfied with being entertained or educated with content; increasingly they want personalization and convenience.&nbsp;For businesses that wish to compete, especially at the enterprise level, the table stakes for a digital presence are more complex than just &quot;having a website.&quot; In fact, modern digital experiences often demand multiple websites, applications, and endpoints for customers. Customers expect nothing less than super-fast and hyper-personalized experiences, while internally, both marketers and developers have a need for speed, autonomy, and freedom to innovate. From a business perspective, all of the above needs to happen in a way that lowers costs and saves time.It&#39;s enough to make business owners throw in the towel, retrogress, and pour their marketing budget into direct mailers.Fortunately, there are better solutions available to meet the complex digital needs of today, and as we move into the future, we believe a headless approach will ultimately become the standard for managing content across all these channels effectively.<h2 dir="ltr">Managing Digital Experiences: Out With The Old...</h2>A content management system (CMS) has long been a pivotal component for a successful digital strategy. It&rsquo;s impossible for brands to effectively create, edit, manage, store, and deliver digital content without one. But, it&rsquo;s not the only piece of technology required to effectively manage digital experiences.Analytics, marketing automation, and digital asset management are just a few of the additional tools brands depend on. These additional tools have a major impact - not only on the type of CMS you require, but also on the software systems you implement and even the core business logic of your applications.So, how have companies managed this historically?<h3 dir="ltr">The Old Suite Approach</h3>For enterprise companies, in particular, a suite approach has often been the ideal approach - one vendor to handle all of your needs, from content management to email marketing and most other things within the marketing department.&nbsp;To build digital experiences, companies would then incorporate a legacy CMS solution to manage a corporate website and blog. For some small companies, this approach can still work; after all, WordPress still powers <a href="https://w3techs.com/technologies/details/cm-wordpress">over 30% of the internet</a>. However, one issue that brands eventually run into is that legacy CMS solutions are rigid - they restrict and define the digital experience you can create.One example would be WordPress being largely incapable of managing mobile application data. Its responsive web design is okay. But if you want to manage content for more complex applications? Wordpress can&#39;t hack it - or requires your dev team to build proprietary logic just to make your solution &quot;fit&quot; WordPress infrastructure.While these platforms provide easy to use templates that make posting content to one or two endpoints easy, they fall short of providing consumers with the extensible, omnichannel experiences that they crave. On the backend, your integrations with other business tools become increasingly difficult to maintain &nbsp;There are too many restrictions on companies; something needs to change about the way CMS is implemented.&nbsp;<h3 dir="ltr">The Modern Best-of-Breed Approach</h3>That centralized solution is usually a headless CMS. Headless technology gives teams more flexibility to choose the best tool for their jobs, in addition to better options for distributing content across multiple channels.As one example, it&rsquo;s quite common for marketing teams to rip and replace their martech software. In fact, according to ChiefMarTech, <a href="https://chiefmartec.com/2019/12/marketers-rip-replace-martech-apps/">83% of marketers replace a martech app each year</a>. CRM tools, marketing automation, analytics, and business intelligence software are regularly pulled out, plugged in, and replaced as businesses scale or improve solutions.A flexible and unbiased headless CMS makes connecting (and re-connecting) these tools seamless, producing a harmonious frontend experience for users and increasing development velocity on the backend.<h2 dir="ltr">The Role of The Headless CMS</h2>How does headless accomplish this?Since traditional content management systems lack the functionality and flexibility to do it all, headless platforms don&rsquo;t attempt to be an all-in-one solution.Headless CMS act as the central repository within a best of breed stack, focusing primarily on managing a brand&rsquo;s content lifecycle. Increased focus on flexible API functionality allows companies to connect to multiple frontend channels and integrate the backend with whichever business tools they need, to build the experience they envision.<h3 dir="ltr">Headless Architecture: Removing Backend Restraints</h3>Whereas in a legacy platform, the frontend and backend systems are tightly coupled together, a headless CMS has a decoupled approach that separates the backend repository from the frontend delivery layer.&nbsp;So, teams still have a repository that allows them to create, store, manage and edit content and then can connect to any frontend channel they need to with the help of APIs. This removes the handcuffs from developers especially. Developers have more freedom to optimize the frontend experience for customers, using any language they want, and with more precise optimizations for unique frontends.Whether brands need to deliver to something traditional like a website or a mobile device, emerging channels like a VR device or smartwatch, or a channel that doesn&#39;t exist yet, a headless CMS ensures your core data is readily deployable.Read More: <a href="https://www.cosmicjs.com/blog/headless-cms-explained">Headless CMS: Everything Explained&nbsp;</a> <h3 dir="ltr">Free-flowing Content for Free-flowing Experiences</h3>The second distinguishing feature of headless CMS from other content management systems is the collaboration tools that enable IT, teams and marketers, to work together fluidly. For instance, thanks to the frontend agnosticism of a headless CMS, developers are free to use different frontend frameworks for different channels and experiences, optimizing each channel for speed and usability in the process. No matter where the content is heading, marketers can use the same user-friendly dashboards, workflow management tools, content authoring environments, and content preview feature.Here&#39;s a real-world example of how this works: Medical Realities, a platform that delivers real and immersive experiences through VR, needed a way to deliver content to devices to teach surgeons using interactive models. With the help of Cosmic, a headless CMS, their developers quickly created content models that would allow their non-technical users to manage complex medical VR content and deliver it to the headsets.&nbsp;Read More: <a href="https://www.cosmicjs.com/case-studies/medical-realities-delivers-vr-surgical-content">Medical Realities Case Study</a><h2 dir="ltr">Cosmic: A Faster Way to Manage Modern Content Experiences</h2>The modern digital experience is no longer limited to the corporate website or even the mobile device. It includes new and emerging channels such as VR headsets, smartwatches, video games, and more. Brands need a way to create and manage these experiences their customers crave quickly, and a central system that can coexist and integrate seamlessly with other tools in the Martech stack.Cosmic is <a href="https://www.cosmicjs.com/headless-cms/">a headless CMS platform</a> that enables teams to build these modern experiences by providing the new tools that developers need to create their own front ends or extend their capabilities with APIs. It also gives marketers an easy-to-use content editing experience that makes generating content for these experiences possible.&nbsp;

Headless CMS: The Foundation for Modern Digital Experiences

<img src="https://cdn.cosmicjs.com/5a67d0e0-54e1-11eb-8ef3-2b509a9da61d-merge-request.jpg" style="width: 100%;" class="fr-fic fr-dib">Traditionally, CMS systems have long relied on a draft / published model for content updates within a single database. And for many use cases this is fine. But what we&rsquo;ve noticed with our users, is that they want to create multiple environments to stage updates for review, preview the changes, then push the changes to production.The problem with this is that there wasn&#39;t an easy way to merge content changes between environments in review stages (such as Development, Staging, Production). This is especially true when you want to make bulk edits to lots of content.It&#39;s for this reason, we&#39;re excited to announce a huge leap forward for content management...<h3> Introducing&nbsp;Merge Requests</h3>What are Merge Requests? Merge Requests is a new feature that enables Git-like workflows between your Cosmic Bucket environments. With Merge Requests, you are now able to merge content between Bucket environments with bulk edits, preview, and approval workflows. Here&#39;s how it works... Edit Content -&nbsp;A content editor creates or edits content in a source Bucket.<video autoplay="" class="fr-draggable fr-fvc fr-dvi card-shadow video-popout lazy-load" data-video="https://cdn.cosmicjs.com/eada1510-51ea-11eb-ba68-91d1fc5c8777-add-content.mp4" loop="" muted="" playsinline="">Your browser does not support HTML5 video.</video> Create Merge Request&nbsp;-&nbsp;The content editor then creates a merge request from the source Bucket into a target Bucket. Diffs are displayed in a list for review.<video autoplay="" class="fr-draggable fr-fvc fr-dvi card-shadow video-popout lazy-load" data-video="https://cdn.cosmicjs.com/de4dc920-51f1-11eb-9dee-df51ce912356-add-merge-request.mp4" loop="" muted="" playsinline="">Your browser does not support HTML5 video.</video> Request Approvals -&nbsp;Team admins may be invited to review and approve the updates.<video autoplay="" class="fr-draggable fr-fvc fr-dvi card-shadow video-popout lazy-load" data-video="https://cdn.cosmicjs.com/02ce92c0-51f2-11eb-9dee-df51ce912356-add-reviewer.mp4" loop="" muted="" playsinline="">Your browser does not support HTML5 video.</video> Approve and Merge Changes &nbsp;-&nbsp;The team admin can then use preview links to preview changes on the user-facing application or website. Once all approvals are submitted, the admin merges the request into the target Bucket.<video autoplay="" class="fr-draggable fr-fvc fr-dvi card-shadow video-popout lazy-load" data-video="https://cdn.cosmicjs.com/efec6220-5211-11eb-8ee7-1df9cfd96d21-approve-merge.mp4" loop="" muted="" playsinline="">Your browser does not support HTML5 video.</video> Revert Changes -&nbsp;If there is a need to revert, a backup will automatically be made prior to the merge, and you will be able to restore to this backup instantly, and at anytime in the future. (Automatic backups will need to be enabled
on the Production Bucket)<video autoplay="" class="fr-draggable fr-fvc fr-dvi card-shadow video-popout lazy-load" data-video="https://cdn.cosmicjs.com/49e25230-5212-11eb-aa1f-55f7cf15d947-revert.mp4" loop="" muted="" playsinline="">Your browser does not support HTML5 video.</video> When is it available? Today. How much does it cost? It&#39;s free on every Cosmic account.<h3> </h3><h3>Next Steps</h3>There&#39;s a few ways to get started and learn more:<ol><li>Install the Starter - Install the <a href="https://www.cosmicjs.com/apps/next-merge" rel="noopener noreferrer" target="_blank">Next Merge starter</a> which includes merge request preview capabilities.</li><li>Preview API -
<a href="https://docs.cosmicjs.com/" rel="noopener noreferrer" target="_blank">View the docs</a> to get more information on how to implement the merge request preview content for your applications. Currently available via the REST API and <a href="https://www.npmjs.com/package/cosmicjs" rel="noopener noreferrer" target="_blank">NPM module</a>.</li><li>Dashboard -
<a href="https://app.cosmicjs.com/login" rel="noopener noreferrer" target="_blank">Log into your Cosmic</a> dashboard and click the merge request icon on any Bucket.</li></ol><h3> Conclusion</h3>Merge Requests enables your team to move beyond the rigid draft / publish content process into a more fluid, collaborative, and comprehensive workflow.We hope you enjoy using Merge Requests to optimize your content management workflows. This feature is still a work in progress (currently in beta), and we would greatly appreciate any feedback or bug reports. If you have any questions, please feel free to <a href="https://www.cosmicjs.com/community" rel="noopener noreferrer" target="_blank">reach out on Slack</a>, let us know what you think <a href="https://twitter.com/cosmicjs" rel="noopener noreferrer" target="_blank">on Twitter</a>, and join the conversation around this feature <a href="https://www.producthunt.com/posts/cosmic-merge-requests" rel="noopener noreferrer" target="_blank">on Product Hunt</a>. Cheers, Cosmic Team

Introducing Merge Requests

How to Choose the Best CMS: Guide + PDF [2021]

<a href="https://www.cosmicjs.com/knowledge-base/graphql-cms"><img src="https://imgix.cosmicjs.com/4b3277b0-e1aa-11ea-88aa-0bae7ba3a376-graphql-cms.jpg?w=1200 &auto=format" style="width: 100%;" class="fr-fic fr-dib fr-rounded" alt="GraphQL CMS"></a>Cosmic provides a&nbsp;<a href="https://www.cosmicjs.com/knowledge-base/graphql-cms">GraphQL Headless CMS API</a>&nbsp;to power content for your websites and apps.The lack of standardization for APIs has been a challenge that software developers have faced for a long time.&nbsp;A&nbsp;<a href="https://smartbear.com/resources/ebooks/the-state-of-api-2019-report/" rel="noopener noreferrer" target="_blank">study by SmartBear</a>&nbsp;found that 35% of API providers feel their documentation is poor or needs improvement. The problem is that inconsistent APIs increase the learning curve for developers and can slow development velocity. But perhaps poor API documentation is not entirely the fault of those doing the writing.&nbsp;GraphQL aims to solve the difficulties of API standardization and documentation with its straightforward querying language, technology-agnostic backend support, and self-documenting schema system. That&rsquo;s why many development teams are opting for GraphQL over other API technologies that have a lack of widely-used industry standards.<img src="https://cdn.cosmicjs.com/b704d970-e190-11ea-88aa-0bae7ba3a376-graohql-trends.png" style="width: 601px;" class="fr-fic fr-dib"> While REST and GraphQL are both API paradigms that enable the sharing of data over the internet, there are some key differences developers should be aware of. Let&rsquo;s take a deep-dive into GraphQL and whether it&rsquo;s right for your project.<h2> Getting to Grips with GraphQL? Here&rsquo;s What You&rsquo;ll Find in This Article:</h2><ol><li style="font-weight: 400;"><a href="#what-is-graphql">What is GraphQL?</a></li><li style="font-weight: 400;"><a href="#graphql-vs-rest">GraphQL vs REST</a></li><li style="font-weight: 400;"><a href="#exploring-graphql-benefits">Exploring Some GraphQL Benefits</a></li><li style="font-weight: 400;"><a href="#3-graphql-examples">3 GraphQL Examples: What is Graphql Used For?</a></li><li style="font-weight: 400;"><a href="#is-graphql-right-for-your-project">Is GraphQL Right For Your Project?</a></li></ol><h2 id="what-is-graphql"> What is GraphQL?</h2><img src="https://cdn.cosmicjs.com/a60bc2e0-e1aa-11ea-88aa-0bae7ba3a376-GraphQL.png" style="width: 200px; float: right; margin: 10px 0 10px 20px;" class="fr-fir fr-dii"><a href="https://graphql.org/">GraphQL</a> is an API querying language that is both language and database agnostic. That means developers can make standardized data queries to a GraphQL service without any knowledge of the backend implementation. Developers describe the data they need, and the API handles the task of fetching the appropriate data behind the scenes.But let&rsquo;s take a step back and examine the origins of GraphQL.&nbsp;In 2012, GraphQL began as an internal Facebook project led by co-creators Lee Byron, Nick Schrock, and Dan Schafer. Their aim was to
<a href="https://nordicapis.com/interview-with-graphql-co-creator-lee-byron/" rel="noopener noreferrer" target="_blank">build a better Facebook News Feed API</a>:<blockquote>&ldquo;The three of us got to work trying to figure out how to build a better News Feed API and we just got super far down the rabbit hole,&rdquo; Byron told Nordic APIs. &ldquo;I think just a month or two of iterative improvements on what started as a prototype enfolding all of our ideas ended up being the first version of GraphQL.&rdquo;</blockquote>In 2015, Facebook publicly released GraphQL, and in 2018, the GraphQL project was moved from Facebook to the GraphQL Foundation, hosted by the Linux Foundation, a non-profit company.Beyond the standardized querying language, GraphQL is a server-side runtime and type system. On the backend, a GraphQL service needs to be set up to validate and execute queries. This requires a schema that defines the object types and fields available and resolvers which handle the implementation details for retrieving the data on the backend.<h2 id="graphql-vs-rest"> GraphQL vs REST</h2>GraphQL&mdash;similar to REST APIs&mdash;leverages HTTP to send and receive data. The key difference is that different REST requests are created based on HTTP methods and endpoints, while GraphQL queries are shaped within the JSON body of the request. <img data-action="zoom" src="https://cdn.cosmicjs.com/49254280-e26e-11ea-ad85-b3e5c5f45697-cosmic-graphql-cms.png" style="width: 100%;" class="fr-fic fr-dib" alt="Cosmic GraphQL API">Cosmic <a href="https://docs.cosmicjs.com/graphql-api/" rel="noopener noreferrer" target="_blank">GraphQL API</a>. Click to zoom.GraphQL Request For example, take the body of this GraphQL request:<pre>{
 person {
 firstName
 lastName
 }
}</pre>With GraphQL, developers can define which data they want to get returned (first name and last name) by specifying each field within the object (person). The resulting response would look like this:<pre dir="ltr">{
 &quot;data&quot;: {
 &quot;person&quot;: {
 &quot;firstName&quot;: &quot;John&quot;,
 &quot;lastName&quot;: &quot;Smith&quot;
 }
  }
}</pre>This results in another benefit that GraphQL has over REST is the ability to retrieve multiple resources through a single query, whereas REST requires a new query to be made for each resource.The GraphQL response generally has the same structure as the request. Queries are interactive, so any changes to fields in the request body will dynamically change the response as well.REST Request This differs from REST APIs, which are based on resources. For example, here&rsquo;s a similar request to a REST endpoint:<pre dir="ltr">GET https://sample.com/person/1</pre>In the case of REST, developers need to specify the location of the resource on the backend using the correct endpoint (/person) and path parameters (/1). The request body is blank because REST endpoints typically return all the data fields a resource contains.The resulting JSON body could look something like this:<pre>{
 &quot;firstName&quot;: &quot;John&quot;,
 &quot;middleName&quot;: &quot;Andrew&quot;,
  &quot;lastName&quot;: &quot;Smith&quot;,
 &quot;email&quot;: &quot;jas1992@gmail.com&quot;,
 &quot;relationshipStatus&quot;: &quot;single&quot;
}</pre>As you can see, REST APIs are much less flexible, and frontend developers have little control over the response they get back. The REST server returns what backend developers have decided the endpoint should give as a response.<h2 id="exploring-graphql-benefits"> Exploring Some GraphQL Benefits</h2>If you&rsquo;re still asking,&nbsp;&ldquo;why use graphql over REST?&rdquo;, read on. 
 There are a number of areas where GraphQL has the upper hand over most REST services.Standardization: For one, GraphQL is simple to use. There&rsquo;s no industry standard for REST APIs, so developers are forced to sift through documentation to understand any new API they need to use. With GraphQL, however, developers only need to learn the standardized querying language once, and they can work with any application or software that supports the technology.Declarative: In addition, the ability to control the response from an API request enables developers to avoid over fetching or under fetching data. These situations waste bandwidth by providing more information than necessary or requiring multiple API calls to get all the data needed. GraphQL enables developers to pull all the required fields across multiple objects within a single request.Self-documenting: Finally, GraphQL is introspective. That means the API is self-documenting and predictable for developers to use. Since the GraphQL server requires a pre-defined schema, developers can easily explore the data available using manual queries or a tool like&nbsp;
<a href="https://github.com/graphql/graphiql" rel="noopener noreferrer" target="_blank">GraphiQL</a>. With REST endpoints, it&rsquo;s up to the backend developers to document any changes they make or leverage a tool like
<a href="https://swagger.io/" rel="noopener noreferrer" target="_blank">Swagger</a>&nbsp;to generate the API documentation automatically.<h2 id="3-graphql-examples"> 3 GraphQL Examples: What is GraphQL Used For?</h2>With the benefits of GraphQL clear, let&rsquo;s look at some examples of several types of GraphQL queries.&nbsp;<h3>Pulling Data</h3>When developers need to pull data from the backend, it&rsquo;s typically called a GET request in REST terms. With GraphQL, these are queries that look like this:<pre dir="ltr">query GetTitles {
 allBooks {
 books {
 # retrieves title of all books
    title
 } 
  }
}</pre>GraphQL queries can be anonymous or named (GetTitles), and comments can be included using the # character. These features, and many others, helps to clarify what the query&rsquo;s expected response should be.&nbsp;In this case, the response would be similar to this:<pre dir="ltr">{
 &quot;data&quot;: {
  &quot;allBooks&quot;: [
 {
 &quot;title&quot;: &quot;The Martian&quot;
      },
      {
 &quot;title&quot;: &quot;The Great Gatsby&quot;
 }
    ]
  }
}</pre><h3>Editing Data</h3>If developers need to add, modify, or delete data, they&rsquo;ll send a POST, PUT/PATCH, or DELETE request to a REST endpoint. With GraphQL, however, modifying data requires a mutation request. Here&rsquo;s an example of creating a mutation:<pre dir="ltr">mutation createBook(title: &quot;The Old Man and the Sea&quot;, author: &quot;Ernest Hemingway&quot;) { }</pre>This simple mutation will create a new book object on the backend with the specified title and author. If the mutation was successful, we&rsquo;d get a response that includes a unique identifier for the new data object created on the backend.<pre dir="ltr">{ &quot;data&quot;: { &quot;createBook&quot;: &quot;sqdYsdf&quot; } }</pre>As with queries, developers can shape the responses they get from mutations. For example, it&rsquo;s possible to request certain fields to be included in the response along with the unique identifier, such as the title, author, or date created.<h3>Subscriptions</h3>Along with simple queries and mutations, GraphQL supports&nbsp;<a href="https://graphql.org/learn/queries/#operation-name" rel="noopener noreferrer" target="_blank">subscriptions</a>
, which enable a frontend app to retrieve real-time data updates from the server.&nbsp;For example, if a frontend app needed to keep a running list of books as they&rsquo;re added to its database, developers could set up a subscription event using the following request:<pre dir="ltr">subscription {
 new_books {
 id
 title
 author
 date_added
 }
}</pre>Once the subscription is set up, the server will automatically push new data to the frontend. The responses will include all the fields in the initial subscription request.&nbsp;It&rsquo;s important to note that subscriptions are sent to a websocket endpoint because HTTP connections typically close once a response is returned. Instead, the websocket connection, and in turn, subscription remains open until the frontend requests to unsubscribe or an error occurs.&nbsp;Without subscriptions, it&rsquo;s incredibly difficult to build real-time functionality. It often requires an approach called polling, which involves sending periodic requests to an API. But this approach is inefficient and could risk hitting request limits. Subscriptions, therefore, are a powerful way to ensure frontend applications receive data updates in real-time without requiring polling.<h2 id="is-graphql-right-for-your-project"> Is GraphQL Right For Your Project?</h2>While GraphQL adoption is growing, many development teams still opt for REST APIs when integrating new frontends with their CMS because it&rsquo;s an API paradigm they&rsquo;ve been familiar with for a while. GraphQL, however, is ideal for simplifying development, reducing bandwidth usage, and reducing the time-to-market for content-driven apps. In the end, either technology can fuel static site generators, mobile apps, websites, and more.The good news is that with&nbsp;Cosmic&nbsp;you don&rsquo;t need to choose between&nbsp;<a href="https://docs.cosmicjs.com/rest-api/" rel="noopener noreferrer" target="_blank">REST</a>&nbsp;and&nbsp;<a href="https://docs.cosmicjs.com/graphql-api/" rel="noopener noreferrer" target="_blank">GraphQL</a>
. The&nbsp;<a href="https://www.cosmicjs.com/headless-cms">headless CMS</a>&nbsp;supports both technologies, so brands can launch content-rich apps faster, without worrying about backend compatibility. And if you&#39;re not quite ready to make the change to GraphQL, Cosmic&rsquo;s REST API also supports a GraphQL-like feature that allows you to declare what properties are returned with the response using&nbsp;
<a href="https://www.cosmicjs.com/changelog/customize-rest-api-response-object-metafields-search">&quot;props&quot;</a>.Consider Cosmic to fuel your digital experiences, and check out our&nbsp;<a href="https://www.cosmicjs.com/apps?languages=GraphQL">GraphQL-driven demos</a>.

Start building today