「サーバサイドとクライアントサイドのどっちで実行される？」は誤った二分法

Next.jsの魅力は、同じ言語でクライアントサイドとサーバサイドの両方を書けることです。ただし、その前提は、人間が「どの部分がどこで実行されるのか」を正確に理解していることです。

1: Anything in getServerSideProps or getInitialProps runs on the server-side. These functions are used for server-side rendering. They are run on the server when a request is made to the page.

2: Anything in getStaticProps or getStaticPaths also runs on the server-side. These functions are used for static generation. They are run at build time on the server.

4: Code in useEffect hooks runs on the client-side only.

5: Code in event handlers (like onClick, onSubmit, etc.) runs on the client-side only.

昔、生のReactを使ってたころはFirebaseの初期化のコードをモジュールに書いて、それを各所でインポートして使うことで呼び出し前に1回初期化のコードが走ってることを保証していた

生のReactは全部クライアントサイドで走るので問題はなかった

このエラーをみて「サーバサイドで実行されてる」と思った

そこから「クライアントサイドで実行されていない」と思ったのが勘違い

「誤った二分法」にはまっている

「誤った二分法」にはまって前提がおかしくなっていることに気づかないままGPTに「この初期化のコードがクライアントサイドで実行されることを保証したい」って言った

そうするとuseEffectの中でダイナミックインポートしてモジュールをsetStateするコードを生成し始めた

確かにそれならクライアントサイドでしか動かないけど「いや、流石にその設計はおかしいのでは？」となった

ここで、自分の理解の誤りを疑った

GPT4は便利だけど、正しくない理解で適切でない要求を伝えると、その要求をなんとかしようとして複雑なコードを生成してしまう

GPT4が生成できるくらい広く使われてるNext.jsとFirestoreの組み合わせで「useEffectの中でダイナミックインポート」が必須なわけがない

必要なところで呼べばよい

トリッキーなコードを書く必要はまったくなかった