サーバーサイドレンダリング

従来のサーバーサイドレンダリング

シングルページアプリケーション(SPA)

Nuxt.jsとは

• Nuxt.jsはVue.jsをベースとした汎用アプリケーションフレームワークです。
• クライアント/サーバーアーキテクチャの抽象化を通じて、主にUIレンダリングに焦点を当てています。
• 使用方法に関しては、コンポーネントの記述方法はVueとほぼ同じですが、いくつかのフック関数とサーバーサイドレンダリング関連の機能が異なります。

Nuxt.jsの特性

• Vue.jsをベースとしている
• 自動コード分割
• サーバーサイドレンダリング
• 強力なルーティング機能、非同期データ対応
• 静的ファイルサービス
• ES2015+構文サポート
• JavaScriptとCSSのバンドルと圧縮
• HTMLヘッダータグ管理
• SASS、LESS、Stylusなどのスタイルプリプロセッサ対応

メリット

• SEOに有利（特にECサイトなど）
• ファーストビューのレンダリング速度が速い
  • 理由：サーバーサイドレンダリングは1回のネットワークリクエストで済みますが、クライアントサイドレンダリングは必要なファイルを取得→実行→データ取得→ページ表示と複数のステップが必要です。

デメリット

• サーバー要件がクライアントサイドレンダリングより高い

使用方法

1.ディレクトリ構成

• assets
  • 主に未コンパイルの静的資源（Less、SASSなど）を整理するために使用されます。
• components
  • 主にコンポーネントを格納する場所で、asyncData関数を使用できません。
• layouts レイアウトディレクトリ
  • ページレイアウト（共通ナビゲーション、フッターレイアウトなど）に使用されます。
• plugins
  • プラグイン設定を保存する場所で、1回だけ実行されます（例：axiosインターセプターでのトークン追加）。
• middleware
  • ミドルウェアで、権限検証などができ、グローバルミドルウェアは異なるルートに入るたびに実行されます。
• pages ページディレクトリ
  • Nuxtは規約型ルーティングを採用しており、設定は不要で、ファイルパス名がルートアドレスになります。
  • 例：

--| user/
-----| index.vue
-----| one.vue
--| index.vue

• 対応するルートアドレス：

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-one',
      path: '/user/one',
      component: 'pages/user/one.vue'
    }
  ]
}

• static 静的ファイルディレクトリ
  • このディレクトリのファイルはコンパイルやバンドルされず、サーバー起動後に直接ルートディレクトリにマッピングされます。
  • 例：static/story.txt ⇒ /story.txt
• store
  • Vuex関連の設定
• nuxt.config.js
  • プロジェクトに関する設定（プラグイン、ミドルウェア、ルート、SEO最適化タグなど）

2.ルーティング（規約型：規約に従って使用するだけで追加設定は不要）

基本ルーティング

pagesディレクトリの構成が以下の場合：

pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue

Nuxt.jsが自動生成するルート設定は以下の通りです：

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-one',
      path: '/user/one',
      component: 'pages/user/one.vue'
    }
  ]
}

動的ルーティング

Nuxt.jsでパラメータ付きの動的ルートを定義するには、対応するアンダースコア接頭辞のVueファイルまたはディレクトリを作成する必要があります。

以下のディレクトリ構成：

pages/
--| _slug/
-----| comments.vue
-----| index.vue
--| users/
-----| _id.vue
--| index.vue

Nuxt.jsが生成する対応するルート設定表：

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'users-id',
      path: '/users/:id?',
      component: 'pages/users/_id.vue'
    },
    {
      name: 'slug',
      path: '/:slug',
      component: 'pages/_slug/index.vue'
    },
    {
      name: 'slug-comments',
      path: '/:slug/comments',
      component: 'pages/_slug/comments.vue'
    }
  ]
}

users-idという名前のルートに:id?パラメータが付いていることに注意してください。これはそのルートがオプションであることを示しています。必須のルートにするには、users/_idディレクトリ内にindex.vueファイルを作成する必要があります。

ルートパラメータ検証

Nuxt.jsでは、動的ルートコンポーネント内でパラメータ検証メソッドを定義できます。

例：pages/users/_id.vue

export default {
  validate({ params }) {
    // 数値型である必要があります
    return /^\\d+$/.test(params.id)
  }
}

検証メソッドがtrueを返さない、またはPromiseでresolveがfalse、またはErrorがスローされた場合、Nuxt.jsは自動的に404エラーページまたは500エラーページを表示します。

3.レイアウト

デフォルトレイアウト

layouts/default.vueファイルを追加することで、アプリケーションのデフォルトレイアウトを拡張できます。

ヒント：ページの本体内容を表示するために、レイアウトファイルにコンポーネントを追加することを忘れないでください。

デフォルトレイアウトのソースコード：

<template>
  <nuxt />
</template>

カスタムレイアウト

layoutsディレクトリ内の各ファイル（トップレベル）は、ページコンポーネントのlayoutプロパティ経由でアクセスできるカスタムレイアウトを作成します。

ブログレイアウトを作成し、それをlayouts/blog.vueに保存すると仮定します：

<template>
  <div>
    <div>私のブログナビゲーションはここにあります</div>
    <nuxt />
  </div>
</template>

次に、ページ（pages/posts.vue）にカスタムレイアウトを使用するように指示する必要があります：

<template>
  
</template>
<script>
  export default {
    layout: 'blog'
    // ページコンポーネントの定義
  }
</script>

エラーハンドリング

layouts/error.vueファイルを編集することで、カスタムエラーページを定義できます。

このレイアウトファイルにはタグを含める必要はありません。このレイアウトファイルを、アプリケーションのエラー（404、500など）を表示するコンポーネントとして使用できます。

<template>
  <div class="container">
    <h1 v-if="error.statusCode === 404">ページが見つかりません</h1>
    <h1 v-else>アプリケーションでエラーが発生しました</h1>
    ホーム
  </div>
</template>
<script>
  export default {
    props: ['error'],
    layout: 'blog' // エラーページにカスタムレイアウトを指定できます
  }
</script>

4.フック関数

asyncData

• 返されたデータはdataにマージされます
• pagesでのみ呼び出せます
• このメソッドはコンポーネントのインスタンス化前に呼び出され、thisでコンポーネントインスタンスにアクセスできません

export default {
  async asyncData({ params }) {
    const { data } = await axios.get(`https://api-example.com/posts/${params.id}`)
    return { title: data.title }
  }
}

fetch

• fetchメソッドは、ページをレンダリングする前にアプリケーションの状態ツリー（store）データを埋めるために使用されます。asyncDataメソッドと似ていますが、コンポーネントのデータを設定しない点が異なります。

<script>
  export default {
    async fetch({ store, params }) {
      await store.dispatch('FETCH_STARS')
    }
  }
</script>

create

• サーバー側で実行されます。サーバーサイドレンダリングでない場合、データリクエストはbeforeMount以降のフックに配置するのが最適です。

beforeMount/mounted/updated/beforeDestroyed/destroyed

• その他のフックはVueと同様です

プロジェクトで使用された技術

Nuxt.js関連

1.グローバルミックスイン/ローカルミックスイン/グローバルコンポーネント登録

モーダル/ローディング状態などに使用できます。

2.injectプラグイン注入

注入：

export default function (ctx, inject) {
  const login = () => {}
  inject('login', login)
}

使用：

this.$login()

ログイン、ログアウト、またはAPIリクエストメソッドなどにこの方法を使用すると、より簡潔でエレガントになります。または、ネストされたコンポーネントでデータの受け渡しに便利です。

この設定はnuxt.config.jsで構成する必要があります。

3.nuxtServerInit

// store/index.js
export const actions = {
  async nuxtServerInit({ dispatch }, ctx) {
    // 状態の初期化またはトークンの設定
  }
}

サードパーティプラグインなど

1.神策分析SDK

神策分析は、企業向けに提供される深いユーザー行動分析製品で、プライベートデプロイメントをサポートし、クライアント、サーバー、ビジネスデータ、サードパーティデータの全端末での収集とモデリングを可能にします。マーケティングチャネルの効果評価、ユーザーの精密な運用改善、製品機能とユーザーエクスペリエンスの最適化、経営層向けダッシュボードによる意思決定支援、製品パーソナライズドレコメンデーション、ユーザータグシステムの構築などのアプリケーションシーンを駆動します。PaaSプラットフォームとして二次開発をサポートし、BI、ビッグデータプラットフォーム、CRM、ERPなどの内部ITシステムと連携してユーザーデータシステムを構築し、ユーザー行動データの深い価値を発揮させます。

要するに、ユーザーの行動をデータ分析することです。

2.js-cookie

Cookieの設定に使用します。

3.tailwindcss

CSSフレームワーク

• 簡潔なクラス名構文を提供
• レスポンシブレイアウトなど

4.isMobile

現在の環境がモバイル端末かどうかを判定します。

5.テキストツールチップ

デプロイメント

公開デプロイメント

• まずビルドしてからサービスを起動、生成ファイルは./nuxt/distにあります

npm run build
npm start

静的アプリケーションデプロイメント

• レンダリングとインターフェースの両方が必要で、生成ファイルはルートディレクトリのdistにあります
• 生成されたすべてのページは静的で、ブログなどに適しています

npm run generate

SEO関連