server/api/lazy.tsとして以下のレスポンスに2秒ぐらいかかかるAPIを用意します。useFetch('/api/lazy')</script>遷移前のページから遷移後のページに遷移しようとすると2秒後にページが表示されます。lazyオプションを利用では、lazyオプションを利用した場合どうなるか見ていきましょう。</script>遷移前のページから遷移後のページに遷移しようとすると即座にページが表示されますがページの内容は空のままです。2秒後にページの内容が表示されます。1度戻ってから再度移動をすると、前回のキャッシュを元にページの内容を表示しておき最新の情報を取得してからページを表示しています。lazyオプションを利用する際の注意lazyオプションを利用する際にはレスポンスがリアクティブなデータである事キャッシュがあればひとまずキャッシュが返ってくることを注意しなくてはいけません。以下のようにdataの値を別の変数に入れて利用しようとします。data.value</script>ページ表示時はうまく表示が行えているような感じがしますが、ページ遷移時にdata2にはキャッシュされている前回の値が格納されてしまっています。リアクティブなデータを別の変数に入れる場合は、ちゃんとcomputedを利用する必要があるので注意してください。トゥーアール」の代表をやっています。最近はReactばっかり書いています。トゥーアールPublicationトゥーアールはフロントエンドに特化したWeb制作会社です。ReactやNext.jsなどのJavaScriptフレームワークを利用したフロントエンド開発についてお気軽にご相談ください。バッジを贈って著者を応援しようバッジを受け取った著者にはZennから現金やAmazonギフトカードが還元されます。トゥーアール」の代表をやっています。最近はReactばっかり書いています。JavaScript基礎入門」など執筆書籍多数。Proよくある質問LinksX(Twitter)GitHubメディアキットLegal利用規約プライバシーポリシ。