Où va la logique sur les sites Jamstack?

Le meilleur choix pour le code logique sous l'architecture Jamstack

Un problème clé lors de la création d'un site Web de Jamstack consiste à déterminer le meilleur placement du code logique. Cet article explore quatre méthodes de traitement logique différentes à travers un exemple de site Web de lieu de musique et analyse leurs avantages et inconvénients respectifs.

Supposons que la fonction principale du site Web est de présenter une liste de concerts, y compris les événements finis et à venir, qui doivent être distingués par date.

Solution 1: Écrivez directement HTML

Le moyen le plus direct est d'écrire toutes les informations d'activité directement dans le fichier HTML. Cette méthode est simple et facile à comprendre, mais l'inconvénient est que chaque fois que vous mettez à jour les informations d'activité, vous devez modifier manuellement le fichier HTML et le redéployer, qui est inefficace et sujet aux erreurs.

<h1 id="À-venir-bientôt-la-soirée-de-banjo-de-Bill"> À venir bientôt: la soirée de banjo de Bill</h1>
<h1 id="Fin-Jill-s-s-Classic-Concert">Fin: Jill's 70s Classic Concert</h1>

Solution 2: Traiter les données structurées pendant la construction

Un moyen plus efficace consiste à utiliser des données structurées (telles que les fichiers Markdown ou CMS sans tête) pour stocker les informations d'activité, puis utiliser un générateur de sites Web statique (tel que Eleventy) pour traiter la logique pendant le processus de construction. Cette méthode permet d'effectuer des opérations logiques complexes telles que les comparaisons de date, les appels API, etc.

Par exemple, utilisez un fichier Markdown pour représenter l'activité:

 ---
Titre: Bill's Banjo Night Date: 2020-09-02
---

Description de l'activité ...

Utilisez des modèles pour juger les dates pendant la construction:

 {% si event.date> maintenant%}
<h1 id="À-venir-bientôt-event-title">À venir bientôt: {{event.title}}</h1>
{% autre %}
<h1 id="Terminé-event-title">Terminé: {{event.title}}</h1>
{% endif%}

Cependant, la comparaison des dates de cette méthode n'est effectuée qu'une seule fois à l'heure de construction. Cela signifie qu'après l'événement, le site Web doit être reconstruit pour mettre à jour les informations. Bien que le processus de construction puisse être automatisé, les constructions fréquentes peuvent augmenter les coûts et il existe toujours un risque de décalage de données.

Solution 3: Logique de traitement de l'informatique de bord

À mesure que la technologie de l'informatique Edge mûrit, la logique de traitement du code peut être exécutée au niveau de la couche CDN. Cela garantit que les dernières données sont récupérées chaque demande et fournit des performances extrêmement élevées. Cependant, la technologie de l'informatique Edge n'est pas encore populaire.

 // Cet exemple de code est incomplet, pour référence uniquement Import EventsList de "./eventslist.json"
fonction onRequest (request) {
 const Now = new Date ();
 eventList.ForEach (Event => {
  if (event.date> maintenant) {
   event.Upting = true;
  }
 })
 const props = {
  Événements: événements,
 }
 request.RespondWith (200, rendu (accessoires), {})
}

Solution 4: Logique de traitement d'exécution

Enfin, vous pouvez transmettre les données structurées directement à l'avant, puis utiliser JavaScript pour effectuer des opérations logiques sur le périphérique utilisateur pour mettre à jour dynamiquement le DOM. Cette méthode ajuste la façon dont les dates sont affichées en fonction de la langue et du fuseau horaire de l'utilisateur et garantit que les informations sont toujours à jour.

Par exemple, utilisez des attributs de données pour stocker les informations de date:

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

Ensuite, utilisez JavaScript pour la comparaison de la date:

 fonction processEvents () {
 const now = new Date ()
 Events.ForEach (Event => {
  const eventDate = new Date (event.getAttribute («Data-Date»))
  if (eventDate> maintenant) {
    event.classlist.add («à venir»)
  } autre {
    event.classlist.add («passé»)
  }
 })
}

Conclusion: La sélection de position logique dépend des exigences spécifiques

La méthode de traitement logique à choisir dépend des exigences spécifiques. Pour le contenu statique, il est uniquement possible d'écrire HTML directement ou de traitement du temps de construction; Pour le contenu qui change fréquemment, il est recommandé d'utiliser le CMS et le traitement des temps de construction; Pour le contenu qui nécessite des performances élevées en temps réel, l'informatique Edge ou le traitement du temps d'exécution doivent être prises en compte. Nous devons peser des facteurs tels que l'efficacité, le coût et les données réelles pour choisir la solution la plus appropriée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!