Gatsbyでサイト内リンクのページリロードを防ぐプラグインを入れてみた
2019年1月5日
Qracさんの記事を参考に、サイト内リンクのページリロードを防ぐgatsby-plugin-catch-linksというプラグインを入れてみました。ほとんど本文しかないこのサイトでは効果が少なめな気がしますが、試しに入れてみました。
サイト内のページ遷移の際に、クライアントサイドのpushStateを使ってページのリロードを防いで画面遷移をSPAっぽくスムーズにしているそうです。pushStateとかpopStateは、後日情報を漁る必要あり。
導入手順
導入はプラグインを入れるだけなので簡単でした。
npmでプラグインのパッケージをインストールして、gatsby-config.jsのプラグイン一覧にプラグインを追加するだけです。
npmのセキュリティ・アラート
ただ、プラグインのパッケージをインストールする際にfound 1 high severity vulnerabilityというセキュリティエラーが出たので、出てきたアラートとやったことを記録しておきます。
$ npm i -S gatsby-plugin-catch-links
npm WARN airtable-blog@1.0.0 No repository field.
+ gatsby-plugin-catch-links@2.0.9
added 1 package from 1 contributor and audited 20796 packages in 9.586s
found 1 high severity vulnerability
run `npm audit fix` to fix them, or `npm audit` for details
$ npm audit
=== npm audit security report ===
# Run npm update webpack-dev-server --depth 2 to resolve 1 vulnerability
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ High │ Missing Origin Validation │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package │ webpack-dev-server │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ gatsby │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path │ gatsby > webpack-dev-server │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info │ https://nodesecurity.io/advisories/725 │
└───────────────┴──────────────────────────────────────────────────────────────┘
found 1 high severity vulnerability in 20796 scanned packages
run `npm audit fix` to fix 1 of them.
$ npm update webpack-dev-server --depth 2
npm WARN airtable-blog@1.0.0 No repository field.
+ webpack-dev-server@3.1.14
added 2 packages from 1 contributor, removed 2 packages, updated 14 packages and audited 24241 packages in 10.081s
found 0 vulnerabilities
$ npm audit
=== npm audit security report ===
found 0 vulnerabilities
in 20800 scanned packagesアラートの概要
webpack-dev-serverというパッケージのバージョンが3.1.10以前のものだとセキュリティの問題があるそうで、3.1.14にアップデートして解決しました。
npmはセキュリティのアラートもしてくれてありがたいですね。