静的ウェブサイトのテーブルにAPIから取得したデータを挿入

Question

静的なウェブサイトはHugoで作成されています。このテーブルにはローカルデータファイルのデータが表示され、このデータを完成させるAPIの値を追加しています。

<table id="markets-table"> 
    <thead> 
     <tr> 
     <th>Asset</th> 
     <th>Year</th> 
     <th>Market Cap</th> 
     <th>Price</th> 
     <th>Industry</th> 
     <th>Type</th> 
     <th>Description</th> 
     </tr> 
    </thead> 
    <tbody> 
     {{ $dataAssets := getJSON "https://api/v1/ticker/" }} 
     {{ range $.Site.Data.assets }} 
      <tr> 
       <td>{{ .name }}</td> 
       <td>{{ .year }}</td> 
       {{ range where $dataAssets "name" .name }} 
       <td>${{ lang.NumFmt 0 .market_cap_usd }}</td> 
       <td>${{ lang.NumFmt 2 .price_usd }}</td> 
       {{ else }} 
       <td>N/A</td> 
       <td>N/A</td> 
       {{ end }} 
       <td>{{ .industry }}</td> 
       <td>{{ .type }}</td> 
       <td>{{ .description }}</td> 
      </tr> 
     {{ end }} 
    </tbody> 
    </table> 

次に、 datatablesを使用して、この表をソート可能、フィルタ可能、検索可能にします。

これはすべて正常に動作しますが、のデータはビルド時および静的に設定され、APIの値は動的/「リアルタイム」になります。

axiosまたはjQuery.ajax（）を使用してデータを取得できますが、これをテーブルに統合してきれいにする方法がわかりません。

私の場合はもっと意味があるものがあれば、別のツール/テーブルプラグインに切り替えることができます。

ありがとうございました！

Answer 1

Hugoの唯一の目的は、静的コンテンツを生成することです。データベースとリモートデータベースクエリからコンテンツを生成できますが、常に静的になります。静的コンテンツは検索エンジンで簡単に索引付けされ、SEOにも適しています。

1つの可能なソリューションと、SEOに優しいのは、データが更新されるたびにコンテンツをサーバーに生成することです。しかし、このソリューションを使用するのは、データを頻繁に変更しない場合（たとえば、1日1回など）には理想的です。ブラウザを扱う別の厄介な問題に対処する必要があるため、応答ヘッダーのキャッシュと設定。