Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

docs: clarify options prop requirement for Pages Router SSR with serverState

オープン
  • 何か問題がありますか？
#371 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
55/100
issue の種類
ドキュメント
明瞭さ
明確に書かれている
活発さ
停滞
技術スタック
next.js, typescript
領域
documentation

調査の方向性

リンク先のURLにあるPages Router SSRのドキュメントから始め、react.tsxの8-13行目と35-54行目を読んで、FlagsmithProviderの初期化契約を確認してください。serverState、options prop、preventFetch、およびmanual-initの結果を扱うように、例と説明用の注記を更新してください。完了は、一覧にある受け入れ基準によって定義されます。

索引モデルが issue の本文から書いたものです。

説明

enhancement good first issue

Description

Problem

The current Next.js Pages Router SSR documentation example shows how to use serverState but doesn't mention that the options prop is required for automatic client-side initialization.

This leads to a common issue where developers following the docs experience:

  • useFlagsmithLoading() stuck on { isLoading: true, isFetching: true }
  • Loading states never updating
  • Confusion about why hooks don't work as expected
Root Cause

The FlagsmithProvider component has an intentional design contract:

// From react.tsx type definition
options?: Parameters<IFlagsmith['init']>[0] // Initialisation options, if you do not provide this you will have to call init manually
  • Without options: Users must call flagsmith.init() manually
  • With options: Component automatically calls init() on mount

This design is intentional but not documented in the Pages Router example.

Current Documentation Gap

The current example shows:

<FlagsmithProvider
  flagsmith={flagsmithRef.current}
  serverState={flagsmithState}
>
  <Component {...pageProps} />
</FlagsmithProvider>

Issue: This works for rendering flags, but hooks like useFlagsmithLoading() will be stuck because init() was never called to register callbacks.

What Needs to Be Documented

The documentation should clearly explain:

  1. The options prop is required for automatic client-side initialization
  2. When using serverState, you should pass options={{ preventFetch: true }}
  3. Why preventFetch: true is recommended (avoids duplicate API calls, uses server-side flags)
  4. What happens without options (hooks won't work, manual init() required)

Suggested Fix

Update the Pages Router documentation example to:

  • Include options={{ preventFetch: true }} in the code example
  • Add a callout/note explaining why it's needed for hooks to work
  • Explain the consequence of omitting it (stuck loading states)

Note: The code already has a comment in the type definition (react.tsx:10), but the documentation doesn't reflect this requirement.

Additional Context

User Impact

This affects developers:

  • Following the Pages Router SSR documentation
  • Using useFlagsmithLoading() or other hooks
  • New to Flagsmith (not familiar with the initialization contract)
Customer Report

A customer recently reported this exact issue:

  • Using Next.js 15 Pages Router
  • Following the docs exactly as written
  • useFlagsmithLoading() stuck on loading state
  • Adding options={{ preventFetch: true }} immediately fixed it
Reproduction

I've created a minimal reproduction project that demonstrates:

  1. The issue when options is omitted
  2. The fix when options={{ preventFetch: true }} is added

Acceptance Criteria

  • Pages Router example updated to include options={{ preventFetch: true }}
  • Clear note/callout added explaining why options is required
  • Documentation explains what happens without the options prop

Related Code

  • Component type definition: react.tsx:8-13
  • Initialization logic: react.tsx:35-54
主要言語
TypeScript
スター
67
フォーク
47
平均マージ
2時間 26分
マージ済み PR（30日）
2

環境構築

  • Dockerfile・Docker Compose ファイルなし
  • プルリクエストのテンプレートあり
  • コントリビューションガイドなし

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

Flagsmith/flagsmith-js-client のほかの issue

Flagsmith/flagsmith-js-client の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。