Where Does Logic Go on Jamstack Sites?

The best choice for logical code under Jamstack architecture

A key issue when building a Jamstack website is determining the best placement of logical code. This article explores four different logical processing methods through an example of a music venue website and analyzes their respective advantages and disadvantages.

Assume that the core function of the website is to present a list of concerts, including ended and upcoming events, which need to be distinguished by date.

Solution 1: Write HTML directly

The most direct way is to write all activity information directly into the HTML file. This method is simple and easy to understand, but the disadvantage is that every time you update the activity information, you need to manually modify the HTML file and redeploy it, which is inefficient and error-prone.

<h1 id="Coming-soon-Bill-s-Banjo-Night"> Coming soon: Bill's Banjo Night</h1>
<h1 id="Ended-Jill-s-s-classic-concert">Ended: Jill's 70s classic concert</h1>

Solution 2: Process structured data during construction

A more efficient way is to use structured data (such as Markdown files or headless CMS) to store activity information and then use a static website generator (such as Eleventy) to process the logic during the build process. This method allows complex logical operations such as date comparisons, API calls, etc. to be performed at build time.

For example, use a Markdown file to represent activity:

 ---
title: Bill's Banjo Night date: 2020-09-02
---

Activity description...

Use templates to judge dates during construction:

 {% if event.date > now %}
<h1 id="Coming-soon-event-title">Coming soon: {{event.title}}</h1>
{% else %}
<h1 id="Ended-event-title">Ended: {{event.title}}</h1>
{% endif %}

However, the date comparison of this method is performed only once at build time. This means that after the event, the website needs to be rebuilt to update the information. While the build process can be automated, frequent builds can increase costs and there is still a risk of data lag.

Solution 3: Edge computing processing logic

As edge computing technology matures, code processing logic can be run at the CDN layer. This ensures that the latest data is fetched every request and provides extremely high performance. However, edge computing technology is not yet popular yet.

 // This code example is incomplete, for reference only import eventsList from "./eventsList.json"
function onRequest(request) {
 const now = new Date();
 eventList.forEach(event => {
  if (event.date > now) {
   event.upcoming = true;
  }
 })
 const props = {
  events: events,
 }
 request.respondWith(200, render(props), {})
}

Solution 4: Runtime processing logic

Finally, you can pass the structured data directly to the front-end, and then use JavaScript to perform logical operations on the user device to dynamically update the DOM. This method adjusts how dates are displayed based on the user's language and time zone and ensures that the information is always up to date.

For example, use data attributes to store date information:

<h1 id="event-title"> {{event.title}}</h1>

Then use JavaScript for date comparison:

 function processEvents(){
 const now = new Date()
 events.forEach(event => {
  const eventDate = new Date(event.getAttribute('data-date'))
  if (eventDate > now){
    event.classList.add('upcoming')
  } else {
    event.classList.add('past')
  }
 })
}

Conclusion: Logical position selection depends on specific requirements

Which logical processing method to choose depends on the specific requirements. For static content, it is only possible to write HTML directly or build-time processing; for content that changes frequently, it is recommended to use CMS and build-time processing; for content that requires high real-time performance, edge computing or run-time processing needs to be considered. We need to weigh factors such as efficiency, cost and data real-timeness to choose the most appropriate solution.

The above is the detailed content of Where Does Logic Go on Jamstack Sites?. For more information, please follow other related articles on the PHP Chinese website!