Next.jsのcomponentからサーバーサイドの処理を呼び出したい

Question

質問はシンプルで、タイトルのとおりです。

pages内にあるindex.tsxからcomponents内にあるHeader.tsxを呼び出すとします。

import Header from '../components/global/Header';

export default function Home(data: { }) {
  return (
    <div className={styles.container}>
      <Header/>
    </div>
  )
}

このとき、このHeader.tsx内からデータベースにアクセスしたいです。
しかしgetServerSidePropsを使う方法はpages内のコンテンツからしかできないようです。

今考えている方法は２つあります。

• REST APIを作ってHeaderからそれを呼び出す
• index.tsx内にgetServerSidePropsを定義し、そこからデータを取得する

しかしいずれもHeader内から直接データベースにアクセスするものではなく、処理はHeaderで完結しません。
REST APIを作るのはサーバーのセキュリティ低下に繋がる可能性もありますし、HTTPリクエスト回数が増えることにも繋がります。また、SSRの恩恵を受けることができません。
index.tsxの中に記述する方法は、Headerの呼び出し側がHeaderのロジックに依存することに繋がりかねず、また同様の処理をindex.tsx以外のページにもコピペしなければいけません。カプセル化ができているとは言えず、気持ち悪いです。

現時点では後者の方法を検討しています。Headerに必要なデータを新しいinterfaceに切り出し、そのinterfaceの中身を埋めるメソッドを新たに作成し、それをindex.tsxのgetServerSidePropsから呼び出す方向で考えています。

上記の方法を試す前に一度確認したいのですが、Headerからサーバーサイドの処理を直接呼び出すことは可能ですか？
また、何か別の効率的な方法がありますか？

環境

macOS Catalina
Node.js 12
Next.js 11.0.1
React 17.0.2
TypeScript

Answer 1

Headerからサーバーサイドの処理を直接呼び出すことは可能ですか？

できません

何か別の効率的な方法がありますか？

私も子コンポーネント内でgetServerSideProps等が使用できない点は悩みどころの1つです。
必要なPageコンポーネントで共通処理のimport、getServerSidePropsのexport、該当コンポーネントへのprops渡しという3段階は、毎回重複記述しています。

---

ちなみにですが、

HTTPリクエスト回数が増えることにも繋がります。また、SSRの恩恵を受けることができません。

初回アクセス以外のページ遷移時は、getServerSidePropsも結局HTTPリクエストをする形になります。なのでSEOやOGPに関する事でなければCSRでAPIにリクエストしてもあまり変わらないと思います。

REST APIを作るのはサーバーのセキュリティ低下に繋がる可能性もありますし

確かに直接APIにアクセスされてしまいますが、前述の通り遷移時のgetServerSidePropsのデータはリクエストから見ることが出来るのでセキュリティ低下が発生するとは思えません。

Comments

[askyq]

ありがとうございます。大変参考になりました。
また内部仕様、私の勉強不足についてのご指摘も承知いたしました。ということは`getServerSideProps`の吐き出すデータには、見られたら困る情報はあまり入れないほうがよさそうですね。（ゲームのマスクデータなど）内部仕様についても勉強してきます。