ITエンジニアの種籾(たねもみ)

IT技術とか株式投資とか。

Gatsby.js でMarkdown記事内のサイト内リンクを高速化しよう

2020年 07月 23日

目次

Gatsby.js で構築したブログサイトでは、記事を Markdown で投稿しています。 いくつか記事を書いて、確認していると Markdown に記述したサイト内リンクが、外部リンクと同様に全画面リロードしてしまっています。

Markdown でサイトマップを作ろうと思ったときに、その記事のサイト内リンクがすべて画面リロードしてしまうのでは?と心配になり対処方法を調べました。

本記事では、これを解決したいと思います。

リロード問題

Gatsby.js の特徴の1つに SPA があり、サイト内のページ遷移は<Link/>を使ってます。 自作のコンポーネントだと<Link/>でリンクを作成すればいいのですが、 記事本文は Markdown で記述しているので<Link/>を使えません。

例えば、トップページへのリンクだと

の両方とも全画面リロードになってしまっています。

内部リンクの方は、サイト内の移動なので <Link/> と同じ動きにしたいです。 わかりにくいですが、全画面リロードすると Chrome であればタブに表示されている favicon が一瞬だけ「更新中」のマークに変わります。

解決するプラグインがありました。

gatsby-plugin-catch-links です。

このプラグインは、React で gatsby-link を使って作成されていないすべてのローカルリンクを遮断し、それらの動作を gatsby-link のナビゲートの動作に置き換えます。これにより、ローカルページ間を移動する際にブラウザがページ全体を更新する必要がなくなり、シングルページアプリケーション (SPA) の感覚が維持されます。

なので、remark に限ったことではないようですが、React コンポーネント以外のリンク生成を監視して、 <Link/>と同じ動作にしてくれるようです。

セットアップ

さっそくプラグインを使えるようにします。

まずはパッケージのインストールです。

[~/workspace/crz33-gatsby] $ npm install --save gatsby-plugin-catch-links

あとは、gatsby-config.jsでプラグインの設定をします。

下記を追加するだけです。

plugins: [`gatsby-plugin-catch-links`];

確認

下記で、内部リンクをクリックしても、画面の全体リロードしなくなりました。

以上です。

広告