JAMstack Origins: A deep dive into the architecture with Next.js

Server-Side Rendered Apps

  • A user requests a website on a browser by entering a URL (Eg: www.cantthinkofaname.com).
  • The server we just spoke of verifies that the request is in order, compiles the HTML and sends it over to the client.
  • The browser receives this ready to display static page and renders it to the user immediately. However, the website is not interactive at this point.
  • The client (browser in this case), then also downloads the JS to enable and allow interactivity upon execution.

Advantages of Server-Side Rendering

  • Faster renders courtesy of the readily available HTML from the server.
  • Ensures proper SEO (Search Engine Optimization) and webpages are indexed correctly.
  • Better performance for smaller sites.
  • Better performance on slow network devices.

Disadvantages

  • This was a time when websites mostly only contained images and text, which is no longer the case. Websites today involve messaging, videos, heavy user interaction all of which mean that the HTML to be generated by the server will be huge, necessitating the server to spend a large time compiling the page resulting in a slow TTFB (Time To First Byte).
  • A busy server also means that it can serve fewer requests.

Client-Side Rendering

  • A user requests a website on a browser by entering a URL (Eg: www.cantthinkofaname.com)
  • The server responds with a blank HTML file with no content along with the Javascript application.
  • The browser now downloads the Javascript and styles, applies them, and compiles the page before rendering the same.

A Hybrid Approach

Enter JAMstack

Rendering Limitations

  • Saving the new book through an API and subsequently triggering a rebuild upon every new addition. This however is only feasible on a very small scale. A huge application with lots of new books added frequently would be hard-pressed to make such a system work.
  • Render the books client-side and prevent them from getting pre-built. The books will always be fetched upon request and rendered entirely client-side. But this would mean the very goal of pre-rendering is defeated.

Static Site Generation with NextJS

Forms of pre-rendering

  • Static generation: The HTML is generated at build time and will be reused on each request. The page needs to export a function named getStaticProps where the data required to render the page is fetched.
  • Server-side generation: The HTML is generated on each request. The page needs to export a function named getServerSideProps where the data required to render the page is fetched.

Incremental Static Regeneration

Incremental Static Regeneration

An Example

  • /characters Statically generated list of all characters, along with incremental static re-generation to re-generate the page every 5 minutes.
  • /characters/[id] page which displays a single character in more detail. Also statically generated.
mkdir star-wars && cd star-wars && npx create-next-app .

Characters Page

Individual Character Page

  • getStaticPaths: Responsible for fetching all characters' ids to generate the corresponding pages.
  • getStaticProps: Responsible for fetching the data for a given character. This function will run once for every character id returned by the getStaticPaths function.

Demo

SSG lighthouse result

SSR Demo

SSR lighthouse result

CSR Demo

CSR Lighthouse result

Advantages of JAMstack

  • Blazing fast load times: JAMstack sites remove the need to generate page views on a server at request time by instead generating pages ahead of time during a build. With all the pages are already available on a CDN close to the user and ready to serve, very high performance is possible without introducing expensive or complex infrastructure.
  • Scale: Where traditional apps add logic to cache commonly visited views, JAMstack provides this by default. With JAMstack sites, everything can be cached in a content delivery network. With simpler deployments, built-in redundancy, and incredible load capacity
  • Stability: With fewer moving parts between the site and the content, there are fewer points of failure.
  • Portability: JAMstack sites are pre-generated. That means that we can host them from an array of hosting providers and have a greater ability to move them to your preferred host. Any simple static hosting solution should be able to serve a JAMstack site. Few examples of such providers include Vercel, Netlify, etc.

Hosting

Automated Builds

Conclusion

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
LiftOff LLC

LiftOff LLC

We are business accelerator working with startups / entrepreneurs in building the product & launching the companies.