こんにちは。よっしーです(^^)
今日は、SvelteKitでのstate管理について解説しています。
背景
SvelteKitでのstate管理について調査する機会がありましたので、その時の内容を備忘として記事に残しました。
SvelteKitでのstate管理について
クライアントのみのアプリの構築に慣れている場合、サーバーとクライアントにまたがるアプリでの状態(state)管理は困難に思えるかもしれません。このセクションでは、よくある落とし穴を回避するためのヒントを紹介します。
URLに状態を保存する
リロード後も維持されるべき状態や、サーバーサイドレンダリング（SSR）に影響を与えるべき状態（例えば、テーブルのフィルターやソートルールなど）がある場合、URLの検索パラメータ（?sort=price&order=ascendingのような）はそれらを配置するのに適した場所です。これらは<a href="...">や<form action="...">属性に配置したり、goto('?key=value')を通してプログラム的に設定したりできます。これらのパラメータはload関数内ではurlパラメータを通じてアクセスでき、コンポーネント内では$page.url.searchParamsを通じてアクセスできます。
スナップショットに一時的な状態を保存する
「アコーディオンが開いているか？」といった一部のUI状態は使い捨てです – ユーザーが別のページに移動したりページを更新したりしても、その状態が失われても問題ありません。一方で、ユーザーが別のページに移動して戻ってきた時に、データを保持したい場合もあります。しかし、そのような状態をURLやデータベースに保存するのは大げさすぎるでしょう。このような場合のために、SvelteKitはスナップショットを提供しています。スナップショットを使用すると、コンポーネントの状態を履歴エントリーに関連付けることができます。
おわりに
今日は、 SvelteKitでのstate管理について解説しました。
何か質問や相談があれば、コメントをお願いします。また、エンジニア案件の相談にも随時対応していますので、お気軽にお問い合わせください。
それでは、また明日お会いしましょう(^^)
コメント