{"id":280090,"date":"2018-12-14T08:16:31","date_gmt":"2018-12-14T15:16:31","guid":{"rendered":"http:\/\/css-tricks.com\/?p=280090"},"modified":"2018-12-14T08:16:31","modified_gmt":"2018-12-14T15:16:31","slug":"two-ways-to-build-a-site-that-seem-super-different-but-weirdly-arent-that-different","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/two-ways-to-build-a-site-that-seem-super-different-but-weirdly-arent-that-different\/","title":{"rendered":"Two Ways to Build a Site That Seem Super Different But Weirdly Aren’t That Different"},"content":{"rendered":"

Here are two ways to build a site (abstractly) that feel diametrically opposed to me:<\/p>\n

    \n
  1. Build a site as an SPA (Single Page App). The page loads a skeleton HTML page that executes JavaScript as quickly as it can. The JavaScript calls an API to get data, and then the page renders content. Navigation of the site is more API calls to get the data it needs and re-rendering.<\/li>\n
  2. Build a site as statically-generated. A build process runs in which the entire site is built out as static HTML files with all the content baked into them. JavaScript isn’t required at all for the site to work.<\/li>\n<\/ol>\n

    That feels just about as different as can be. But weirdly, they kinda aren’t:<\/p>\n

      \n
    1. They are both JAMstack. They can be hosted statically as neither of them needs backend languages running on the server they are hosted on.<\/li>\n
    2. They are both building content based on an API of data. It’s more obvious in the first one, but you can think of a static site generator as hitting an API of data as it runs and builds itself. It’s just that the API might be temporarily created from content files it finds on disk. Or it might be the exact same API used for the former site.<\/li>\n<\/ol>\n

      That’s all.<\/p>\n","protected":false},"excerpt":{"rendered":"

      Here are two ways to build a site (abstractly) that feel diametrically opposed to me: Build a site as an SPA (Single Page App). The page loads a skeleton HTML page that executes JavaScript as quickly as it can. The JavaScript calls an API to get data, and then the page renders content. Navigation of […]<\/p>\n","protected":false},"author":3,"featured_media":280189,"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":"Building an SPA or a static-generated site might feel different but are more alike than meets the eye.","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[579,657,1025],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/C46A3E6F-AA1B-4CA5-8383-2E102E0D30B5.png?fit=4000%2C2000&ssl=1","jetpack-related-posts":[{"id":325619,"url":"https:\/\/css-tricks.com\/rendering-spectrum\/","url_meta":{"origin":280090,"position":0},"title":"Rendering Spectrum","date":"November 24, 2020","format":false,"excerpt":"Here are the big categories of rendering websites: Client: ship a

      <\/div> and let a JavaScript template render all of it.Static: pre-render the HTML.Server: let a live server process requests and generate the HTML response. They are not mutually exclusive. A website could statically pre-render 75% of it's pages\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/page-transitions.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":288467,"url":"https:\/\/css-tricks.com\/jamstack-more-like-shamstack\/","url_meta":{"origin":280090,"position":1},"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 "Article"","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":307185,"url":"https:\/\/css-tricks.com\/static-or-not\/","url_meta":{"origin":280090,"position":2},"title":"Static or Not?","date":"April 27, 2020","format":false,"excerpt":"A quick opinion piece by Kev Quirk:\u00a0Why I Don\u2019t Use A Static Site Generator. Kev uses WordPress: Want to\u00a0blog on my iPad? I can. Want to do it on my phone? No problem. On a machine I don\u2019t normally use? Not an issue, as long as it has a browser.\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":358672,"url":"https:\/\/css-tricks.com\/confused-about-ssgs\/","url_meta":{"origin":280090,"position":3},"title":"I’m confused about Static Site Generators. Are they only for informational sites where I can’t log in or display any dynamic data?","date":"December 14, 2021","format":false,"excerpt":"I got this question from a listener the other day. Fair question, I'd say. The word \"Static\" in \"Static Site Generator\" is at-odds with the word \"Dynamic.\" It seems to imply that the website created with a Static Site Generator (SSG) is locked in stone, only to be changed when\u2026","rel":"","context":"In "Sponsored"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/static-dynamic.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":302033,"url":"https:\/\/css-tricks.com\/build-a-dynamic-jamstack-app-with-gatsbyjs-and-faunadb\/","url_meta":{"origin":280090,"position":4},"title":"Build a dynamic JAMstack app with GatsbyJS and FaunaDB","date":"January 23, 2020","format":false,"excerpt":"In this article, we explain the difference between single-page apps (SPAs) and static sites, and how we can bring the advantages of both worlds together in a dynamic JAMstack app using GatsbyJS and FaunaDB. We will build an application that pulls in some data from FaunaDB during build time, prerenders\u2026","rel":"","context":"In "Sponsored"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/JAM-gatsby-fauna.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":270173,"url":"https:\/\/css-tricks.com\/jamstack-comments\/","url_meta":{"origin":280090,"position":5},"title":"JAMstack Comments","date":"April 24, 2018","format":false,"excerpt":"JAMstack sites are often seen as being static. A more accurate mental model for them would be that they are sites which have the ability to be hosted statically. The difference might seem semantic, but thanks to the rise of many tools and services which simplify running a build and\u2026","rel":"","context":"In "Sponsored"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/comments-jamstack.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/C46A3E6F-AA1B-4CA5-8383-2E102E0D30B5.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/280090"}],"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=280090"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/280090\/revisions"}],"predecessor-version":[{"id":280120,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/280090\/revisions\/280120"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/280189"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=280090"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=280090"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=280090"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}