{"id":295944,"date":"2019-09-23T07:14:47","date_gmt":"2019-09-23T14:14:47","guid":{"rendered":"https:\/\/css-tricks.com\/?p=295944"},"modified":"2019-09-23T07:14:47","modified_gmt":"2019-09-23T14:14:47","slug":"random-notes-from-a-jamstack-roundtable","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/random-notes-from-a-jamstack-roundtable\/","title":{"rendered":"Random Notes from a JAMstack Roundtable"},"content":{"rendered":"<p>I hosted a JAMstack roundtable discussion at <a href=\"https:\/\/fitc.ca\/event\/webu19\/\" rel=\"noopener\">Web Unleashed<\/a> this past weekend. Just a few random notes from that experience.<\/p>\n<p><!--more--><\/p>\n<ul>\n<li>I was surprised at first that there <a href=\"https:\/\/remotesynthesis.com\/blog\/m-is-for-markup\" rel=\"noopener\">really is confusion<\/a> that the &#8220;M&#8221; in Jamstack stands for &#8220;Markdown&#8221; (the language that compiles to HTML) rather than &#8220;Markup&#8221; (the &#8220;M&#8221; in HTML, sometimes used interchangeably with HTML). It came up as legit confusion. Answer: Markdown isn&#8217;t required for JAMstack. The confusion comes from the idea that Markdown often goes hand-in-hand with static site generators which go hand-in-hand with JAMstack.<\/li>\n<li>It occurred to me for the first time that every single site that is hosted on Netlify or GitHub Pages or an S3 bucket (&#8220;static hosting&#8221;) is JAMstack. <a href=\"https:\/\/css-tricks.com\/jamstack-more-like-shamstack\/\">SHAMstack<\/a>, indeed! :). The <a href=\"https:\/\/serverless.css-tricks.com\/services\/hosting\">static hosting<\/a> (<abbr>SH<\/abbr>) part of JAMstack is, perhaps, the most important aspect.<\/li>\n<li>A website that is a single index.html file with <code>&lt;div id=\"root\"&gt;<\/code> and a bundle of JavaScript that client-site renders the rest of everything can be JAMstack. Assuming the data it needs is either baked in or coming from an API on some other server that isn&#8217;t the one that hosts that index.html file, it&#8217;s JAMstack.<\/li>\n<li>There is a difference between <em>technically<\/em> JAMstack and <em>spiritually<\/em> JAMstack. The above is perhaps more technically and less spiritually. The latter wants you to pre-render more of the site than nothing.<\/li>\n<li>Pre-rendering is nice because: it&#8217;s fast, it can be <abbr>CDN<\/abbr>-hosted, it&#8217;s secure, and it&#8217;s <abbr>SEO<\/abbr>-friendly. A lot of frameworks give it to you as part of what they do, so you might as well take advantage. Pre-rendering doesn&#8217;t mean static, JavaScript can still load and get fancy.<\/li>\n<li>There is no denying that Static Site Generators and JAMstack are <abbr title=\"Best Friends Forever\">BFF<\/abbr>. But JAMstack wants you to think bigger. What if you can&#8217;t render everything because you have 50,000 product pages and generation is too slow or otherwise impractical? No problem, you can prerender other pages but just a shell for the product pages and hit an <abbr>API<\/abbr> for product page data as needed. What if some pages just absolutely can&#8217;t be statically hosted? No problem, you can proxy the ones that can to a static server and leave the rest alone. Want to go all-in on the static hosting, but need servers for certain functionality? Consider serverless functions, which are sort of like the backend spiritual partner to static hosting. <\/li>\n<li>People really want to know <em>why<\/em>. Why bother with this stuff at all? If you can build a site that does all the stuff you need with WordPress, why not just do that? I ended up defending my usage of WordPress from a feature perspective. If I had unlimited time and a fresh slate, even if I stay on WordPress as the <abbr>CMS<\/abbr>, I think I would likely head down a road of at least doing some pre-rendering if not totally de-coupling and building my own front-end and just using the data via <abbr>API<\/abbr>s. But perhaps the most compelling answers to <em>why<\/em> come down to <em>speed<\/em>, <em>security<\/em>, and <em>resiliency<\/em>, all of which come along for the ride immediately when you go JAMstack. It provides a hell of a foundation to build on.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>I hosted a JAMstack roundtable discussion at Web Unleashed this past weekend. Just a few random notes from that experience.<\/p>\n","protected":false},"author":3,"featured_media":288836,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[1401],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/06\/jam-stack.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":288467,"url":"https:\/\/css-tricks.com\/jamstack-more-like-shamstack\/","url_meta":{"origin":295944,"position":0},"title":"JAMstack? More like SHAMstack.","date":"June 5, 2019","format":false,"excerpt":"I'm a fan of the whole JAMstack thing. It seems like a healthy web movement. I'm looking forward to both of the upcoming conferences. Of any web trend, #jamstack seems like it will be the least regrettable.\u2014 Chris Coyier (@chriscoyier) May 22, 2019 I feel like the acronym might not\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/06\/jam-stack.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":299314,"url":"https:\/\/css-tricks.com\/the-rising-complexity-of-jamstack-sites-and-how-to-manage-them\/","url_meta":{"origin":295944,"position":1},"title":"The Rising Complexity of JAMstack Sites and How to Manage Them","date":"December 5, 2019","format":false,"excerpt":"When you add anything with user-generated content or dynamic data to a static site, the complexity of the build process can become comparable to launching a monolithic CMS. How can we add rich content to static sites without stitching together multiple third-party services? For people in the development community static\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/11\/growing-circles.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":298412,"url":"https:\/\/css-tricks.com\/jamstack-cmss-have-finally-grown-up\/","url_meta":{"origin":295944,"position":2},"title":"JAMstack CMSs Have Finally Grown Up!","date":"November 15, 2019","format":false,"excerpt":"This article is based on Brian's presentation at Connect.Tech 2019. Slides with speaker notes from that presentation are available to download. In my experience, developers generally find the benefits of the JAMstack easy to comprehend. Sites are faster because the resources are static and served from a CDN. Sites are\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/11\/connecttech-artwork.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":296937,"url":"https:\/\/css-tricks.com\/jamstack-tools-and-the-spectrum-of-classification\/","url_meta":{"origin":295944,"position":3},"title":"JAMstack Tools and The Spectrum of Classification","date":"October 17, 2019","format":false,"excerpt":"With the wonderful world of JAMstack getting big, all the categories of services and tools that help it along are as important as ever. There are static site generators, headless CMSs, and static file hosts. I think those classifications are handy, and help conversations along. But there is a point\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/services.png?fit=1200%2C693&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":304441,"url":"https:\/\/css-tricks.com\/data-driven-jamstack-with-sourcebit\/","url_meta":{"origin":295944,"position":4},"title":"Data-driven Jamstack with Sourcebit","date":"February 28, 2020","format":false,"excerpt":"Think of building sites with Gatsby as an hourglass shape. Gatsby itself is right in the middle. The wide funnel at the top represents the fact that Gatsby can take in data from all sorts of sources. The data could be in markdown files, from a headless CMS or some\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/02\/1582723765-create-step1-sm.png?fit=702%2C323&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":284137,"url":"https:\/\/css-tricks.com\/stackbit\/","url_meta":{"origin":295944,"position":5},"title":"Stackbit","date":"March 12, 2019","format":false,"excerpt":"This is not a sponsored post. I requested a beta access for this site called Stackbit a while back, got my invite the other day, and thought it was a darn fine idea that's relevant to us web nerds \u2014 particularly those of us who spin up a lot of\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/stackbit.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/295944"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=295944"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/295944\/revisions"}],"predecessor-version":[{"id":296026,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/295944\/revisions\/296026"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/288836"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=295944"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=295944"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=295944"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}