VueなどのJavaScriptフレームワーク/ライブラリは、サイトを閲覧するときに素晴らしいユーザーエクスペリエンスを提供できます。ほとんどは、サーバーに毎回リクエストを送信することなく、ページコンテンツを動的に変更する方法を提供します。
ただし、このアプローチには問題があります。 Webサイトを最初にロードするとき、ブラウザは表示する完全なページを受け取りません。代わりに、ページ(HTML、CSS、その他のファイル)を構築するための一連の部分と、それらをすべてまとめる方法(JavaScriptフレームワーク/ライブラリ)の説明が送信されます。これらすべての情報をまとめるには、かなりの時間がかかります。ブラウザに実際に表示するものが表示される前に。それは、フラットパックの本棚と一緒にたくさんの本が送られるようなものです。最初に本棚を作成してから、本を入れる必要があります。
これに対する解決策は賢いです:フレームワーク/ライブラリのバージョンを サーバ すぐに表示できるページを作成できます。次に、この完全なページをブラウザに送信し、さらに変更を加えても、いくつかの本と一緒に既製の本棚を送信するのと同じように、動的なページコンテンツ(フレームワーク/ライブラリ)を保持します。もちろん、本を本棚に入れる必要がありますが、すぐに使えるものがあります。
ばかげたアナロジー以外にも、他にもたくさんの利点があります。たとえば、[会社概要]ページなど、めったに変更されないページは、ユーザーが要求するたびに再作成する必要はありません。したがって、サーバーはそれを一度作成してからキャッシュするか、将来使用するためにどこかに保存することができます。この種の速度の向上はごくわずかに思えるかもしれませんが、応答性までの時間がミリ秒(またはそれ以下)で測定される環境では、少しずつ重要になります。
次のうち、デザインの原則に含まれないものはどれですか?
Vue環境でのSSRの利点について詳しく知りたい場合は、チェックアウトする必要があります。 SSRに関するVue自身の記事 。これらの結果を達成するためのさまざまなオプションがありますが、最も人気のあるものは、 Vueチームが推奨 、Nuxt。
Nuxt.jsは、Nextと呼ばれる人気のあるReactライブラリのSSRの実装に基づいています。この設計の利点を確認した後、Nuxtと呼ばれるVue用に同様の実装が設計されました。 React + Nextの組み合わせに精通している人は、アプリケーションの設計とレイアウトに多くの類似点があることに気付くでしょう。ただし、NuxtはVue固有の機能を提供して、Vue用の強力で柔軟なSSRソリューションを作成します。
Nuxtは、で本番環境に対応した1.0バージョンに更新されました。 2018年1月 活発で十分にサポートされているコミュニティの一部です。素晴らしい点の1つは、Nuxtを使用してプロジェクトを構築することは、他のVueプロジェクトを構築することとそれほど変わらないことです。実際、これは、適切に構造化されたコードベースを短時間で作成できるようにする一連の機能を提供します。
注意すべきもう1つの重要なことは NuxtをSSRに使用する必要はありません 。ユニバーサルVue.jsアプリケーションを作成するためのフレームワークとして宣伝されており、同じコードベースを使用して静的に生成されたVueアプリケーションを作成するためのコマンド(nuxt generate
)が含まれています。したがって、SSRを深く掘り下げることに不安がある場合でも、慌てる必要はありません。 Nuxtの機能を利用しながら、代わりにいつでも静的サイトを作成できます。
Nuxtの可能性を把握するために、簡単なプロジェクトを作成しましょう。このプロジェクトの最終的なソースコードは GitHubでホスト あなたがそれを見たい場合、またはあなたができる ライブバージョンを見る nuxt generate
を使用して作成Netlifyでホストされています。
まず、vue-cli
というVueプロジェクトジェネレーターを使用しましょう。サンプルプロジェクトをすばやく作成するには:
# install vue-cli globally npm install -g vue-cli # create a project using a nuxt template vue init nuxt-community/starter-template my-nuxt-project
いくつかのオプションを実行した後、これによりフォルダー内にプロジェクトが作成されますmy-nuxt-project
またはあなたが指定したものは何でも。次に、依存関係をインストールしてサーバーを実行する必要があります。
cd my-nuxt-project npm install # Or yarn npm run dev
そこに行きます。ブラウザを開いてlocalhost:3000
プロジェクトが実行されているはずです。 VueWebpackプロジェクトの作成と大差ありません。ただし、アプリの実際の構造を見ると、特にVue Webpackテンプレートのようなものと比較した場合、それほど多くはありません。
package.json
を見るまた、Nuxt自体という1つの依存関係しかないことも示しています。これは、Nuxtの各バージョンが、Vue、Vue-router、およびVuexの特定のバージョンで動作するように調整されており、それらをすべてバンドルしているためです。
nuxt.config.js
もありますプロジェクトルートのファイル。これにより、Nuxtが提供する一連の機能をカスタマイズできます。デフォルトでは、ヘッダータグ、読み込みバーの色、ESLintルールが設定されます。何を構成できるかを知りたい場合は、 こちらがドキュメントです ;この記事ではいくつかのオプションについて説明します。
では、これらのディレクトリの何がそんなに特別なのですか?
作成されたディレクトリを参照すると、すべてのディレクトリに、そのディレクトリにある内容の簡単な要約と、多くの場合ドキュメントへのリンクが記載されたReadmeが付属しています。
これは、Nuxtを使用する利点の1つです。つまり、アプリケーションのデフォルト構造です。どれか 優れたフロントエンド開発者 これに似たアプリケーションを構築しますが、 たくさんの 構造に関するさまざまなアイデアがあり、チームで作業する場合、必然的にこの構造について話し合ったり選択したりすることになります。 Nuxtはあなたに1つを提供します。
Nuxtは特定のディレクトリを探し、見つけたものに応じてアプリケーションを構築します。これらのディレクトリを1つずつ調べてみましょう。
これが唯一です 必須 ディレクトリ。このディレクトリ内のすべてのVueコンポーネントは自動的にvue-router
に追加されますファイル名とディレクトリ構造に基づいています。これは 非常に 便利。通常、私はとにかく別々のPagesディレクトリを持っていて、それらの各コンポーネントを別のルーターファイルに手動で登録する必要があります。このルーターファイルは、大規模なプロジェクトでは複雑になる可能性があり、読みやすさを維持するために分割する必要がある場合があります。代わりに、Nuxtがこのロジックをすべて処理します。
実例を示すために、about.vue
というVueコンポーネントを作成できます。 Pagesディレクトリ内。次のような簡単なテンプレートを追加してみましょう。
export default { layout: 'admin-layout' }
これですべてです。ページコンポーネントはdefault
を使用します特に指定がない限りレイアウトですが、/admin
に移動すると、admin-layout.vue
が使用されるようになりました。レイアウト。もちろん、必要に応じて、このレイアウトを複数の管理画面で共有することもできます。覚えておくべき重要なことの1つは レイアウトには要素が含まれている必要があります 。
レイアウトについて最後に注意すべきことが1つあります。実験中に無効なURLを入力すると、エラーページが表示されることに気付いたかもしれません。このエラーページは、実際には別のレイアウトです。 Nuxtには独自のエラーレイアウトがあります( ソースコードはこちら )、ただし、編集したい場合は、error.vue
を作成するだけです。レイアウトとそれが代わりに使用されます。ここでの注意点は エラーレイアウトに要素を含めることはできません 。 error
にもアクセスできます表示する基本情報を含むコンポーネント上のオブジェクト。 (これは、Nuxtを実行している端末で調べたい場合は印刷されます。)
ミドルウェアは、ページまたはレイアウトをレンダリングする前に実行できる機能です。あなたがそうしたいと思うかもしれないさまざまな理由があります。ルートガーディングは、Vuexストアで有効なログインを確認したり、いくつかのパラメーターを検証したりできる一般的な使用法です(コンポーネント自体でvalidate
メソッドを使用する代わりに)。私が最近取り組んだプロジェクトの1つでは、ミドルウェアを使用して、ルートとパラメーターに基づいて動的なブレッドクラムを生成しました。
これらの関数は非同期にすることができます。ミドルウェアが解決されるまでユーザーには何も表示されないので、注意してください。また、後で説明するNuxtのコンテキストにもアクセスできます。
このディレクトリでは、アプリケーションを作成する前にVueプラグインを登録できます。これにより、プラグインをVueインスタンス上のアプリ全体で共有し、任意のコンポーネントからアクセスできるようになります。
ほとんどの主要なプラグインにはNuxtバージョンがあり、ドキュメントに従ってVueインスタンスに簡単に登録できます。ただし、プラグインを開発する場合や、この目的のために既存のプラグインを適合させる必要がある場合があります。ドキュメントから借りている例は、vue-notifications
に対してこれを行う方法を示しています。まず、パッケージをインストールする必要があります。
npm install vue-notifications --save
次に、プラグインディレクトリにvue-notifications.js
というファイルを作成します。そして、以下を含みます:
import Vue from 'vue' import VueNotifications from 'vue-notifications' Vue.use(VueNotifications)
通常のVue環境でプラグインを登録する方法と非常によく似ています。次に、nuxt.config.js
を編集しますプロジェクトルートでファイルを作成し、module.exportsオブジェクトに次のエントリを追加します。
なぜノードjsを使用するのですか
plugins: ['~/plugins/vue-notifications']
それでおしまい。これでvue-notifications
を使用できますアプリ全体。この例は/plugin
にありますサンプルプロジェクトでは。
これで、ディレクトリ構造の概要が完了しました。学ぶのは大変なことのように思われるかもしれませんが、Vueアプリを開発している場合は、すでに同じ種類のロジックを設定しています。 Nuxtは、セットアップを抽象化し、構築に集中するのに役立ちます。
Nuxtは開発を支援するだけではありません。それ スーパーチャージ 追加機能を提供することにより、コンポーネント。
Nuxtの研究を始めたとき、Pageコンポーネントがどのようになっているのかを読み続けました。 過給 。素晴らしいサウンドでしたが、それが正確に何を意味し、それがどのようなメリットをもたらすのかはすぐにはわかりませんでした。
不和ボットの使い方
つまり、すべてのPageコンポーネントには、Nuxtが追加機能を提供するために使用できる追加のメソッドがアタッチされています。実際、validate
を使用したときに、これらの1つをすでに見ました。パラメータをチェックし、それらが無効な場合はユーザーをリダイレクトするメソッド。
Nuxtプロジェクトで使用される2つの主なものはasyncData
です。およびfetch
メソッド。どちらも概念が非常に似ており、実行されます 非同期的に コンポーネントが生成される前に、コンポーネントとストアのデータを入力するために使用できます。また、データベースやAPIの呼び出しを待つ必要がある場合でも、ページをサーバーに完全にレンダリングしてからクライアントに送信することができます。
asyncData
の違いは何ですかおよびfetch
?
asyncData
ページコンポーネントのデータを入力するために使用されます。オブジェクトを返すと、data
の出力とマージされます。レンダリングする前に。fetch
Vuexストアにデータを入力するために使用されます。約束を返すと、Nuxtはそれが解決されるまで待ってからレンダリングします。それでは、これらを有効に活用しましょう。以前の/products/view
を思い出してください偽のAPI呼び出しが行われているときに、ストアの初期状態が短時間表示されるという問題がありましたか?これを修正する1つの方法は、コンポーネントまたはストア(loading = true
など)にブール値を格納することです。次に、API呼び出しの終了中に読み込みコンポーネントを表示します。その後、loading = false
を設定しますデータを表示します。
代わりに、fetch
を使用しましょうレンダリングする前にストアにデータを入力します。 /products/view-async
という新しいページで、created
を変更しましょうfetch
へのメソッド;それはうまくいくはずですよね?
export default { fetch () { // Unfortunately the below line throws an error // because 'this.$store' is undefined... this.$store.dispatch('product/load') }, computed: {...} }
キャッチは次のとおりです。これらの「過給された」メソッドは実行されます 前 コンポーネントが作成されるので、this
コンポーネントを指しておらず、コンポーネント上の何にもアクセスできません。では、ここでストアにアクセスするにはどうすればよいですか?
もちろん、解決策はあります。 Nuxtのすべてのメソッドで、Contextと呼ばれる非常に便利なオブジェクトを含む引数(通常は最初の引数)が提供されます。これは、アプリ全体で参照する必要があるすべてのものです。つまり、Vueが最初にコンポーネントでそれらの参照を作成するのを待つ必要はありません。
私は強くお勧めします コンテキストドキュメント 何が利用できるかを確認します。便利なものはapp
で、すべてのプラグインにアクセスできますredirect
、ルートの変更に使用できますerror
エラーページと、route
、query
、store
などのわかりやすいページを表示します。
したがって、ストアにアクセスするために、コンテキストを分解し、そこからストアを抽出できます。また、Nuxtがコンポーネントをレンダリングする前に解決を待つことができるように、promiseを返すことを確認する必要があるため、Storeアクションにも微調整を加える必要があります。
// Component export default { fetch ({ store }) { return store.dispatch('product/load') }, computed: {...} } // Store Action load ({ commit }) { return new Promise(resolve => { setTimeout(() => { commit('update', { _id: 1, title: 'Product', price: 99.99 }) resolve() }, 1000) }) }
コーディングスタイルに応じてasync / awaitまたは他のメソッドを使用できますが、概念は同じです。API呼び出しが終了し、ストアが結果で更新されることを確認するようにNuxtに指示しています。 前 コンポーネントのレンダリングを試みます。 /products/view-async
に移動しようとしても、製品が初期状態にあるコンテンツのフラッシュは表示されません。
SSRがなくても、これがVueアプリでどれほど役立つか想像できます。コンテキストは、 すべてのミドルウェア NuxtServerInit
などの他のNuxtメソッドと同様にこれは、ストアが初期化される前に実行される特別なストアアクションです(この例は次のセクションにあります)
Nuxtなどのテクノロジーを他のVueプロジェクトと同じように扱いながら使い始めた多くの人(私も含めて)は、最終的には、Nuxtでは通常は機能するとわかっていることが不可能に思える壁にぶつかったと思います。これらの警告の多くが文書化されているため、克服するのは簡単ですが、デバッグを開始するときに考慮すべき主なことは、クライアントとサーバーが2つの別個のエンティティであるということです。
最初にページにアクセスすると、リクエストがNuxtに送信され、サーバーはそのページとアプリの残りの部分を可能な限り構築してから、サーバーから送信されます。次に、ナビゲーションを続行し、必要に応じてチャンクをロードする責任はクライアントにあります。
サーバーが最初にできる限り多くのことを実行するようにしたいのですが、必要な情報にアクセスできない場合があります。その結果、代わりにクライアント側で作業が行われます。さらに悪いことに、クライアントによって提示される最終的なコンテンツがサーバーが期待するものと異なる場合、クライアントはそれを最初から再構築するように指示されます。これは、アプリケーションロジックに問題があることを示す大きな兆候です。ありがたいことに、これが発生し始めると、ブラウザのコンソール(開発モード)でエラーが生成されます。
Pythonを使用したTwitterデータ分析
一般的な問題であるセッション管理を解決する方法の例を見てみましょう。アカウントにログインできるVueアプリがあり、セッションは、localStorage
に保持することを決定したトークン(JWTなど)を使用して保存されているとします。最初にサイトにアクセスするときに、APIに対してそのトークンを認証する必要があります。これにより、有効な場合は基本的なユーザー情報が返され、その情報がストアに配置されます。
Nuxtのドキュメントを読むと、NuxtServerInit
という便利なメソッドがあることがわかります。これにより、初期ロード時に1回ストアに非同期でデータを入力できます。それは完璧に聞こえます!したがって、ストアでユーザーモジュールを作成し、index.js
に適切なアクションを追加します。 Storeディレクトリ内のファイル:
export const actions = { nuxtServerInit ({ dispatch }) { // localStorage should work, right? const token = localStorage.getItem('token') if (token) return dispatch('user/load', token) } }
ページを更新すると、エラーlocalStorage is not defined
が表示されます。これがどこで起こっているかを考えると、それは理にかなっています。このメソッドはサーバー上で実行され、localStorage
に何が格納されているかわかりません。クライアント上;実際、「localStorage」が何であるかさえ知りません!したがって、それはオプションではありません。
では、解決策は何ですか?実際にはいくつかあります。代わりに、クライアントにストアを初期化させることができますが、クライアントがすべての作業を行うことになるため、SSRの利点を失うことになります。サーバー上でセッションを設定し、それを使用してユーザーを認証することができますが、それは設定する別のレイヤーです。 localStorage
に最も似ているものメソッドは代わりにCookieを使用しています。
Nuxtは、クライアントからサーバーへのリクエストとともに送信されるため、Cookieにアクセスできます。他のNuxtメソッドと同様に、nuxtServerInit
最初の引数はストア用に予約されているため、今回は2番目の引数としてコンテキストにアクセスできます。コンテキストでは、req
にアクセスできますオブジェクト。クライアント要求からのすべてのヘッダーとその他の情報を格納します。 (これは、Node.jsを使用したことがある場合に特によく知られています。)
したがって、代わりにトークンをCookie(この場合は「トークン」と呼びます)に保存した後、サーバー上でトークンにアクセスしましょう。
import Cookie from 'cookie' export const actions = { nuxtServerInit ({ dispatch }, { req }) '' if (token) return dispatch('user/load', token) }
簡単な解決策ですが、すぐにはわからないかもしれません。特定のアクションが発生している場所(クライアント、サーバー、またはその両方)と、それらがアクセスできるものについて考えることを学ぶには時間がかかりますが、そのメリットは価値があります。
Nuxtを使用した展開は非常に簡単です。同じコードベースを使用して、SSRアプリ、シングルページアプリケーション、または静的ページを作成できます。
これはおそらく、Nuxtを使用するときに目指していたものです。ここでの展開の基本的な概念は、build
を実行することです。選択したプラットフォームで処理し、いくつかの構成を設定します。のHerokuの例を使用します ドキュメント :
まず、package.json
でHerokuのスクリプトを設定します。
'scripts': { 'dev': 'nuxt', 'build': 'nuxt build', 'start': 'nuxt start', 'heroku-postbuild': 'npm run build' }
次に、heroku-cli
を使用してHeroku環境をセットアップします(( セットアップ手順はこちら :
# set Heroku variables heroku config:set NPM_CONFIG_PRODUCTION=false heroku config:set HOST=0.0.0.0 heroku config:set NODE_ENV=production # deploy git push heroku master
それでおしまい。これで、SSRVueアプリがライブで世界中に公開される準備が整いました。他のプラットフォームではセットアップが異なりますが、プロセスは似ています。現在リストされている公式の展開方法は次のとおりです。
Nuxtが提供する追加機能のいくつかを利用したいが、サーバーがページをレンダリングしようとしないようにしたい場合は、代わりにSPAとしてデプロイできます。
まず、デフォルトのようにSSRなしでアプリケーションをテストするのが最善ですnpm run dev
SSRをオンにして実行します。これを変更するには、nuxt.config.js
を編集しますファイルを作成し、次のオプションを追加します。
mode: 'spa',
これで、npm run dev
を実行すると、SSRがオフになり、アプリケーションがテスト用のSPAとして実行されます。この設定により、将来のビルドにSSRが含まれないようにすることもできます。
誰かのクレジットカード番号を取得する方法
すべてが正常に見える場合、展開はSSRアプリの場合とまったく同じです。 mode: 'spa'
を設定する必要があることを忘れないでくださいまず、ビルドプロセスにSPAが必要であることを知らせます。
サーバーをまったく扱いたくないが、代わりにSurgeやNetlifyなどの静的ホスティングサービスで使用するページを生成したい場合は、これを選択するオプションです。サーバーがないと、req
にアクセスできないことに注意してください。およびres
コンテキスト内にあるため、コードがそれに依存している場合は、必ずそれに対応してください。たとえば、サンプルプロジェクトを生成する場合、nuxtServerInit
関数は、リクエストヘッダーのCookieからトークンをフェッチしようとしているため、エラーをスローします。このプロジェクトでは、そのデータはどこでも使用されていないため問題ではありませんが、実際のアプリケーションでは、そのデータにアクセスするための代替方法が必要になります。
並べ替えると、導入は簡単です。最初に変更する必要があると思われることの1つは、nuxt generate
になるようにオプションを追加することです。コマンドはフォールバックファイルも作成します。このファイルは、ホスティングサービスではなくNuxtにルーティングを処理させるようにホスティングサービスに促し、404エラーをスローします。これを行うには、次の行をnuxt.config.js
に追加します。
generate: { fallback: true },
Netlifyを使用した例を次に示します。これは、現在Nuxtのドキュメントにはありません。 netlify-cli
を初めて使用する場合は、認証を求めるプロンプトが表示されることに注意してください。
# install netlify-cli globally npm install netlify-cli -g # generate the application (outputs to dist/ folder) npm run generate # deploy netlify deploy dist
とても簡単です!記事の冒頭で述べたように、このプロジェクトのバージョンがあります ここに 。以下のサービスの公式導入ドキュメントもあります。
Nuxtは急速に更新されており、これはNuxtが提供する機能のほんの一部にすぎません。この記事が、Vueアプリケーションの機能を改善し、より迅速に開発し、その強力な機能を活用できるようになるかどうかを試してみることをお勧めします。
詳細情報をお探しの場合は、Nuxtの公式リンクをご覧ください。
JavaScriptゲームを探していますか?読んでみてください JavaScriptデザインパターンの包括的なガイド 仲間のApeeScapeerMarkoMišuraによる。
Vue.js(または単にVue)は、軽量で習得が容易でありながら、大規模なアプリケーションを処理するのに十分強力になるように設計されたJavaScriptフレームワークです。これにより、優れたユーザーエクスペリエンスを提供できるインタラクティブなWebアプリを開発できます。
Nuxtは、ユニバーサルVueアプリケーションを作成するためのフレームワークです。これは、プロジェクトに構造を提供し、より複雑なサーバー構成を処理し、同じコードベースをさまざまな環境にデプロイできることを意味します。
はい、両方のコードベースはGitHubで公開されており、継続的に開発されています。どちらにもコアチームがあり、コミュニティによってサポートされています。問題はそこで追跡され、誰でも改善を提案したり、プルリクエストを送信したりできます。
クライアント側とは、Webページを要求し、最終的に表示するために使用されるデバイスを指します。たとえば、Webサイトを参照するときに、コンピューター/タブレット/電話のブラウザーです。サーバー側とは、Webページの要求を受信し、それを表示するための適切なファイルを送信するサーバーを指します。
SSRは、より優れたSEO、より高速な初期ロード、およびページをキャッシュする機能を提供しますが、通常、より多くのサーバー要求とページ全体のリロードを意味します。 SSRをクライアント側のフレームワーク(Vueなど)の利点と組み合わせると、豊富なユーザーインタラクションとインプレースDOM更新も提供されるため、Nuxtは優れたソリューションになります。
Vue.jsのようなフレームワークでは、Webページのドキュメントオブジェクトモデル(DOM)を部分的に更新できます。ただし、DOMの直接更新には時間がかかるため、代わりにVue.js 2.0以降、DOMの仮想コピーがメモリ内に保持され、そこで変更が最初に行われ、効率的な更新によってそれらの変更が実際のDOMに定期的に追加されます。