@supabase/auth-helpers-nextjsを使用した認証周りで起きる画面のチラつきを擬似的に防止する方法

目次

１. 問題の経緯
２. 開発環境
３. 解決手順
４. 結果
５. おわりに

１. 問題の経緯

@supabase/auth-helpers-nextjsを使用して、ログイン機能を作成したのですが、
ログインをしていない状態でトップページにアクセスすると、
「ログイン後にしか見られない画面が一瞬見えてしまう（チラつき）」
という事象が発生しました。
調べてみた感じだと、特にバグとかそういうのではなさそうでした。

loading.tsxやSuspenseコンポーネントを使用して解決を試みたのですが、
なかなか上手くいかなかったので、今回の方法で落ち着きました。（完全敗北）

なお、今回のログインには、SupabaseのcreateServerComponentClientを使用して、
サーバーサイドで認証されたユーザーのsessionを使用します。

2. 開発環境

Package	Version
next	14.0.4
react	^18
tailwindcss	^3.3.0
@supabase/auth-helpers-nextjs	^0.9.0
@supabase/supabase-js	^2.39.3

3. 解決手順

まず、以下のように、認証されたユーザーのsessionを取得します。

Component.tsx

const supabase = createServerComponentClient({ cookies });

const { data: { session } } = await supabase.auth.getSession();

※サーバーコンポーネントになるので、"use client"を使用しているコンポーネントで使用する場合は、このセッション情報をpropsで渡して使用する、など工夫が必要です。

次に、useRouterを使用して、セッション情報がないユーザーはログイン画面に遷移させる処理を書きます。

page.tsx

import { useRouter } from "next/navigation";

const router = useRouter();
if (session === null) {
  router.push("/login");
}

この処理が発火するまでに一瞬画面が見えてしまうわけですね。

そこで、sessionの状態で見せる画面（コンポーネント）を切り替えるようにします。

page.tsx

return (
  <>
    {session ? (
      // ログイン後に見える内容
    ) : (
      // 未ログインの場合に見える内容
      // ex. 真っ白な画面
      <div className="fixed h-full w-full bg-white"></div>
    )}
  </>
);

4. 結果

チラつきが発生する間は真っ白な画面が表示され、
少しだけUIが良くなったと思います。

5. おわりに

Next.jsの場合、ビルド後はさほど気にならないぐらい短いですが、気になる方はお試しを。
あと、この方法以外で良い解決策があったら教えて下さい。

以上です。