NEXT.jsにてログインしていないユーザーに対して特定のコンポーネントを隠す事は可能か？

Question

NEXT.jsを用いてログイン機能を実装していました。

他フレームワークのように、ログインしているユーザーにはAを見せて、ログインしていないユーザーにはBを見せるようなコードを以下のように、JSXで書くかと思います。

{isLogin ? (
  <MySecretComponent/>
) : (
  <div>ログインしてください</div>
)}

SPAでないフレームワークであれば、ログインしていない場合MySecretComponentはクライアントサイドに読み込まれる事は無いですが、NEXT.jsはSPAであるため、ログインしていない時も表示はされませんがコード自体はダウンロードされてしまうかと思います

隠したい物が単なるデータであればfetchAPIでとるようにしてそこに認証をつければよいとおもいますが、コンポーネント自体を隠したい場合はどのようにすればいいのでしょうか？

（JSXコンポーネントはシンボルを使っているようでJSONに変換することが出来ず例えばres.send(<MySecretComponent/>)のようにAPI経由でコンポーネントを丸ごとという風にもできませんでした・・・・）

SPAページでは機能がハックされることは仕方のない事なのでしょうか？
おそらく私に何かしらの知識が足りていない可能性の方が高いと思っていますが・・・

よろしくお願いいたします。

Comments

[maisumakun]

そのコンポーネントの「何を」隠したいのでしょうか。特定の文言が問題となるのでしたら、「その文言だけAjaxで受け渡す」という方法も考えられます。

[danyunyu807]

イメージとしては機能ですね。

例えばお絵かき機能を持ったコンポーネントをログインしているユーザーにだけ公開したい場合、機能自体はダウンロードされてしまうのでクライアントサイドから上手く発掘すればログインせずともそのコンポーネントを表示させることが出来てしまうかと思います

ログインしているというと少し違いますが、課金ユーザーに対してのみ機能強化されるようなものの方がわかりやすいかもしれません

Answer 1

SPAでjsファイルを渡した後にDOMだけ隠しても
その気になればハックされる事を防ぐ術はありません。

どうしてもハックさせたくなければ、それより上で防御しましょう。
Next.jsは確実にSPAを構築する全てのjsファイルを渡してしまうので、Next.jsに到達させない仕組みづくりが必要となります。

---

特定のユーザーにしかjsファイルを渡さないようにブロックする方向で考えてみましょうか。

これはリバースプロキシという仕組みで対応できます。

サーバーマシン上の80番ポートはそのリバースプロキシ用プログラムを稼働させ、
適当に外部に発信しない3000番ポートなんかで作っているNext.jsのサーバを稼働
ログインしているユーザーはリバースプロキシ機能で3000番ポートに中継する。

ん？Nginxだけで全部出来ましたっけ？
Cookie見張る程度ならNginxでも出来るはずですが足りないかもしれません。
調査しつつ設計を練ってみてください。