「サーバサイドとクライアントサイドのどっちで実行される？」は誤った二分法
Next.jsは、サーバサイドとクライアントサイドでの実行を適切に切り替えてくれます。しかし、切り替えを理解しないまま、Firestoreの読み書きを含むコードを書くと、思わぬトラブルに直面することがあります。
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.
>3: Any other code in your React components, outside the above functions, will run on both server and client side.
>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は全部クライアントサイドで走るので問題はなかった
今回同じやり方をしたら
getAnalytics の初期化で window がない旨のエラーになったこのエラーをみて「サーバサイドで実行されてる」と思った
そこから「クライアントサイドで実行されていない」と思ったのが勘違い
「誤った二分法」にはまっている
「誤った二分法」にはまって前提がおかしくなっていることに気づかないままGPTに「この初期化のコードがクライアントサイドで実行されることを保証したい」って言った
そうするとuseEffectの中でダイナミックインポートしてモジュールをsetStateするコードを生成し始めた
確かにそれならクライアントサイドでしか動かないけど「いや、流石にその設計はおかしいのでは？」となった
ここで、自分の理解の誤りを疑った
GPT4は便利だけど、正しくない理解で適切でない要求を伝えると、その要求をなんとかしようとして複雑なコードを生成してしまう
GPT4が生成できるくらい広く使われてるNext.jsとFirestoreの組み合わせで「useEffectの中でダイナミックインポート」が必須なわけがない
今回のケースでは
getAnalytics を初期化で呼ぶ必要はない必要なところで呼べばよい
トリッキーなコードを書く必要はまったくなかった
Related Pages
- →盲点×triz×トップダウンとボトムアップ×盲点カード候補×まだ絵のない盲点カード×失敗確率が高いが平均的に良い×バラツキが多い方がよいとき×円であるという思い込み×量が減らなくても割合は減る×直交しない2軸×湖にコップ一杯の水を入れる×インタラクションの属性×対立しているものを分割する×上が単一という思い込み×バーベル×解が一つとは限らない×大きな石だけが水面から顔を出す×トートバッグ×二人が違うことを言う絵のシリーズ×二人が違うことを言う絵のシリーズを盲点カードに追加するかどうか？×無味乾燥×(6.3.1.1)_誰が顧客かわからなければ、何が品質かもわからない×用途が明確になってからふるいわけ×ネットワーク構造×ツリーとリゾーム×知識のツリーではなく知識のリゾーム×「xである」と「xでない」が両立する×家族的類似性×妥協の方法は複数ある×良いものを移動させる×要素ではなく集合×集合ではなく軸×対立は一つだけではない×描きやすい絵のバイアス×最速のコースは最速ではない×片方向ではなく両方向×観測範囲の問題×誤った二分法×無味乾燥ページ×効果の有無×「なぜ」は曖昧×大小関係が存在しない×次元の呪い×イコールでないものを同一視し、差の拡大によって同一視できなくなる×円柱は円にも四角にも見えるが、円でも四角でもない×自分を自分の一部に使う×知識の少ない人からでも学ぶことができる×無の場所×同じものに属する違うもの×対称性×黄金比×陰陽太極図×弁証法×2015×螺旋階段×逆に進むがゴールは同じ×一つでも二つでもある×降りるために登らなければならない×別の世界で解決する×「同じ」と「違う」は両立する→
- →情報処理×新時代の道具，_chatgpt：14_の視点からその可能性を探る×chatgpt×一人の主観から大勢の主観へ×主観か客観か×誤った二項対立×chatgpt_api×陳腐化×抽象度の高い知識×具体的経験×みずからの目で見なければならない×根無し草の知識×今開いている扉が未来も開いている保証はない×幸運の女神には前髪しかない×エンジニアの知的生産術×知的生産性の向上×人間増強の四要素×概念のハンドル×取っ手×(column)_パターンに名前を付けること×(4.5.3.3)_思考の道具を手に入れる×発想法×方法論×名前×一部が消えて一部残り新しく生まれる×思考の結節点2023-02-23×chatgptに「質問を繰り返す聞き手」の役割を演じさせる実験×クリーンランゲージ×かんがえをひきだすチャットボットkeichobot×scrapboxに住んでるエージェント×aiの住んでるscrapbox×ai質問箱uiについて考える×自分のscrapboxをchatgptにつないだ×scrapbox_chatgpt_connector×自分のscrapboxをchatgptにつないだ話勉強会×aiパネルディスカッション×scrapboxはアイデアの精製器×エミュレータ×書籍とは双方向のコミュニケーションができない×仮想人格とのブレインストーミング×正しさと有用性は別物×異なる視点×盲点×気づく×すべてのデータはうそである×円柱は円にも四角にも見えるが、円でも四角でもない×コントロールできることに力を注ぎ、コントロールできないことは気にしない×コストが下がれば構造が変化する×plurality×audrey_tang×シンギュラリティ×ブロードリスニング×熟議×熟議のための4つのステップ×polis×sentiment_gathering_platform×認知能力の限界×人間増強×情報の複製により情報発信は効率化されたが、受信は改善しない、情報を減らす技術が必要×pluralityとpolis勉強会×シビックテックによる、社会と民主主義のアップデート×階層構造×中間管理職×間接民主制×代議士×デジタルネイティブ×選挙は4年に一度5bit送信する遅い通信だ×デジタルネイティブは4年に1度のアップロード帯域で十分とは思わない×まだ言語化されていない知識×文明に対する貢献×既に言語化された知識×世界とaiのインターフェース×世界をセンシングしてaiに与える仕事×まだ書かれていないことの森を切り拓いていく仕事×aiが読めない形での情報発信は価値が下がっていく×フォーク×正統性×投票×移動式投票×主観主義×panarchy×arxiv×査読×品質担保×情報共有の速度×オープンアクセス×有用性×大勢の主観×品質より速度×文明の乗り物×人間は一時的キャッシュ×accessism×openai×democratic_inputs_to_ai×anthropic×スケールする熟議×scalable_deliberation×opportunities_and_risks_of_llms_for_scalable_deliberation_with_polis×community_notes×主観的×オモイカネプロジェクト×主観か客観かではなく、一人の主観から大勢の主観へ:q&a×chatgptについてのコラムの準備×chatgptについてのコラムの準備2→
- →時間軸の構造を破壊×時間軸構造の破壊×ティアキンの祠×仕事のゲーミフィケーション×ピラミッドの頂上を取ってきても期待と違う×抽象を軸足にした変換×銀の弾などない×肥満の解消には運動するといい×構想力は問題を限定する能力×二重組織×調達困難リソース×移転可能×移転不能リソース×熱意は貴重なリソース×知識のネットワークがあると高速移動ができる×組織境界の曖昧化×なめらか化×ランダマイザ×指数的成長の後押し×新しいs字曲線に投資した方が得×雪崩×峠を越えると指数関数的成長×参入障壁×ブラックボックス×社会資本での拡大再生産×社会関係資本の使い方×貿易商×巻き込まれ力×都合よく使われることのメリット×自発性と巻き込まれ力×面白い×意外性×盲点×サイクルを閉じる×盲点カード候補×連想のストック×誤ったkpi設定×「ぶどう園の労働者のたとえ」と「悪人正機説」の関係×情熱×専門性×博士号×the_illustrated_guide_to_a_ph.d.×高次元空間におけるトゲトゲ×シリアルマスタリー×シリアルマスタリーはバーベル戦略×実弾×活動履歴は市場調達困難な財×転がる雪玉×過冷却のメタファー×新結合と水面のたとえ×connecting_the_dots×決断の機会は数珠つなぎ×retrospective×エフェクチュエーション→
- →生きるための思想史×魂の脱植民地化×神秘×生きる能力の阻害要因を解明・解除する×フロイト×孔子×ウィーナー×学習×ローレンツ×仏陀×親鸞×縁起×ポラニー×ヴィットゲンシュタイン×語りえぬもの×知る×スピノザ×マルクス×フロム×神秘的な合理主義×盲点×合理的×神秘主義→
- →エンジニアの知的生産術_著者公式ページ×エンジニアの知的生産術5刷記念イベント×コーディングを支える技術_著者公式ページ×主観か客観かではなく、一人の主観から大勢の主観へ×plurality×polis×polis体験レポート:テロの原因究明をするか×polis体験レポート:同性婚を合法化すべきか×盲点カード×盲点×二人が違うことを言う絵のシリーズ×たとえ×kj法×kj法勉強会@ロフトワーク×西尾のベクトル検索×パスタロジック×ゼロワンバース→
- →京都大学サマーデザインスクール×学び方×盲点×難しい問題を考える×書き出してから考える×暗算と筆算はどちらが簡単か×わからないこと×自分で盲点に気づく×ボトムアップ×灘校土曜講座×学びのプロセス×名古屋大学→
- →2015-06-15×クリーンファシリテーション×クリーンランゲージ×問題を掘り下げてはいけない×proモデル×問題×盲点×心の問題を掘り下げるのは有害×シンボリックモデリング×metaphors_in_mind×基本5質問×メタファーを引き出す二択の問×メタファー×共感覚×オノマトペ→
- →フレームワークのメリットとデメリット×盲点×既存の固定化した思考の枠×エンジニアの知的生産術×(6.2.2.2)_フレームワークのメリットとデメリット×既存の枠組み×固定化した思考×思考の固定化×思考の枠×固定化×枠×網羅的でないことに気付けない時→
- →タスク×ふせん×川喜田二郎×フェーズ×知識×あなた×サイクル×読み方×メタファ×本章×優先順位付け×kj法×全体像×しくみ×抽象化×プログラミング×やる気×ピラミッド×ソフトウェア×注×プログラム×whole_mind_system×パターン×プログラミング言語×ボトムアップ×たとえ話×価値×プロセス×知的生産術×分野×概念×アウトプット×グループ×学び×目的×他人×言語化×海馬×情報×考え方×誰か×視点×創造性×書き出し法×速度×盲点×教科書×原動力×方法×アナロジー×表札×発想法×方法論×それ自体×抜き書き×incremental_reading×単語×抽象概念×情報収集×見積り×一覧性×著者×文章×意思決定×シナプス×脳内×インプット×記憶×ルール×暗黙知×ゴール×写経×ソースコード×モデル×仮説×顧客×コンピュータ×実験×エンジニア×グラデーション×モデル化×アジャイル×supermemo×速読術×言葉×自分×複数×ボトルネック×ラット×複数人×フィードバック×具体例×symbolic_modelling×書籍×何回か×コーディング×岩波書店×メリット×レポート→
- →同じ×似ている×違い×考え方×似ている→違いは？×「同じ」と「違う」は両立する×同一視×kj法のw型問題解決モデルとu理論、それぞれの問題意識×「同じ」と「似ている」の違い×イコールだと思い込んでいた集合×他者の視点で盲点に気付く事例×他人×質問×盲点×インテグレーティブシンキング×インテグレーティブ・シンキング→
"Engineer's way of creating knowledge" the English version of my book is now available on [Engineer's way of creating knowledge]
(C)NISHIO Hirokazu / Converted from [Scrapbox] at [Edit]