Q. g-linkと通常のリンクの違いは？

「g-link」はリンク先をプリロードし、router-linkと同じ挙動をします

Gridsome独自のコンポーネントである「g-link」は、

1. リンク先のページデータをプリロードする
2. 動作としてはvue-routerの「router-link」と同じ

という特徴があります。

動作的にはrouter-linkなので、HTTPリクエストを伴わないページ遷移になり、スピーディにページの移動がされる上に、プリロードするのでクリックしてすぐにページが表示されるため、超高速レスポンスを実現できます。

Gridsomeでの通常リンクは、通常のHTMLと同様HTTPリクエストを伴うページ遷移になるので、Gridsomeを含めVue.jsでは外部ページへのリンクで使うことがほとんどです。

「g-link」を使う際の注意点

ただし、プリロードすることはメリットだけでなくデメリットもあります。

1. プリロード先のデータが大きい場合
2. リンク（プリロード先）が多い場合

は、初回ページをロードする際に大量のデータを受信する為ロードが遅くなる可能性があります。ロードが遅いと離脱してしまう可能性が高くなるので、本末転倒です。また、直帰率が上がってしまう要因になるので、1ページに取り入れる「g-link」の数はロードスピードとのバランスを見る必要があります。