Something we often hear in regards to Jamstack is the notion that “a static site cannot do that”. However, the nature of the Jamstack is to statically-generate websites, not to generate static websites.Recently, I needed to provide an example of functionality that is often viewed as impossible with a statically-generated website — gated content. I was sure that this was something we could achieve using Jamstack but there weren’t any resources around how to implement this, recommended approaches or even best practices. The closest articles I found were orientated towards marketers, selling the effectiveness of gated content for conversions.So, here is an article that is developer-focused, provides a recommended approach, is accompanied by a working example, and includes best practices outlined by Google for paywalled content.If you want to jump straight to the point then you can find links to the working example and source code at the end of the article.
What is gated content?
First things first, a _gate _is a step or barrier between a user and something they wish to access. A common example is an age-gate, often used when a user wishes to access products or content that require them to be older than a specific age e.g. for purchasing alcohol.In our case we are referring to content gating; typically used in lead generation. The intention is that a report or article is enticing enough for a user to provide contact details.A gate requires some things to be true to function correctly.
- A user can complete an exchange; for example by providing contact details or signing up for a subscription.
- A user will receive something as part of the exchange; for example, a report or article.
- The platform, or website, can restrict access to this content until the user completes the exchange.
These requirements are often expected to be problematic for a statically generated website as the content would be generated upfront and therefore cannot be served to the user dynamically when they complete the exchange.
#jamstack #serverless #nextjs #react
