# Nuxtjs 動的なルーティング静的ページ自動生成
ブログ記事の一覧を API から取得して動的なルーティングをする場合、動的なルーティングを静的ページ作成して SEO 向上効果があります。動的ルーティングを使うサービスの仕事があったので、メモしておきます。
動的なルーティングとは
ルートの名前を決まったわけではないルートで、アクセスによって同期非同期で API 通信したりしてページへルーティングすることが動的ルーティングだと思います。
Nuxtjs において動的なルーティングを生成するには、.vue ファイル名またはディレクトリ名の前にアンダースコアを付ける必要があります。ファイル名やディレクトリ名は好みでつけられますが、その前にアンダースコアを必ず付けるルールになっています。
例えばこんな感じ
pages/
--| _slug/
# 動的ルーティングのパラメータ取得
動的なページ/page/_id.vueから id パラメーターにアクセスしたい場合 this.$route.params.id 使います。
this.$route.params は動的セグメントとスターセグメントの key/value ペアを保持するオブジェクト。
nuxtjs vue router params query ルートから取得できるもの
# 動的ルーティング静的ページ生成設定
fetch 使ってもいいでしょうけど、axios が使い慣れているので、axios の使い方貼ります。
generate にある routes()に axios 追加すれば OK の話ですが、netlify などのサーバー上でリロードしたら 404 になってしまうので、fallback: trueオプションを付けてあげた方が無難。
nuxt.config.js
import axios from "axios";
axios: {
baseURL: process.env.END_POINT,
timeout: 5000
},
generate: {
fallback: true,
routes() {
return axios
.get(process.env.END_POINT + "/list?limit=999")
.then(({ data }) => {
console.log(data);
return data.data.map(item => {
return "/list/" + item.id;
});
});
}
}
因みに上に axios baseURL 設定してありますが、generate には使えないので、END_POINT 付けています。
api 通信以外にサーバー側で json 生成しておいてフロントから route()自動生成してもいい感じですね。
const items = require("./data/items.json");
generate: {
fallback: true,
routes() {
return items.map(item => {
return "/list/" + item.id;
});
}
}
# generate のオプション
generate: {
// デフォルト設定
cache: {
ignore: [
".nuxt", // buildDir
"static", // dir.static
"dist", // generate.dir
"node_modules",
".**/*",
".*",
"README.md",
];
},
// 1 スレッドで実行されるルートの
concurrency: 500,
// クロールしたリンクに基づいて動的リンクを生成する
crawler: true,
// ビルドされる時に作成されるディレクトリ名
dir:'dist',
// vue-devtools による検査を許可するかどうか
devtools: false,
// ルートの生成除外 正規表現できる
exclude: [],
// フォールバックする HTML ファイルのパス
fallback: '200.html',
interval: 0,
// 静的ルート定義
routes: []
}
# cache
リビルドを避けるために使うオプションで
Object 型または false
# concurrency
型: Number
デフォルトは 500
魔法の concurrency オプションはルート生成を並行に設定してくれます。 1 スレッドで実行されるルートの数を指定できます。
# crawler
相対リンクをクロールし、クロールしたリンクに基づいて動的リンクを生成するクローラーがインストールされています。こんなの知らなかった
型: boolean
デフォルト: true
# dir
型: String
デフォルト: 'dist'
nuxt generate コマンドでビルドされる時に作成されるディレクトリ名
# devtools
型: boolean
デフォルト: false
vue-devtools による検査を許可するかどうかを設定
# exclude
型: Array
要素: String または RegExp
正規表現使ってルートの生成除外できる
exclude: [
/^\/admin/, // /admin で始まるパス
];
# fallback
型: String または Boolean
デフォルト: 200.html
フォールバックする HTML ファイルのパス
true を設定すると、ファイル名は 404.html になります
# interval
型: Number
デフォルト: 0
少し難しそうな意味がもつ interval オプションですが、使う時があるでしょうか？2 つのレンダーの間でのミリセカンドのインターバルで、ウェブアプリケーションからの潜在的な API に対して溢れでないようにするためのもの
# routes
型: Array
静的ルートを手動で作成したい場合使う