Skip to main content

Link options

Edit this page on GitHub

SvelteKit では、アプリのルート(routes)間の移動に、(フレームワーク固有の <Link> コンポーネントではなく) <a> 要素を使用します。ユーザーが、href がアプリのものであるリンク (外部サイトではないリンク) をクリックする場合、SvelteKit はそのコードをインポートし、データを取得するために必要な load 関数を呼び出して、新しいページに移動します。

data-sveltekit-* 属性でリンクの挙動をカスタマイズすることができます。これらは <a> 自身やその親要素に適用することができます。

data-sveltekit-preload-data

ユーザーがリンクをクリックしたことをブラウザが検知するより前に、(デスクトップでは) マウスがリンクをホバーしたことや、touchstartmousedown がトリガーされることを検知することができます。どちらの場合も、click イベントが発生することを経験に基づいて推測することができます。

SvelteKit はこの情報を使ってインポートするコードやそのページのデータの取得をいち早く開始することができ、数百ミリ秒を稼ぐことができます。これが、ユーザーインターフェースが遅延していると感じるか、それともきびきび動いていると感じるかの差になります。

この動作は data-sveltekit-preload-data 属性によってコントロールすることができ、2つの値のうちどちらかを設定することができます:

  • "hover" は、マウスがリンクの上にきたときにプリロードを開始します。モバイルでは、touchstart でプリロードが開始されます
  • "tap" は、touchstartmousedown イベントが検知されるとすぐにプリロードが開始されます

デフォルトのプロジェクテンプレートには、src/app.html<body> 要素に data-sveltekit-preload-data="hover" が適用されており、デフォルトで全てのリンクがホバー時にプリロードされます:

<body data-sveltekit-preload-data="hover">
  <div style="display: contents">%sveltekit.body%</div>
</body>

時には、ユーザーがリンクをホバーしたときに load を呼ぶのは望ましくないことがあるでしょう。誤検出の可能性もありますし (必ずしもホバーに続いてクリックが発生するわけではない)、データの更新が非常に早い場合はデータが古くなってしまうこともあります。

これらの場合には、値に "tap" を指定します。こうすると SvelteKit は、ユーザーがリンクをタップまたはクリックしたときのみ、load を呼び出すようになります:

<a data-sveltekit-preload-data="tap" href="/stonks">
  Get current stonk values
</a>

プログラムで $app/navigationpreloadData を実行することもできます。

ユーザーがデータ使用量の削減を選択している場合、つまり navigator.connection.saveDatatrue になっている場合は、データは決してプリロードされません。

data-sveltekit-preload-code

リンク先の データ をプリロードしたくない場所であっても、コード をプリロードするのは有益なこともあります。data-sveltekit-preload-code 属性は data-sveltekit-preload-data と同様に動作しますが、4つの値から選択できる点が異なります。'先行度'('eagerness') の降順で並べると:

  • "eager" は、すぐにリンクをプリロードします
  • "viewport" は、リンクがビューポートに入るとすぐにプリロードします
  • "hover" - コードだけがプリロードされることを除き、上記(data-sveltekit-preload-data"hover")と同じです
  • "tap" - コードだけがプリロードされることを除き、上記(data-sveltekit-preload-data"tap")と同じです

viewporteager は、ナビゲーション直後の DOM に存在するリンクにのみ適用されることにご注意ください。リンクが後から追加された場合 (例えば {#if ...} ブロックの中)、hovertap によってトリガーされるまでプリロードされません。DOM の変更を積極的に観察することによって生じてしまうパフォーマンス劣化を避けるためです。

コードのプリロードはデータのプリロードの前提条件であるため、この属性は、存在するどの data-sveltekit-preload-data 属性よりも先行度が高い値(more eager value)を指定した場合にのみ、効果を発揮します。

data-sveltekit-preload-data と同様、ユーザーがデータ使用量の削減を選択している場合、この属性も無視されます。

data-sveltekit-reload

時には、SvelteKit にリンクを処理させないで、ブラウザに処理をさせる必要があります。data-sveltekit-reload 属性をリンクに追加すると…

<a data-sveltekit-reload href="/path">Path</a>

…リンクがクリックされたときにフルページナビゲーションが発生します。

rel="external" 属性があるリンクも同様に扱われます。加えて、プリレンダリング中 は無視されます。

data-sveltekit-noscroll

内部のリンクに移動するとき、SvelteKit はブラウザのデフォルトのナビゲーションの挙動を模倣します: ユーザーがページの左上に来るように、スクロールポジションを 0,0 に変更します (リンクに #hash が含まれている場合は、ID が一致する要素までスクロールします)。

特定のケースでは、この挙動を無効化したいことがあるでしょう。data-sveltekit-noscroll 属性をリンクに追加すると…

<a href="path" data-sveltekit-noscroll>Path</a>

…リンクがクリックされたあとのスクロールを中止します。

Disabling options

これらのオプションが有効になっている要素の中でこれらのオプションを無効にするには、"off" 値を使用します:

<div data-sveltekit-preload-data>
  <!-- these links will be preloaded -->  <a href="/a">a</a>
  <a href="/b">b</a>
  <a href="/c">c</a>

  <div data-sveltekit-preload-data="off">
    <!-- these links will NOT be preloaded -->    <a href="/d">d</a>
    <a href="/e">e</a>
    <a href="/f">f</a>
  </div>
</div>

条件によって要素に属性を適用する場合は、このようにします:

<div data-sveltekit-reload={shouldReload ? '' : 'off'}>

HTML では <element attribute><element attribute=""> が同等であるため、これがうまく動作します

previous Errors