LogicはJamstackサイトのどこにありますか？

Jamstack Architectureの下での論理コードの最良の選択

Jamstack Webサイトを構築する際の重要な問題は、論理コードの最適な配置を決定しています。この記事では、音楽会場のウェブサイトの例を介して4つの異なる論理処理方法を調べ、それぞれの利点と短所を分析します。

Webサイトのコア機能は、日付で区別する必要がある終了や今後のイベントを含むコンサートのリストを提示することであると仮定します。

ソリューション1：HTMLを直接書き込みます

最も直接的な方法は、すべてのアクティビティ情報をHTMLファイルに直接書き込むことです。この方法はシンプルで理解しやすいですが、不利な点は、アクティビティ情報を更新するたびに、HTMLファイルを手動で変更して再展開する必要があることです。これは非効率的でエラーが発生しやすいことです。

<h1 id="近日公開-ビルのバンジョーナイト">近日公開：ビルのバンジョーナイト</h1>
<h1 id="終了-ジルの-年代のクラシックコンサート">終了：ジルの70年代のクラシックコンサート</h1>

ソリューション2：建設中に構造化されたデータを処理します

より効率的な方法は、構造化されたデータ（MarkdownファイルやヘッドレスCMSなど）を使用してアクティビティ情報を保存し、静的Webサイトジェネレーター（Eleventyなど）を使用してビルドプロセス中にロジックを処理することです。この方法により、日付の比較、API呼び出しなどの複雑な論理操作をビルド時に実行できます。

たとえば、マークダウンファイルを使用してアクティビティを表します。

 ---
タイトル：ビルのバンジョーナイトデート：2020-09-02
---

アクティビティの説明...

テンプレートを使用して、建設中に日付を判断します。

 {％if event.date> now％}
<h1 id="近日公開-event-title">近日公開：{{event.title}}</h1>
{％ それ以外 ％}
<h1 id="終了-event-title">終了：{{event.title}}</h1>
{％endif％}

ただし、この方法の日付比較は、ビルド時に1回のみ実行されます。これは、イベントの後、情報を更新するためにウェブサイトを再構築する必要があることを意味します。ビルドプロセスは自動化できますが、頻繁にビルドするとコストが増加し、データラグのリスクがあります。

ソリューション3：エッジコンピューティング処理ロジック

エッジコンピューティングテクノロジーが成熟すると、コード処理ロジックをCDNレイヤーで実行できます。これにより、最新のデータがリクエストごとにフェッチされ、非常に高いパフォーマンスが提供されます。ただし、エッジコンピューティングテクノロジーはまだ人気がありません。

 //このコードの例は不完全です。参照のみの場合のみのイベントスリストのみを「./eventslist.json」からインポートします。
function onrequest（request）{
 const now = new date（）;
 eventlist.foreach（event => {
  if（event.date> now）{
   event.upcoming = true;
  }
 }）
 const props = {
  イベント：イベント、
 }
 request.respondwith（200、render（props）、{}）
}

ソリューション4：ランタイム処理ロジック

最後に、構造化されたデータをフロントエンドに直接渡すことができ、JavaScriptを使用してユーザーデバイスで論理操作を実行してDOMを動的に更新できます。この方法は、ユーザーの言語とタイムゾーンに基づいて日付の表示方法を調整し、情報が常に最新であることを保証します。

たとえば、データ属性を使用して日付情報を保存します。

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

次に、日付の比較にはJavaScriptを使用します。

 function processevents（）{
 const now = new date（）
 events.foreach（event => {
  const eventdate = new date（event.getAttribute（ 'data-date'））
  if（eventdate> now）{
    event.classlist.add（ '今後'）
  } それ以外 {
    event.classlist.add（ 'past'）
  }
 }）
}

結論：論理的な位置の選択は、特定の要件に依存します

選択する論理処理方法は、特定の要件によって異なります。静的なコンテンツの場合、HTMLを直接書き込むか、時間処理をビルドすることのみが可能です。頻繁に変更されるコンテンツの場合、CMSを使用してビルドタイム処理を使用することをお勧めします。高いリアルタイムパフォーマンスを必要とするコンテンツの場合、エッジコンピューティングまたはランタイム処理を考慮する必要があります。最も適切なソリューションを選択するには、効率、コスト、データの実質的性質などの要因を比較検討する必要があります。

以上がLogicはJamstackサイトのどこにありますか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。