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

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

Nuxt.js は、Vue.jsを使用してユニバーサルなサーバーサイドレンダリングアプリケーションを作成するために構築された強力でシンプルなフレームワークです。 Nextによって作成されました。 Reactのサーバーサイドレンダリング（SSR）フレームワーク。 NuxtはAlex＆SébastienChopinによって作成され、2017年に大きな注目を集めました。そのため、ショパン兄弟は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、と layouts ディレクトリ。これらのファイルはすべて、従来のVueアプリケーションで期待するのと同じように機能します。 Nuxtの冒険の途中で迷子になったと感じた場合、Nuxtコミュニティは素晴らしい追加を行いました README.md ドキュメントへのリンクを含む各ディレクトリへのファイル。

レイアウトディレクトリ

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

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

新しいレイアウトの作成

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

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

ページディレクトリ

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

例えば：

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

生成します…

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

デフォルトでは、このディレクトリ内のすべてのファイルは default.vue からのレイアウト layouts ディレクトリ。ただし、これを追加して作成した別のレイアウトに簡単に変更できます。 layout 財産。

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

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

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

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

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

プラグインディレクトリ

The 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);
  }
}

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

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

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

13036