Next.jsライブラリを使用してユニバーサルアプリケーションの開発を開始する方法

交通を増やす必要はありません。
SEOは必要ありませんが、
ネットワーク内のリンク交換はありません、
スパマー！ 放っておいてください。

アンナ・フィリーナ

ちょっとした歴史

2013年に、AirbnbのSpike Brehmは、SPAアプリケーション（Single Page Application）の欠点を分析するプログラム記事を公​​開し、代替として同型Webアプリケーションのモデルを提案しました。 現在では、ユニバーサルWebアプリケーションという用語がより頻繁に使用されています（ 説明を参照）。

ユニバーサルWebアプリケーションでは、各ページはWebサーバーまたはWebブラウザー側のJavaScriptによって形成できます。 同時に、WebサーバーとWebブラウザーによって実行されるプログラムのソースコードは、不整合と開発コストの増加を排除するために統一（ユニバーサル）する必要があります。

このアイデアの著者であるAirbnbのSpike Brehmとの物語は今や完全な勝利で終わり、最近、2017年12月7日に彼のTwitterで 、Airbnb WebサイトがサーバーベースのSPAアプリケーションのレンダリングに切り替わったことを発表しました。

SPAアプリケーションの批判

SPAアプリケーションの何が問題になっていますか？ そして、ユニバーサルアプリケーションを開発するときにどのような問題が発生しますか？

SPAアプリケーションは、まず低い検索エンジンランキング（SEO）、作業速度、およびアクセシビリティのために批判されています。 （これは、ドキュメントhttps://www.w3.org/Translations/WCAG20.ruで理解されているアクセシビリティを指します 。スクリーンリーダーでReactアプリケーションを利用できない可能性があるという証拠があります。）

部分的に、SEO SPAアプリケーションの問題は、Prerender-chrome-remote-interface（以前はphantomjsで使用されていた）を使用して実装される「ヘッドレス」Webブラウザーを備えたサーバーによって解決されます。 Prerenderを使用して独自のサーバーをデプロイするか、 パブリックサービスにアクセスできます。 後者の場合、アクセスはページ数の制限付きで無料になります。 Prerenderツールを使用してページを生成するプロセスは時間がかかります。通常は3秒以上です。つまり、検索エンジンは速度が最適化されていないサービスを考慮し、その評価は依然として低くなります。

開発プロセス中にパフォーマンスの問題が発生せず、低速インターネットまたは低電力モバイルデバイス（たとえば、1GBのRAMと1.2GHzのプロセッサ周波数を備えた携帯電話またはタブレット）で作業しているときに顕著になる場合があります。 この場合、「飛ぶ」ページが予期せず長くロードされる可能性があります。 たとえば、1分。 このような遅いダウンロードには、通常示されているよりも多くの理由があります。 まず、アプリケーションがJavaScriptをロードする方法を見てみましょう。 多くのスクリプトがある場合（require.jsおよびamdモジュールを使用する場合に一般的でした）、要求されたファイルごとにサーバーに接続するためのオーバーヘッドにより、ロード時間が増加しました。 解決策は明らかでした：すべてのモジュールを1つのファイルに結合します（rjs、webpackまたは別のリンカーを使用）。 これにより、新しい問題が発生しました。リッチなインターフェイスとロジックを備えたWebアプリケーションの場合、最初のページを読み込むときに、1つのファイルに読み込まれるすべてのJavaScriptコードが読み込まれました。 したがって、現在の傾向はコード分​​割です。 ユニバーサルWebアプリケーションの構築に必要な機能を検討する際に、この問題に戻ります。 問題は、これが不可能または困難であることではありません。 問題は、これを最適に行うツールを開発者側に追加の労力なしで提供することが望ましいということです。 そして最後に、すべてのJavaScriptコードがダウンロードされ、解釈されると、DOMドキュメントの構築が始まり、最後に、画像の読み込みが始まります。

ユニバーサルアプリケーションを作成するためのライブラリ

github.comでは、ユニバーサルWebアプリケーションのアイデアを実装する多数のプロジェクトを見つけることができます。 ただし、これらのプロジェクトにはすべて共通の欠点があります。

1. プロジェクト貢献者の数が少ない
2. これらはライブラリではなく、クイックスタート用のドラフトプロジェクトです。
3. react.jsの新しいバージョンではプロジェクトは更新されませんでした
4. ユニバーサルアプリケーションの開発に必要な機能の一部のみがプロジェクトに実装されています。

最初の成功したソリューションはNext.jsライブラリでした。2018年1月14日現在、github.comには338人の投稿者と21,137人の「スター」がいます。 このライブラリの利点を評価するために、ユニバーサルWebアプリケーションが機能するために必要な機能の種類を検討します。

サーバーレンダリング

react.js、vue.js、angular.js、riot.jsなどのライブラリはすべて、サーバー側レンダリングをサポートしています。 通常、サーバーレンダリングは同期的に動作します。 これは、ライフサイクルイベントの非同期API要求が起動されますが、その結果は失われることを意味します。 （非同期サーバーレンダリングの制限付きサポートはriot.jsによって提供されます）

非同期データの読み込み

サーバーレンダリングの開始前に非同期リクエストの結果を取得するために、Next.jsは非同期静的非同期getInitialProps（{req}）ライフサイクルイベントを持つ特別なタイプのコンポーネント「ページ」を実装します。

サーバーコンポーネントの状態をクライアントに渡す

コンポーネントのサーバー側レンダリングの結果として、HTMLドキュメントがクライアントに送信されますが、コンポーネントの状態は失われます。 コンポーネントの状態を転送するために、通常、WebサーバーはWebブラウザー用のスクリプトを生成し、サーバーコンポーネントの状態をグローバルJavaScript変数に書き込みます。

Webブラウザー側のコンポーネントの作成とHTMLドキュメントへのそのバインディング

コンポーネントのサーバー側レンダリングから生成されるHTMLドキュメントにはテキストが含まれ、コンポーネント（JavaScriptオブジェクト）は含まれません。 コンポーネントはWebブラウザで再作成し、再レンダリングせずにドキュメントに「結び付ける」必要があります。 react.jsでは、このためにhydrate（）メソッドが実行されます。 同様の関数メソッドはvue.jsライブラリにあります

ルーティング

サーバーとクライアントでのルーティングもユニバーサルにする必要があります。 つまり、ルーティングの同じ定義がサーバーとクライアントの両方のコードで機能するはずです。

コード分​​割

各ページには、アプリケーション全体ではなく、必要なJavaScriptコードのみをロードする必要があります。 次のページに移動するとき、欠落しているコードをロードする必要があります-同じモジュールをリロードせずに、追加のモジュールもありません。

Next.jsライブラリは、これらすべての問題を正常に解決します。 このライブラリは、非常に単純なアイデアに基づいています。 新しいタイプのコンポーネント「ページ」を導入することを提案します。「ページ」には、非同期メソッドstatic async getInitialProps（{req}）があります。 ページコンポーネントは、通常のReactコンポーネントです。 このタイプのコンポーネントは、「コンポーネント」、「コンテナ」、「ページ」というシリーズの新しいタイプと考えることができます。

実施例

作業には、node.jsとnpmパッケージマネージャーが必要です。 まだインストールされていない場合、これを行う最も簡単な方法は、コマンドラインからインストールされ、sudoアクセスを必要としないnvm（Node Version Manager）を使用することです。

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash 

インストール後、必ずターミナルを閉じて再度開き、PATH環境変数を設定してください。 次のコマンドにより、使用可能なすべてのバージョンのリストが表示されます。

 nvm ls-remote 

次のコマンドで、node.jsの必要なバージョンとnpmパッケージマネージャーの互換バージョンをダウンロードします。

 nvm install 8.9.4 

新しいディレクトリ（フォルダ）を作成し、その中でコマンドを実行します：

 npm init 

その結果、 package.jsonファイルが生成されます。
プロジェクトに応じて、作業に必要なパッケージをダウンロードして追加します。

 npm install --save axios next next-redux-wrapper react react-dom react-redux redux redux-logger 

プロジェクトのルートディレクトリで、 ページディレクトリを作成します 。 このディレクトリには、ページタイプのコンポーネントが含まれます。 pagesディレクトリ内のファイルへのパスは、これらのコンポーネントが利用できるURLに対応しています。 いつものように、「マジックネーム」のindex.jsはurl / indexおよび/にマッピングされます。 ワイルドカードを使用したURLのより複雑なルールも実装可能です。

pages / index.jsファイルを作成します ：

 import React from 'react' export default class extends React.Component { static async getInitialProps({ req }) { const userAgent = req ? req.headers['user-agent'] : navigator.userAgent return { userAgent } } render() { return ( <div> Hello World {this.props.userAgent} </div> ) } } 

この単純なコンポーネントは、Next.jsの主な機能を使用します。

• es7構文（インポート、エクスポート、非同期、クラス）はそのまま使用できます。
• ホットリロードもそのまま使用できます。
• 静的な非同期getInitialProps（{req}）関数は、サーバーまたはクライアントでコンポーネントをレンダリングする前に非同期で実行されます（一度だけ）。 コンポーネントがサーバーでレンダリングされる場合、 reqパラメーターがそれに渡されます。 この関数はページタイプのコンポーネントでのみ呼び出され、ネストされたコンポーネントでは呼び出されません。

package.jsonファイルで、「scripts」属性に3つのコマンドを追加します。

 "scripts": { "dev": "next", "build": "next build", "start": "next start" } 

次のコマンドで開発者サーバーを起動します。

 npm run dev 

サーバーからページをロードせずに別のページへの移行を実装するために、リンクは特別なLinkコンポーネントでラップされます。 page / index.jsに依存関係を追加します 。

 import Link from 'next/link' 

およびリンクコンポーネント：

 <Link href="/time"> <a>Click me</a> </Link> 

リンクをクリックすると、404エラーのあるページが表示されます。

pages / index.jsファイルをpages / time.jsファイルにコピーします 。 新しいtime.jsコンポーネントでは、サーバーから非同期に受信した現在の時刻を表示します。 それまでの間、このコンポーネントのリンクを変更して、メインページに移動します。

 <Link href="/"> <a>Back</a> </Link> 

サーバーから各ページをリロードして、ページ間を移動して戻ってください。 いずれの場合も、サーバーからのダウンロードは、サーバーレンダリングと、その後のすべての遷移で行われます-Webブラウザーの横にあるレンダリングツールを使用します。

pages / time.jsページに、サーバーから受信した現在の時刻を示すタイマーを配置します。 これにより、サーバーレンダリング中の非同期データの読み込みに慣れることができます。これは、Next.jsが他のライブラリと比較して好意的なものです。

reduxを使用して、データをストアに格納します。 reduxの非同期アクションは、ミドルウェアredux-thunkを使用して実行されます。 通常（常にではありません）、1つの非同期アクションには、START、SUCCESS FAILUREの 3つの状態があります。 したがって、非同期アクションを決定するためのコードは（少なくとも私にとっては）複雑に見えることがよくあります。 redux-thunkライブラリーの1つの問題では、ミドルウェアの単純化されたバージョンについて説明しました。これにより、3つの状態すべてを1行で定義できます。 残念ながら、このオプションはライブラリに発行されたことがないため、モジュールとしてプロジェクトに含めます。

アプリケーションのルートディレクトリに新しいreduxディレクトリを作成します。その中にredux / promisedMiddlewate.jsファイルがあります。

 export default (...args) => ({ dispatch, getState }) => (next) => (action) => { const { promise, promised, types, ...rest } = action; if (!promised) { return next(action); } if (typeof promise !== 'undefined') { throw new Error('In promised middleware you mast not use "action"."promise"'); } if (typeof promised !== 'function') { throw new Error('In promised middleware type of "action"."promised" must be "function"'); } const [REQUEST, SUCCESS, FAILURE] = types; next({ ...rest, type: REQUEST }); action.promise = promised() .then( data => next({ ...rest, data, type: SUCCESS }), ).catch( error => next({ ...rest, error, type: FAILURE }) ); }; 

この機能の動作に関するいくつかの説明。 redux midleware関数には、署名（store）=>（next）=>（action）があります。 アクションが非同期であり、この特定の関数によって処理される必要があることを示すインジケーターは、 約束されたプロパティです。 このプロパティーが定義されていない場合、処理は完了し、制御は次のミドルウェアに転送されます： return next（action） 。 Promiseオブジェクトへの参照はaction.promiseプロパティに保存されます。これにより、非同期アクションが完了するまで静的非同期getInitialProps（{req、store}）非同期関数を「保持」できます。

データウェアハウスに接続されているものはすべてredux / store.jsファイルに配置されます 。

 import { createStore, applyMiddleware } from 'redux'; import logger from 'redux-logger'; import axios from 'axios'; import promisedMiddleware from './promisedMiddleware'; const promised = promisedMiddleware(axios); export const initStore = (initialState = {}) => { const store = createStore(reducer, {...initialState}, applyMiddleware(promised, logger)); store.dispatchPromised = function(action) { this.dispatch(action); return action.promise; } return store; } export function getTime(){ return { promised: () => axios.get('http://time.jsontest.com/'), types: ['START', 'SUCCESS', 'FAILURE'], }; } export const reducer = (state = {}, action) => { switch (action.type) { case 'START': return state case 'SUCCESS': return {...state, ...action.data.data} case 'FAILURE': return Object.assign({}, state, {error: true} ) default: return state } } 

getTime（）アクションはpromisedMiddleware（）によって処理されます。 これを行うために、 promiseプロパティーにはPromiseを返す関数があり、 typesプロパティーには、定数'START'、 'SUCCESS'、 'FAILURE'を含む3つの要素の配列があります。 定数の値は任意であり、リスト内での順序は重要です。

これで、これらのアクションをpages / time.jsコンポーネントに適用することができます 。

 import React from 'react'; import {bindActionCreators} from 'redux'; import Link from 'next/link'; import { initStore, getTime } from '../redux/store'; import withRedux from 'next-redux-wrapper'; function mapStateToProps(state) { return state; } function mapDispatchToProps(dispatch) { return { getTime: bindActionCreators(getTime, dispatch), }; } class Page extends React.Component { static async getInitialProps({ req, store }) { await store.dispatchPromised(getTime()); return; } componentDidMount() { this.intervalHandle = setInterval(() => this.props.getTime(), 3000); } componentWillUnmount() { clearInterval(this.intervalHandle); } render() { return ( <div> <div>{this.props.time}</div> <div> <Link href="/"> <a>Return</a> </Link> </div> </div> ) } } export default withRedux(initStore, mapStateToProps, mapDispatchToProps)(Page); 

ここでは、 next-redux-wrapperライブラリのwithRedux（）メソッドを使用していることに注目してください。 他のすべてのライブラリは、react.jsに共通であり、Next.jsに適応する必要はありません。

Next.jsライブラリに初めて会ったときは、かなり原始的なすぐに使用できるルーティングのために、私は本当に感銘を受けませんでした。 このライブラリの適用可能性は、名刺サイトほど高くないように思えました。 今はそうは思わないので、同じ記事でnext-routesライブラリについて話すことを計画しました。これにより、ルーティングの可能性が大幅に広がります。 しかし今、私はこの資料が別の投稿に置く方が良いことを理解しています。 また、 react-i18nextライブラリについても話し合う予定です。 -Next.jsと直接的な関係はありませんが、共同使用には非常に適しています。

apapacy@gmail.com
2018年1月14日