A single page application (SPA) is a web application that loads a single static HTML page and dynamically hydrates it with new content on user interaction. In light of this definition and the fact that a SPA is generally a static page with some JavaScript and APIs thrown in for interactivity, a SPA (in the traditional sense) can be considered JAMstack. It’s worth noting however that SPAs cannot automatically be assumed to be JAMstack. This is largely because not every SPA serves content directly from the cache. In an attempt to improve SEO and performance, it has become increasingly more commonplace for SPAs to utilize server side rendering techniques alongside client side ones. This technique is also known as isomorphic server side rendering or universal JavaScript where applications run on both client and server. Because the JAMstack pushes for a separation of client and server side code, the JAMstack runs against this notion of isomorphic or universal JavaScript. While the JAMstack encourages leaning on APIs for added functionality, it does not recommend giving an API control over how data is consumed and interpreted. Instead, the JAMstack recommends front loading API consumption and content ingestion at build time. If the need arises, APIs can also be made available at run time via serverless functions so as to dramatically reduce the cost of a consistently running server.
The importance of good SEO and performance cannot be overlooked. A SPA however well built, will never perform when it comes to SEO and initial load time. This is because the pages in a SPA are not “crawlable” static pages and JavaScript needs to be run each time a new page is requested. Moreover, when first loading a SPA, the entirety of the site needs to be sent to the browser. While SSR solves these challenges, it is not the sole approach to addressing them. For one, SEO can be improved on a SPA by taking advantage of prerendering options like prerender.io and Netlify’s one click prerender feature. These prerendering solutions use a headless browser to load all your assets into a static file that bots can effortlessly crawl. A noteworthy solution to address slow initial load times is to prebuild a SPA to static pages. Prerender SPA plugin is a great way to take advantage of webpack to prebuild your site to static pages at build time. If you’d rather not futz with your webpack configuration, frameworks like Nuxt and Next offer ways to render a static, prerendered and self-hydrating pages out of the box.
For more on working with SPAs on the JAMstack, check out this thorough post covering the difference between isomorphic SSR and JAMstack over on the Netlify blog.
Top comments (0)