Nuxt.js dynamic routing

Text

SPA ?

SSR ?

Pre-rendering ?

SPA

<html>
......

<div id="app"></div>

......
</html>

bundle_1.js

bundle_2.js

bundle_5.js

bundle_4.js

bundle_3.js

SSR

bundle_1.js

bundle_2.js

bundle_5.js

bundle_4.js

bundle_3.js

サーバー

.html

んで、

サーバに置く Node.js のプログラムが必要です。

サーバ側の負荷がかなり増えます。(CPU を多用する負荷)

Pre-rendering

固定内容が多いページに向け

例：

www.oro.com/ja/      80%

www.oro.com/bs/      10%

www.oro.com/cd/      10%

注意点：

SSR, Pre-rendering は

ユーザー最初ページにアクセスする時の UX を向上する技術です。

bundle_1.js

bundle_2.js

bundle_5.js

bundle_4.js

bundle_3.js

index.html

サーバー

bundle_1.js

bundle_2.js

bundle_5.js

bundle_4.js

bundle_3.js

index.html

ページ遷移する時

<html>
.....

    <header></header>
    <main>
        contents
        contents
        contents
        contents
    </main>
    <aside></aside>
    <footer></footer>
.....
</html>

xxxxx.{ js, json}

サーバ

<html>
.....

    <header></header>
    <main>
        new contents
        new contents
.......

使っている nuxt-template

全サイト Pre-rendering

遭った罠

Polyfill

IE に対する
promise polyfill

object-fit polyfill

polyfill をインポートする時、nuxt.config.js で

該当する JS に no-ssr オプションをつけないといけない

Created 問題

サーバ側で呼び出した Created lifecycle hook

クライアント側で呼び出した Created lifecycle hook

生成した内容が違う

じゃ動的な内容を処理してみようか。

Nuxt.js 動的ルーターリング

---/
    index.vue

   /- disclaim
      /- index.vue

   /- about
      /- index.vue

   /- _news
      /- _date
         /- _post-id

フォルダ構造

index_a.html

index_b.html

index_c.html

index_d.html

index_e.html

index_a.html がほしい

サーバ

index_a.html

index_b.html

index_c.html

index_d.html

index_e.html

index_f.html がほしい

??? 

404 の壁です。

サーバ

index_a.html

index_b.html

post1.json

post2.json

post3.json

post1.html を読みたい

404 の壁です。

サーバ

index_a.html

index_b.html

post1.json

post2.json

post3.json

post1.html を読みたい

サーバ

200.html

Post_template.html

template と結合

post1.html

index_a.html

index_b.html

post1.json

post2.json

post3.json

post4.html を読みたい

サーバ

200.html

Post_template.html

404

404.html

404.html

ここはちょっと怪しい

index_a.html

index_b.html

post1.json

post2.json

post3.json

200.html

Post_template.html

ここなんかやりたい

index_a.html

index_b.html

post1.json

post2.json

post3.json

200.html

Post_template.html

Middleware

404.html

MiddleWare

として使える機能

Nuxt.js:

asyncData: https://nuxtjs.org/guide/async-data

middleware: https://nuxtjs.org/guide/routing#middleware

Vue router:

Navigation Guard:

https://router.vuejs.org/guide/advanced/navigation-guards.html

コンポーネント内ガード

Asyncdata

export default {
  asyncData ({ params, error }) {
    return axios.get(`https://my-api/posts/${params.id}`)
    .then((res) => {
      return { title: res.data.title }
    })
    .catch((e) => {
      error({ statusCode: 404, message: 'Post not found' })
    })
  }
}

Page コンポーネントでしか使えない

Middleware

export default function ({ store, redirect }) {
  // If the user is not authenticated
  if (!store.state.authenticated) {
    return redirect('/login')
  }
}

グローバルで使える

middleware/authenticated.js

nuxt.config.js

export default {
  middleware: 'authenticated'
}
export default {
  router: {
    middleware: 'authenticated'
  }
}

page.vue

Vue router: ナビゲーションガード

Navigation Guards

export default {
    beforeRouteEnter (to, from, next) {
        console.log(to, from)

        next()
    }
}

page.vue

Made with Slides.com