JAMStack FAQ – What? Why? And Why Not?
Tags: jamstack, webdev
Published: 2021-02-09 17:18:53

<!-- wp:heading -->
<h2>Introduction</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Before we jump to the FAQ part, I want you to know that no matter if you are running a web shop, or just need a website to present your product, a <a href="https://pagepro.co/" target="_blank" rel="noreferrer noopener">modern web development</a> and <a href="https://jamstack.org/" target="_blank" rel="noreferrer noopener nofollow">JAMStack</a> is here to help you out with most of the performance issues yo've been facing so far.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Seems like the need for <a href="https://pagepro.co/jamstack-development.html" target="_blank" rel="noreferrer noopener">SEO efficiency, speed, customized user experience, and faster development</a> have never been so important, as the pandemic events pushed and forced a lot of local businesses to search for digital transformation, or even the entire business renovation.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>And JAMStack is here to make things easier.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Thanks to rapidly changing technologies, we are able to adapt them to any kind of business and solve most of the problems we were struggling with much easier and faster.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>People ask more and more questions around JAMStack, so we decided to create an FAQ, and present JAMStack more deeply to help you learn, understand, and find the possibilities of adapting it to your own business. <br><br></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>What is JAMStack?</h2>
<!-- /wp:heading -->

<!-- wp:image {"id":4940,"width":228,"height":63,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large is-resized"><img src="https://pagepro.co/blog/wp-content/uploads/2020/11/jamstack-full-logo-light.png" alt="Jamstack logo" class="wp-image-4940" width="228" height="63"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>The term JAMstack is a mashup of JavaScript, APIs, and Markup, but you don’t always need JavaScript to build static pages (f.e. Hugo or Jekyll are not JS)</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>As a web development architecture, it’s there to make scaling up your website easier, as it means you’ll no longer have to rely on a web server and all the dynamics during the request / response cycle will be handled by… ok, <strong>JavaScript</strong> let’s say.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>All server-side databases or database actions are then abstracted into reusable <strong>APIs</strong> and accessed through HTTPS.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Finally, <strong>Markup</strong> is something that should be pre-built at deploy time.<br><br></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Benefits of using JAMStack</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>JAMStack brings a lot of benefits, starting from being totally free and unlimited in user experience customization, through speed up until SEO and safety.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Let’s list and explain them shortly.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Pros of using JAMStack</h3>
<!-- /wp:heading -->

<!-- wp:list -->
<ul><li><strong>Great User Experience</strong> - JAMStack websites are static, which means they are extremely fast and work with a blink of an eye. All the data are prerendered, so you don’t have to wait for any response from the server in order to display data.</li><li><strong>Better Google Ranks</strong> - a static nature of JAMStack is making it extremely easy for Google spiders to crawl through the website. And that's what Uncle G. loves and favors.</li><li><strong>Total Safety</strong> - again, being static means being disconnected from the backend, in other words, there is no room for pirates, as they will only face the picture of a ship, not the ship itself.</li><li><strong>Traffic Resistance</strong> - JAMStack websites can be served entirely from CDN (Content Delivery Network) so there is no need for additional logic or workflow. Using CDN means also simpler deployments, built-in redundancy and awesome load capacity.</li><li><strong>Headless Integration</strong> - if you haven’t heard of headless integrations, it’s a new way of improving integration with backend platforms like ecommerce platforms, or CMSes. If you own a webshop, or work with a content management system, and you are becoming frustrated by the lack of editing options, JAMStack is here to help.</li><li><strong>Many Ready-to-use Features</strong> - thanks to declarative nature, you can easily copy and use many features and solutions that have been built already, which can significantly improve the development time.</li><li><strong>Cheap and portable hosting</strong> - hosting static pages is much cheaper, and sometimes even free! More that that, you can also use any hosting you like, as well as change the hosting provider with no effort.</li><li><strong>Easier Maintenance</strong> - A static website doesn’t require an administrator and 24/7 service to keep it running. </li><li><strong>Copy, Paste, Edit</strong> - frameworks like Gatsby, or Next.js are built upon React - a component based JS library, that is making it absolutely easy for you to scale up and down your pages. Building a website is more like building blocks now. Simply copy, paste, edit.</li><li><strong>Developers love it </strong>-  in other words, it's been made to make work easier. It will be much easier to find <a href="https://pagepro.co/jamstack-development.html" target="_blank" rel="noreferrer noopener">JAMStack developers</a>, as developers want to work with hot technologies.<br><br></li></ul>
<!-- /wp:list -->

<!-- wp:heading {"level":3} -->
<h3>Cons of using JAMStack</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Is JAMStack a definite web development answer? Well, no. At least not yet.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>There are still few areas that needs attention, or improvement.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>One of the main one is manual rendering, yet Next.js framework already nailed it, by building a hybrid of SSG and SSR.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>However, there are still other things to be aware of:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><strong>Coding is required</strong> - If you want to make any updates on your websites or landing pages, you will need the help of a qualified developer.</li><li><strong>Some Technologies are not plugin friendly</strong> - great user experience and total freedom in customization means mostly that you won’t be able to simply use a plugin. All the work needs to be coded. Gatsby is an exception here.</li><li><strong>Not really dynamic friendly</strong> - Static pages are perfect for text and images. If you want to use any dynamic features on your website, it will demand more resources, as dynamic features are not the part of JAMStack architecture.</li><li><strong>If you know more, leave it in the comment please! </strong><br><br></li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p><br><br></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Difference between JAMStack and Traditional Workflow</h2>
<!-- /wp:heading -->

<!-- wp:table {"hasFixedLayout":true,"className":"is-style-regular"} -->
<figure class="wp-block-table is-style-regular"><table class="has-fixed-layout"><tbody><tr><td class="has-text-align-center" data-align="center"><strong>Traditional Workflow</strong></td><td class="has-text-align-center" data-align="center"><strong>JAMstack workflow</strong></td></tr><tr><td class="has-text-align-center" data-align="center"><strong>Development</strong><br>Developer writes the website code, and then ships it to the server.</td><td class="has-text-align-center" data-align="center"><strong>Development</strong><br>Using Static Site Generator (SSG), the developer writes the code and then ships them to the CDN as rendered HTML.</td></tr><tr><td class="has-text-align-center" data-align="center"><strong>Render</strong><br>Server renders HTML based on the developer’s templates and content from the database.</td><td class="has-text-align-center" data-align="center"><strong>Pre-rendered HTML</strong> <br>The CDN then serves the rendered website.</td></tr><tr><td class="has-text-align-center" data-align="center"><strong>Display</strong><br>The client visits the website and waits till the website is rendered and then provided to him.</td><td class="has-text-align-center" data-align="center"><strong>Display</strong><br>Your client can visit the website that is already rendered without waiting for the server.</td></tr></tbody></table><figcaption><br><br></figcaption></figure>
<!-- /wp:table -->

<!-- wp:paragraph -->
<p><br><br></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Popular JAMStack Static Site Generators</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3,"textColor":"vivid-red"} -->
<h3 class="has-vivid-red-color has-text-color">Gatsby.js</h3>
<!-- /wp:heading -->

<!-- wp:image {"width":139,"height":139} -->
<figure class="wp-block-image is-resized"><img src="https://pagepro.co/blog/wp-content/uploads/2020/11/gatsby-logo.png" alt="Technologies to build a JAMstack website: Gatsby;" width="139" height="139"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>GatsbyJS is an open-source React-based, GraphQL powered static site generator (SSG).</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In other words, it combines the very best of React, Webpack, React-router, GraphQL, and other front-end tools, creating one single solution that web developers love to use.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>GatsbyJS was also nominated for the hottest web development technology in the world in 2020.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>P.S. Not to show off, but Pagepro has been proudly showcased and became the <a href="https://pagepro.co/gatsby-development.html" target="_blank" rel="noreferrer noopener">official Gatsby.js Agency Partner</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3,"textColor":"vivid-red"} -->
<h3 class="has-vivid-red-color has-text-color">Next.js</h3>
<!-- /wp:heading -->

<!-- wp:image {"width":246,"height":147} -->
<figure class="wp-block-image is-resized"><img src="https://pagepro.co/blog/wp-content/uploads/2020/11/next-js-logo.png" alt="Technologies to build a JAMstack website: Next.js;" width="246" height="147"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Next.js is a JavaScript framework that enables you to not only build web applications using React, but also superfast static websites.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>It’s all thanks to Automatic Static Optimization that makes “static” and “dynamic” become one.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This feature allows Next.js to build hybrid applications that contain both server-rendered and statically generated pages.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Wait, what?</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>P.S. Pagepro is also a <a href="https://pagepro.co/nextjs-development.html" target="_blank" rel="noreferrer noopener">Next.js agency</a>!</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3,"textColor":"vivid-red"} -->
<h3 class="has-vivid-red-color has-text-color">Hugo</h3>
<!-- /wp:heading -->

<!-- wp:image {"width":151,"height":170} -->
<figure class="wp-block-image is-resized"><img src="https://trucklab.ch/img/post/2017-06-26-website-now-live.png" alt="Hugo logo" width="151" height="170"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Hugo is another leader of the most popular open-source static site generators built on Go.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>With its amazing speed and flexibility, Hugo makes building websites fun and easy.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>More than that, Hugo supports unlimited content types, taxonomies, menus, dynamic API-driven content, and more, all without plugins.<br><br></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Best technologies to build a JAMStack website</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>There are a number of JAMStack technologies you can choose from.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>First, you need to choose tools and technologies for:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Front-end layer</li><li>Headless CMS</li><li>Hosting and deployment</li></ul>
<!-- /wp:list -->

<!-- wp:heading {"level":4,"textColor":"vivid-red"} -->
<h4 class="has-vivid-red-color has-text-color"><strong>Front-end technologies</strong></h4>
<!-- /wp:heading -->

<!-- wp:table {"hasFixedLayout":true,"className":"is-style-regular"} -->
<figure class="wp-block-table is-style-regular"><table class="has-fixed-layout"><tbody><tr><td class="has-text-align-center" data-align="center"><a href="https://pagepro.co/gatsby-development.html" target="_blank" rel="noreferrer noopener nofollow">Gatsby.js</a></td><td class="has-text-align-center" data-align="center"><a href="http://nextjs.org/" target="_blank" rel="noreferrer noopener nofollow">Next.js</a></td><td class="has-text-align-center" data-align="center"><a href="https://pagepro.co/react-development.html" target="_blank" rel="noreferrer noopener nofollow">React.js</a></td><td class="has-text-align-center" data-align="center"><a href="https://www.typescriptlang.org/" target="_blank" rel="noreferrer noopener nofollow">TypeScript</a></td></tr><tr><td class="has-text-align-center" data-align="center"><img src="https://pagepro.co/blog/wp-content/uploads/2020/11/gatsby-logo.png" style="width: 100px;" alt="Technologies to build a JAMstack website: Gatsby;"></td><td class="has-text-align-center" data-align="center"><img src="https://pagepro.co/blog/wp-content/uploads/2020/11/next-js-logo.png" style="width: 100px;" alt="Technologies to build a JAMstack website: Next.js;"></td><td class="has-text-align-center" data-align="center"><img src="https://pagepro.co/blog/wp-content/uploads/2020/11/react-logo.png" style="width: 100px;" alt="Technologies to build a JAMstack website: React;"></td><td class="has-text-align-center" data-align="center"><img src="https://pagepro.co/blog/wp-content/uploads/2020/11/typescript-logo.png" style="width: 100px; align: center;" alt="Technologies to build a JAMstack website: TypeScript;"></td></tr></tbody></table></figure>
<!-- /wp:table -->

<!-- wp:heading {"level":4,"textColor":"vivid-red"} -->
<h4 class="has-vivid-red-color has-text-color"><strong>Headless CMS</strong></h4>
<!-- /wp:heading -->

<!-- wp:table {"hasFixedLayout":true,"className":"is-style-regular"} -->
<figure class="wp-block-table is-style-regular"><table class="has-fixed-layout"><tbody><tr><td class="has-text-align-center" data-align="center"><a href="https://www.contentful.com/" target="_blank" rel="noreferrer noopener nofollow">Contentful</a></td><td class="has-text-align-center" data-align="center"><a href="https://www.sanity.io/" target="_blank" rel="noreferrer noopener nofollow">Sanity</a></td><td class="has-text-align-center" data-align="center"><a href="https://strapi.io/" target="_blank" rel="noreferrer noopener nofollow">Strapi</a></td><td class="has-text-align-center" data-align="center"><a href="https://wordpress.org/" target="_blank" rel="noreferrer noopener nofollow">WordPress</a></td></tr><tr><td class="has-text-align-center" data-align="center"><img src="https://pagepro.co/blog/wp-content/uploads/2020/11/contentful-logo.png" style="width: 100px;"></td><td class="has-text-align-center" data-align="center"><img src="https://pagepro.co/blog/wp-content/uploads/2020/11/sanity-logo.png" style="width: px;"></td><td class="has-text-align-center" data-align="center"><img src="https://pagepro.co/blog/wp-content/uploads/2020/11/strapi-logo.jpg" style="width: px;"></td><td class="has-text-align-center" data-align="center"><img src="https://pagepro.co/blog/wp-content/uploads/2020/07/Wordpress.png" style="width: 100px;"></td></tr></tbody></table></figure>
<!-- /wp:table -->

<!-- wp:heading {"level":4,"textColor":"vivid-red"} -->
<h4 class="has-vivid-red-color has-text-color"><strong>Hosting and deployment</strong></h4>
<!-- /wp:heading -->

<!-- wp:table {"hasFixedLayout":true,"className":"is-style-regular"} -->
<figure class="wp-block-table is-style-regular"><table class="has-fixed-layout"><tbody><tr><td class="has-text-align-center" data-align="center"><a href="https://www.netlify.com/" target="_blank" rel="noreferrer noopener nofollow">Netlify</a></td><td class="has-text-align-center" data-align="center"><a href="https://vercel.com/" target="_blank" rel="noreferrer noopener nofollow">Vercel</a></td><td class="has-text-align-center" data-align="center"><a href="https://aws.amazon.com/" target="_blank" rel="noreferrer noopener nofollow">AWS</a></td><td class="has-text-align-center" data-align="center"><a href="https://firebase.google.com/" target="_blank" rel="noreferrer noopener nofollow">Firebase</a></td></tr><tr><td class="has-text-align-center" data-align="center"><img src="https://pagepro.co/blog/wp-content/uploads/2020/11/netlify-logo.png"></td><td class="has-text-align-center" data-align="center"><img src="https://pagepro.co/blog/wp-content/uploads/2020/11/vercel-logo.png"></td><td class="has-text-align-center" data-align="center"><img src="https://pagepro.co/blog/wp-content/uploads/2020/11/aws-logo.png" style="width: 120px;"></td><td class="has-text-align-center" data-align="center"><img src="https://pagepro.co/blog/wp-content/uploads/2020/11/firebase-logo.png"></td></tr></tbody></table></figure>
<!-- /wp:table -->

<!-- wp:paragraph -->
<p><br><br></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Best use cases of JAMStack</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Who wouldn’t want a super fast, light, and SEO friendly website?</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>There are plenty use cases for JAMStack, and we do believe it can be used pretty much everywhere.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>But at the same time, we also know there are some specific markets that demand all the JAMStack blessings much more.<br>These are:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><strong>eCommerce Shops</strong> - JAMStack helps them engage customers and position their products easier in Google ranks, which can ultimately increase conversion rates. <a href="https://pagepro.co/custom-storefront-for-headless-ecommerce.html" target="_blank" rel="noreferrer noopener">Custom storefront integrated with Headless eCommerce</a> can bring significant results. </li><li><strong>Custom Landing Pages</strong> - JAMStack helps you forget about being late with ad campaigns. It enables you to build custom landing pages much faster and easier.</li><li><strong>Software &amp; SaaS</strong> - A product website is in fact an app’s business card. Now it’s possible to make a great first impression by making it flawless and fast as the blink of an eye.<br><br></li></ul>
<!-- /wp:list -->

<!-- wp:heading -->
<h2>Who is using JAMStack? Popular examples</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Many great and big brand names decided to choose JAMStack to achieve better marketing results.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Here are just a few of them.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Braun</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><img width="602" height="451" src="https://lh6.googleusercontent.com/NYx5riYqFRGVg2LfH2l4B-ycH6d_gJykqnm7KGxnGSoi8yr6h6jxpI1bHykGuGyc3XEioo46hc2U35zld0zx3VOF8X-ezgspSiSHVkekcHXs94U5cj4fF6a-_jiI4CTeSmAzBOS3"></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3><br><br>Nike</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><img width="602" height="339" src="https://lh6.googleusercontent.com/PardRnGLiouK2yxtEjZFOk__K7DS3C25A_UnI7YWySGg2pT6ihNFO3y9q-xmgNlwJrv4GJElvACdebXSXV0W7LMRkcbx6rvzpBaSbSyecj_mEXTX1cQgXxXFZF5wy2kVmVKcysav"></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><br><br></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Mozilla</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><img width="602" height="285" src="https://lh6.googleusercontent.com/jH7Xzu8cnV_k1bhfvAP_An_lnkiZim3xnFYHaZnVZrTsDk-0bGFHLkuQzD331CZD2mxH2tUJFUvx9zDs-riMQuxR0IuY9AqxkIzVDmBecxXHRpbFkKlDCkkZWhW-Tfzyswk4HfIX"></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><br><br></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Airbnb</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><img width="602" height="261" src="https://lh3.googleusercontent.com/WHfabegGrsABClBMB09Bu9QKawmu_Oih5Oz-mDFcEswgxdFb1N5C30duW_nKMFQf10EdYeUbcLbaDQkGjG372uh7k0QLeB-TdXErOCOCSzfXDIJIrnF7WLC_jVJ5bz6frUZPqeDB"></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><br><br></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Figma</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><strong><img width="602" height="283" src="https://lh3.googleusercontent.com/7TI1vcVhAJ8QEbenXFGbSBPz5xeMAjg5rq8rxy8yP2PvtJW0nhkCnsEsUNHInN6ynquipS-2rTEDb8H3_QHjF9vFouvmKTkHeNf0kwUH8O0K7UUfqZSN7bj9BiclftVsxgnoDjBB"></strong></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Summary</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>I hope this FAQ explained you a bit more about the JAMStack and how it opens up a lot of possibilities for the modern business world.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>It makes it easier for new websites to gain a competitive advantage, and for developers to deliver truly great results and products.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>On top of that, building websites with JAMStack makes the Web faster, cleaner, and more efficient.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In other words, a better place.</p>
<!-- /wp:paragraph -->