Crystallize

PIM + Gatsby = JAMStack Ecommerce

The JAMStack strategy is gaining momentum these days, and rightfully so. We combined our Crystallize PIM with Gatsby to build out a super scalable JAMStack headless ecommerce solution. The results are staggering. Pagespeed score of 100 and a 3ms average response time when scaling out with 500 concurrent users on Zeit Now. Fast.

BYOF - Bring Your Own Frontend

BYOF or headless means freedom. Freedom to bring your own frontend. In this case we built out a boilerplate for using Crystallize with Gatsby. This strategy allows us to tailor make the frontend and build a process for continuous deployment for fast iterations.

We also made a NextJS boilerplate as an alternative for running a serverless frontend. By default they are both configured to be easily deployed on Zeit Now

JAMStack

So, what is JAMStack anyways? JAMStack is simply a strategy to build out solutions powered by JavaScript, API and Markup. You deploy this using a CDN and have pre-generated static files for unbeatable performance. You can still inject dynamic components as part of a JAMStack by using JavaScript and some serverless functions.

For Crystallize this works excellent as we have a super fast PIM API that delivers structured product information and rich content. In JSON or ready marked up. Perfect fit for a JAMStack strategy: 

  • JavaScript

  • API

  • Markup

JAMStack Performance

The first benefit you see when applying the JAMStack strategy for ecommerce is the fast performance. We ended up with a pagespeed of a 100 resulting in better Google ranking as well as a great user experience. Frontend performance is really a key driver for ecommerce SEO.

Scaleout Testing with 3ms Response

This is the part where it becomes borderline ridiculous. We used the Crystallize free tier to power our backend. Crystallize fires off events whenever product information is created, modified or removed. This means that we can have an event driven orchestration of our JAMStack frontend. We can re-generate and reflect changes on the CDN edges almost immediately after change. 

Scaleout testing should always be part of your deployment procedures and in this case we used Loader.io from the guys at SendGrid. Remember this is deployed using the free tier Crystallize and with our open source Gatsby boilerplate and deployed on Zeit Now using their free tier hosting plan as an experiment. The results are 30 000 successful requests during 60 seconds, 500 concurrent users resulting in an average response time of 3ms. Beat that.

Looks interesting?

Create a free tier account or contact us if you have any questions.

Team up with Crystallize