サーバレスで組んだSPAページの描画処理はどこで行われていますか？

Question

#概要
lambda、S3、ReactでWebアプリケーションを作成しています。

#抱えている問題
現在、負担の大きい処理をフロントエンドかバックエンドに書くか悩んでいます。
具体的な処理の内容は、複数のAPIから商品を取得し、その中からキーとなるIDを使用し必要な情報を整形、描画させるという内容です。

そして、頭の中にある選択肢を具体的に書くと下記の様な感じです。

1. フロントエンド：Reactで書かれたファイル内に直接、処理内容を書く。
2. バックエンド：lambdaのjavascriptに書き、APIで呼び出された時にバックエンド処理し整形したデータ返す。

#質問
SPAページの描画処理は、閲覧しているユーザーのブラウザ上で行われているのでしょうか？
それともホストしているlambda(or S3)とブラウザを両方使用したハイブリッド式なのでしょうか？

質問の意図として本件のように、重い処理が必要になった時フロントエンド上に書くべきか、バックエンドに書いてAPIでデータのやり取りをさせるべきかを知りたいです。

Answer 1

複数のAPIから商品を取得し、その中からキーとなるIDを使用し必要な情報を整形、描画させる

やりたいことの詳細がわからないので憶測ですが、複数APIからの取得ということで、状態管理が複雑であったり実行時間的に長そうなので、バックエンドのほうが向いている気がします。フロントエンドでの重い処理で、ユーザーのUI操作が阻害されるといったことは避けたいです。ただ、管理するインフラの対象が増えるのでそのコストとのトレードオフではありますが。

また、バックエンド側に寄せるとしてもそもそも「ユーザーのリクエスト毎に処理が必要なのか」という点は考えておきたいです。情報にリアルタイム性が必要ないのであれば、裏側で定期的に処理を実行して整形済みの情報をどこかに保存し、フロントからは既に整形済みの情報を取得するだけという形を取ればユーザーにとっては高速に表示ができます。

SPAページの描画処理は、閲覧しているユーザーのブラウザ上で行われているのでしょうか？

また、これについては本題とはあまり関係がないような気がするのですが答えておくと、SPAとはそういうものです。

それともホストしているlambda(or S3)とブラウザを両方使用したハイブリッド式なのでしょうか？

おそらくイメージされているのはSPAではなくSSR(Server Side Rendering)ではないでしょうか。SSRはサーバー側であらじめレンダリングを行うというもので今回の件とはまた主旨が異なる気がします。
少し難しい記事ですが、Web FundamentalsにWebアプリケーションのアーキテクチャについて良い記事があるので参考にしてください。
https://developers.google.com/web/updates/2019/02/rendering-on-the-web?hl=ja