描画のための最適なデータ構造とその変更の責務はバックエンドが適切か

前提・実現したいこと

React@TypescriptでSPAのチャットアプリを作っています．
作ろうとしているのは，Slackのように，日付の区切り線コンポーネントがあるようなメッセージ一覧です．
日付区切り線は索引のようになっていて，指定の日付にスクロールジャンプする仕組みを作ろうとしています．
ただし，このメッセージ一覧ですが，新着メッセージを追加したり，読み込まれていない過去のメッセージをLazyLoadingするような機能も検討しています．
Reactのリストコンポーネントは　react-windowを使っていて、移動のための　scrollToItem というライブラリの機能を利用する方針です．なので，必要なのは配列の中の移動したい日付のデータ要素のIndexです．

質問したいこと

困っていることは，サーバーからメッセージ一覧を取得して，フロントエンドに適した形に直す．というロジックを考えた時，
どこで，どのようにデータを設計すればいいかわからないことです．

具体的にわからないことは，

日付とメッセージを混ぜたデータはバックエンドで作るべき？それともフロントエンド？
日付データで区切られたメッセージ配列をどのように設計すれば，今後の開発で取り回しが効く？

詳細

現在考えているフロントエンド側のデータの構造とスクロールジャンプのロジックです．
参考にしているSlackで，デバッグツールをみて自分なりに解析し，1つの配列のデータ構造でコンポーネントのだしわけをしていると解釈しました．
ただ，HTML的にはもうちょっとリッチな感じ（日付コンポーネントがスクロールした時に部分的に追従したり．．）なのでおそらく正確ではない気がしています．
もしかしたら，日付をキーにしたハッシュ型なのか？と推測してみたりしています．

typescript
1type Message = {
2  _type: "message";
3  id: string;
4  body: string;
5  createdAt: int;
6};
7
8type DateDivider = {
9  _type: "dateDivier";
10  date: int;
11};
12
13type StreamItem = Message | DateDivider;
14
15const findTheDateIndex = (date: int, stream: StreamItem[]): index: number => {
16  const isTheDay = (data: StreamItem,):boolean => {
17    if(isDateDivider(data)){
18      return data.date === date;
19    }
20    return false;
21  }
22  return stream.findIndex(isTheDay(item));
23}
24
25// react list.tsx の抜粋-----
26stream: StreamItem[] = data.message // APIから受け取ったデータ，
27const Row = ({ index, style, data }) => (
28  <div style={style}>
29  {isMessage(data[index] && <Message message={data[index]}/>}
30  {isDate(data[index] && <DateDivider dateDivider={data[index]}/>}
31  </div>
32);
33return (
34  <List
35    items={stream}
36  />
37    {Row}
38  </List>
39);

追記・備考

ひとまず、読み込まれていない日付の移動は考えていませんでした。が、考えたことはコメントにて返しました。

hoshi-takanori

2021/12/08 20:22

自分なら日付ごとにまとめるのはフロントでやりたい気がしますが、実際にやってみないと分からないですね…。ちなみに、興味本位の質問ですが、まだ読み込まれてない日付へのジャンプもできるようにするんですか？ (難しそう…。)

midooo

2021/12/13 03:28

コメントありがとうございます！そうですね、バックエンドがどのようにスケールするのかとかあんまり考えられていなくてこんな疑問が浮かんでいます。データ成形は、UI側の事情なので責任範囲を考えればフロントで処理するのが自然な気がしてきています。 > ちなみに、興味本位の質問ですが、まだ読み込まれてない日付へのジャンプもできるようにするんですか？難しいと思っているのですが。今考えたのは、まず、データセットの中に読み込み範囲をデータ日付？で持つようにしようと考えています。なので、読み込んだ時点で読み込み範囲外が分かるので、何日以降のデータを取得するAPIを作って差分で読み込めるかな？？と日和見計算してます。