[{"data":1,"prerenderedAt":102},["ShallowReactive",2],{"legacy-question-020b1d40fa2c4153999342212469d63a":3,"legacy-question-author-koji-kadoma":75,"legacy-question-category-website-building":91},{"id":4,"title":5,"author":6,"body":7,"category":62,"date":63,"description":5,"extension":64,"locale":65,"meta":66,"navigation":67,"path":68,"seo":69,"slug":70,"stem":71,"tag":72,"updated":63,"__hash__":74},"legacyQuestions\u002F20210405000000-g-linkと通常のリンクの違いは？.md","g-linkと通常のリンクの違いは？","koji-kadoma",{"type":8,"value":9,"toc":56},"minimark",[10,15,19,29,32,35,38,42,45,53],[11,12,14],"h2",{"id":13},"g-linkはリンク先をプリロードしrouter-linkと同じ挙動をします","「g-link」はリンク先をプリロードし、router-linkと同じ挙動をします",[16,17,18],"p",{},"Gridsome独自のコンポーネントである「g-link」は、",[20,21,22,26],"ol",{},[23,24,25],"li",{},"リンク先のページデータをプリロードする",[23,27,28],{},"動作としてはvue-routerの「router-link」と同じ",[16,30,31],{},"という特徴があります。",[16,33,34],{},"動作的にはrouter-linkなので、HTTPリクエストを伴わないページ遷移になり、スピーディにページの移動がされる上に、プリロードするのでクリックしてすぐにページが表示されるため、超高速レスポンスを実現できます。",[16,36,37],{},"Gridsomeでの通常リンクは、通常のHTMLと同様HTTPリクエストを伴うページ遷移になるので、Gridsomeを含めVue.jsでは外部ページへのリンクで使うことがほとんどです。",[11,39,41],{"id":40},"g-linkを使う際の注意点","「g-link」を使う際の注意点",[16,43,44],{},"ただし、プリロードすることはメリットだけでなくデメリットもあります。",[20,46,47,50],{},[23,48,49],{},"プリロード先のデータが大きい場合",[23,51,52],{},"リンク（プリロード先）が多い場合",[16,54,55],{},"は、初回ページをロードする際に大量のデータを受信する為ロードが遅くなる可能性があります。ロードが遅いと離脱してしまう可能性が高くなるので、本末転倒です。また、直帰率が上がってしまう要因になるので、1ページに取り入れる「g-link」の数はロードスピードとのバランスを見る必要があります。",{"title":57,"searchDepth":58,"depth":58,"links":59},"",2,[60,61],{"id":13,"depth":58,"text":14},{"id":40,"depth":58,"text":41},"website-building","2021-04-05T00:00:00.000Z","md","ja",{},true,"\u002F20210405000000-g-link",{"title":5,"description":5},"020b1d40fa2c4153999342212469d63a","20210405000000-g-linkと通常のリンクの違いは？",[73],"gridsome","imEamhbzMJ4BhMY70rCoh9TQL5LG3ehPmr_25U4zRvA",{"id":76,"title":77,"body":78,"date":82,"description":83,"extension":64,"locale":65,"meta":84,"name":87,"navigation":67,"path":88,"seo":89,"slug":6,"stem":6,"updated":82,"__hash__":90},"legacyAuthors\u002Fkoji-kadoma.md","Koji Kadoma",{"type":8,"value":79,"toc":80},[],{"title":57,"searchDepth":58,"depth":58,"links":81},[],"2021-04-01T00:00:00.000Z","Webエンジニアです。Javascript、PHP、Ruby、Dockerなどをメインで使っています。",{"image":85,"url":86},"https:\u002F\u002Fwww.codit.work\u002Fimgs\u002Favatar\u002Fkoji-kadoma.png","https:\u002F\u002Fkoji.pages.dev\u002F",null,"\u002Fkoji-kadoma",{"title":77,"description":83},"H1yaGicrsv1CzYTbFeEXQosuYx93lIutD3_XwXMhAFk",{"id":92,"title":93,"body":94,"date":82,"description":93,"extension":64,"locale":65,"meta":98,"navigation":67,"path":99,"seo":100,"slug":62,"stem":62,"updated":82,"__hash__":101},"legacyCategories\u002Fwebsite-building.md","Webサイト構築",{"type":8,"value":95,"toc":96},[],{"title":57,"searchDepth":58,"depth":58,"links":97},[],{},"\u002Fwebsite-building",{"title":93,"description":93},"h9jPLD2mzMm3L4sFN5qWSiSirySQQLdnxLhQcvw8VlQ",1783320301503]