webpack+react+nodejs サーバーサイド rendering_html/css_WEB-ITnose

フロントエンドでは、React を使用して Web サイトを作成しますが、常にフロントエンド レンダリングを使用します。過去 2 日間、React のバックエンド レンダリングを実装する方法を勉強する時間がありました。

1. 環境

• Webpack
• React
• NodeJS

2. アイデア

フロントエンド構築ツールは Webpack を使用し、React コンポーネントは ES6 構文を使用して記述されます。 Webpackでは通常のJSモジュールと同様に画像やスタイルなどのリソースファイルの導入をサポートしているため、Reactコンポーネント内の画像やスタイルはimportメソッドでインポートされます。したがって、サーバー側レンダリングを実装するには、3 つのことを行う必要があります。

1. バックエンドのレンダリングに必要なエントリ ファイルを作成します。 エントリ ファイルの主な機能は、ホームページ HMTL を出力することです。
2. Node パーサーがロードして実行できるように、Webpack を使用してエントリ ファイルをコンパイルします。コンポーネントは ES6 構文を使用して記述されており、画像とスタイル ファイルのロードには Webpack のみが認識できるモジュール ロード メソッドが使用されるため、Node パーサーはバックエンド エントリ ファイルを直接ロードして実行できません)
3. React コンポーネントを実装する 1 ステップで生成された HTML コードでは、通常、ブラウザはサーバーから送信されたページを表示できます。

3. 発生した問題

このコードの実装は、Webpack によって提供される公式のサンプル、react-webpack-server-side-example を利用していますが、いくつかの落とし穴に遭遇します。

落とし穴 1: Webpack のバージョンが異なるため、公式サンプルで提供されている style-collector.loader.js を使用して CSS コードを直接抽出できません。

公式の例で使用されている Webpack のバージョンは "webpack": "~1.3.1-beta7" で、私が使用している Webpack のバージョンは "webpack": "^1.12.2" です。バージョンアップによりAPIが変更されたのか、style-collector.loader.jsファイル内で以下のコードを呼び出してCSSを抽出すると、赤枠内の文はCSSコードではなく配列を直接返します。 。

style-collector.loader.js

CSSコードを抽出した結果画像

そこで、赤枠のコードの後に​​配列インデックス[0][1]を追加しました

修正後

返されるのは抽出される CSS です。

落とし穴 2: 落とし穴 1 が解決されても、正式版から CSS を抽出するコードを直接使用することはできません。

CSS を抽出する方法の公式の例を見てみましょう。まず、公式の style-collector.loader.js はこんな感じです。

style-collector.loader.js

このコードは、Webpack ローダー、つまりローダーを定義します。その一般的な意味は、CSS ファイルがロードされる場所に JS コードの一部が挿入され、この JS コードの機能は style-collector.js の add メソッドを呼び出すことであり、CSS コードは文字列に変換され、 add メソッドにパラメータとして渡されます。

それでは、style-collector.js ファイルを見てみましょう。このようになります。

style-collector.js

このモジュールは、collect メソッドと add メソッドの 2 つのメソッドを定義します。このうち、デフォルトで定義されているaddメソッドは空のメソッドです。ちょっと変なので読み進めてみましょう。公式サンプルのサーバー エントリ ファイル page.js には、次のセクションがあります。

page.js

赤枠内のコードは、style-collector.js のcollect メソッドを呼び出すために使用されます。ここで、コールバック関数がcollectメソッドに渡されます。コールバック関数の機能は、アプリケーションコンポーネントを文字列にレンダリングすることです。では、ここで CSS を抽出するにはどうすればよいでしょうか? style-collector.js の内容を振り返ると、collect メソッドでは、コールバック関数の実行前に CSS を格納するためのスタッフ配列が定義されており、コールバック関数の実行後にモジュールのデフォルトの add メソッドが変更されています。 CSS が返されます。つまり、すべてのトリックはコールバック関数に隠されています。では、コールバック関数が実行されると何が起こるでしょうか?コールバック関数は、Application コンポーネントを文字列にレンダリングするという 1 つのことだけを行うことがわかっています。アプリケーション ビルドの内容を見てみましょう。

Paste_Image.png

そが！ Application.css ファイルは、Application コンポーネントがレンダリングされるときにロードされることがわかります。style-collector.loader.js ローダーは、CSS ファイルがロードされる場所に JS コードを挿入します。コードは style-collector.js の add メソッドを呼び出します。CSS コードは文字列に変換され、パラメータとして add メソッドに渡されます。したがって、コールバック関数の実行中に、style-collector.js の add メソッドが一度呼び出され、CSS がスタッフ配列に追加されるため、コールバック関数の実行後に CSS が抽出されます。

さて、CSS を抽出する公式の原則を理解した後、コードがどのように記述されているかを見てみましょう。まず、私の React コンポーネントは次のように書かれています。

私の React コンポーネント

公式のものとの違いは、CSSファイルをrenderメソッドではなくコンポーネントの先頭に導入していることです。問題はここにあります。コンポーネントの先頭にCSSファイルの導入部分を記述すると、Webpackでコンパイルすると、style-collector.loader.jsによってコンポーネントの先頭にJSコードが挿入されます。前述したように、style-collector.js の add メソッドを呼び出します。 page.js からコンポーネントを導入したとき (page.js の先頭でも導入しました)、このコードはすでに実行されていました。この時点では、style-collector.js のcollect メソッドはまだ実行されていませんでした。 default add メソッドは変更されていないため、最終的に CSS を抽出することはできません。

そこで、以下に示すように style-collector.js の内容を変更しました:

style-collector.js を変更

このようにして、CSS ファイルがどこから読み込まれたかに関係なく、CSS を追加できます。配列内で、最後にcollectメソッドを呼び出してすべてのCSSを取得します。以下に示すように:

変更された page.js

IV. 概要

• コードはコピーできません。その原則を理解し、実際の状況に応じて適用する必要があります。実際、公式ドキュメントの冒頭には、「コードを使用するべきではなく、アイデアだけを使用する必要があります。くそー、顔面を平手打ちしてください。」と書かれています。

  Webpack Github Documentation

• 問題を発見して解決するこの種の楽しさは、私が子供の頃から大好きだったことを長い間経験していませんでした。初心を決して忘れないことによってのみ、成功を収めることができます。