🧨

@supabase/ssr 推奨されているが、まだベータ版だよ

2024/11/28に公開

supabase SSRとは

Supabase SSRとは、Supabaseが提供する**サーバーサイドレンダリング(SSR)**対応の機能です。

これにより、Supabaseのデータベースや認証機能を、サーバーサイドで処理しながらHTMLを生成することが可能になります。SSR対応の主な目的は、セキュリティ、パフォーマンス、SEOの向上
https://supabase.com/docs/guides/auth/server-side

https://www.npmjs.com/package/@supabase/ssr

SupabaseのSSR対応で得られるメリット

SupabaseがSSRをサポートすることで、以下のような具体的なメリットが得られます:

(1) SEOの向上

  • サーバーサイドでHTMLを生成するため、検索エンジンがコンテンツを正しくインデックスできます。

(2) セキュリティの向上

  • 認証トークンがクライアントに露出しないため、安全な認証が可能。

(3) 初期描画速度の向上

  • ユーザーがページを開いた瞬間からコンテンツが表示されるため、より良いユーザー体験を提供。

(4) 安全なデータ取得

  • サーバーサイドで直接Supabaseのデータベースにアクセスできるため、認証が必要なAPIも安全に利用可能。

以前と変わった点

従来のSupabaseは、主にクライアントサイド(ブラウザ側)でデータ取得や認証を行っていました。この方法では繰り返しになりますが以下の課題があった
一番を大きいのは、セキュリティリスク部分:

  1. SEOの非対応
    • クライアントサイドでレンダリングされるデータは、検索エンジンのクローラーに正しく認識されません。
  2. セキュリティリスク
    • 認証トークンをlocalStorageで管理すると、XSS攻撃によるリスクが高まります。
    • localStorage で管理していたものをcookieで管理するようになった
  3. 初期表示の遅延
    • データを取得してからレンダリングするため、ユーザーが最初にコンテンツを目にするまでの時間が長くなる可能性がある。

@supabase/ssrを推奨

現在Auth Helpers パッケージを使用している場合、ドキュメントは引き続き利用可能ですが、今後は新しい@supabase/ssrパッケージへの移行が推奨されるため、新しいパッケージに移行することをお勧めします。

だがしかし

このパッケージは現在ベータ版です。

採用することをお勧めしますが、API はまだ不安定であり、将来的に重大な変更が行われる可能性があることに注意してください。

https://supabase.com/docs/guides/auth/server-side

まとめ

新しい技術なだけあって、大きな変更がある可能性もあるので

実際のプロダクトでsupabase SSRを利用するのは

もう少し待ったほうが良いですね〜。

Discussion