Nuxt.jsを使用したサーバーサイドレンダリング入門

投稿日: 2022-04-20 2022-04-20
タグ: Vue.js

Nuxt.js は、Vue.jsを使用してユニバーサルなサーバーサイドレンダリングアプリケーションを作成するために構築された強力でシンプルなフレームワークです。 Nextによって作成されました。 Reactのサーバーサイドレンダリング（SSR）フレームワーク。 NuxtはAlex＆SébastienChopinによって作成され、2017年に大きな注目を集めました。そのため、Chopin Brothersは、Vue.jsコミュニティで一般的にサーバー側レンダリングのエバンジェリストになり、特にサーバー側レンダリングについてVueConf2018とVue.jsアムステルダムで講演しました。

Nuxtとサーバー側のレンダリングは、独自の別個のテクノロジーと見なすことができ、本全体をそれらに捧げることができます。この記事はNuxt.jsの概要であり、Nuxt.jsとサーバー側のレンダリング全般について理解を深めることができます。

なぜサーバーサイドレンダリングなのか？

それはすべて素晴らしいことですが、サーバーサイドレンダリング（SSR）とは何ですか、なぜ気にする必要がありますか？さて、シングルページアプリケーションには1つの大きな問題があります。多くの検索エンジンは、意図したとおりにアプリケーションをクロールできません…まだ。 SEOがアプリの成功のために大きな役割を果たす必要がある場合、これは大きな問題です。確かに、Googleのアルゴリズムは、これらの新しいエクスペリエンスをより適切に処理するために近年更新されていますが、完全ではありません。それはさておき、サーバー側のレンダリングも高速でパフォーマンスが向上します。これは、アプリケーションのSEOにとっても重要です。

[T]シングルページアプリケーションの大きな問題が1つあります。多くの検索エンジンは、意図したとおりにアプリケーションをクロールできません…まだ。 SEOがアプリの開発プロセスの大部分を占める場合、これは大きな問題です。

Nuxt.jsのインストール

Nuxtを使い始めるのは簡単です。開始する必要があるのは、 VueCLIだけです。以前にVueCLIを使用したことがある場合は、Nuxtコマンドとアーキテクチャに非常に馴染みがあります。 CLIがインストールされていない場合は、$ npm install vue-cliを使用して簡単にインストールできます。インストールしたら、次のコマンドを使用してNuxtスターターテンプレートでアプリを初期化します。

$ vue init nuxt-community/starter-template <project-name>
$ cd <project-name>
$ npm install

# Launch the project
$ npm run dev

ブラウザにNuxtのアニメーションロゴが、CLIセットアップで定義したアプリのタイトルと説明とともに表示されます。

Nuxtのアーキテクチャ

CLIコマンドと同様に、NuxtのアーキテクチャはVue.js 2と似ていますが、pages、middleware、plugins、[などのいくつかの点が異なります。 X158X]ディレクトリ。これらのファイルはすべて、従来のVueアプリケーションで期待するのと同じように機能します。 Nuxtの冒険の途中で迷子になったと感じた場合、Nuxtコミュニティはドキュメントへのリンクを含む優れたREADME.mdファイルを各ディレクトリに追加しました。

レイアウトディレクトリ

layoutsディレクトリは、アプリケーションが使用できるさまざまなレイアウトをすべて定義します。これは、たとえばヘッダーやフッターなど、アプリ全体で使用される一般的なグローバルコンポーネントを追加するのに最適な場所です。新しいページごとに何度も再定義したくないコンポーネントをこのファイルに含める必要があります。

WordPressに精通している場合は、レイアウトをWordPress内のページテンプレートと比較できます。デフォルトでは、pagesディレクトリの.vueファイルに使用されるデフォルトのテンプレートはdefault.vueです。 <nuxt/>要素は、ページのすべてのコンポーネント、テキスト、アセット、およびデータを挿入するために必要です。

新しいレイアウトの作成

新しいNuxtレイアウトを作成するには、新しい.vueファイルを作成するのと同じくらい簡単です。たとえば、ブログレイアウトを作成する場合は、ファイルblog.vueをlayoutsディレクトリに追加して新しいレイアウトを作成できます。そこから、ブログ固有のコンポーネントを追加したり、propsやVuexストアのデータを含めたりすることができます。

レイアウトに<nuxt/>タグを含めることを忘れないでください。

ページディレクトリ

pagesディレクトリはかなり洗練されています。 Nuxtでは、ルーターファイルはありません。代わりに、Nuxtはpagesディレクトリ内の新しい.vueファイルごとに新しいルートを生成します。ディレクトリまたは.vueファイルにアンダースコア（_）を追加することで、動的ルートを作成することもできます。

例えば：

|__ pages/
   |__ users/
      |__ _id.vue

生成します…

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

デフォルトでは、このディレクトリ内のすべてのファイルは、layoutsディレクトリのdefault.vueレイアウトを利用します。ただし、layoutプロパティを追加することで、これを作成した別のレイアウトに簡単に変更できます。

<script>
export default {
  layout: 'blog'
}
</script>

もちろん、Nuxtページに追加できる他のいくつかのプロパティがあります。

ミドルウェアディレクトリ

ミドルウェアディレクトリには、すべてのミドルウェアが含まれています。レイアウトがレンダリングされるページの前に実行されるカスタム関数のコレクション。

ミドルウェアの実際の例は、安全なデータを含むページがロードされるたびにユーザーを認証することです。つまり、ユーザーが認証を必要とするルートにアクセスするたびに、カスタムミドルウェア関数が実行され、ユーザーがログインしているかどうかに応じてブール値が返されます。そうでない場合は、ユーザーがログインしてそのページに戻ることができるように、それらを/loginルートにルーティングします。

プラグインディレクトリ

pluginsディレクトリは、ルートVueアプリケーションをインスタンス化する前にロードするJavaScriptプラグインを追加するために使用されます。このディレクトリは、多かれ少なかれvue-notificationsなどのプラグインファイルを保存する場所です。以下の例は、Nuxtドキュメントからのものです。

アプリに通知を表示する場合は、アプリケーションをレンダリングする前に通知を初期化する必要があります。

plugins / vue-notifications.js

import Vue from 'vue'
import VueNotifications from 'vue-notifications'

Vue.use(VueNotifications)

nuxt.config.js

module.exports = {
  plugins: ['~/plugins/vue-notifications']
}

ページアニメーションと読み込みバー

Nuxtで私のお気に入りの1つは、箱から出してすぐに使えるアニメーションのサポートです。いくつかの組み込みCSSクラスを使用して、ページの内外を簡単にアニメーション化できます。ページ間をアニメーション化すると、アプリケーションを流動的でまとまりのあるものに感じることができます。ルート間でページをフェードインおよびフェードアウトする場合は、次のようにします。

.page-enter-active,
.page-leave-active {
  opacity: 1;
  transition: opacity .25s;
  animation-duration: .3s;
  animation-fill-mode: both;
}

.page-enter-active {
  animation-name: pageFadeInUp;
}

.page-leave-active {
  animation-name: pageFadeOutDown;
}

.page-enter, .page-leave-to {
  opacity: 0;
}


@-webkit-keyframes pageFadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 1.25%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@-webkit-keyframes pageFadeOutDown {
  0% {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(0, 1.25%, 0);
  }
}

ローディングバーの色を変更する

ロードバーの色を変更するには、nuxt.config.jsファイル内のloadingオブジェクトのCSSを変更します。

nuxt.config.js

loading: { color: '#3B8070' },

コンポーネントのSSRを無効にする

多くの理由の1つで、サーバー側でページまたはコンポーネントをレンダリングしたくない場合があります。 Nuxtはこれを非常に簡単にします。クライアント側でコンポーネントをレンダリングする場合は、<no-ssr>タグを追加するだけです。

<template>
...
  <no-ssr>
    <some-component />
  </no-ssr>
...
</template>

結論

ご覧のとおり、Nuxtでカバーする多くのがありますが、Nuxtがどのように機能するか、なぜそれが重要であるか、Nuxtを使用して次のWebアプリケーションをスキャフォールディングする方法について一般的に理解できたと思います。

それについての詳細をお探しの場合は、Nuxtに優れたドキュメントがあり、多数の例とコミュニティスターターテンプレート自体が含まれています。前述のように、素晴らしいコミュニティは、各ディレクトリに README.md ファイルを追加し、そのディレクトリに固有の追加情報とドキュメントへのリンクを追加しました。

getdocs

8684