Webpackを使用した同形レンダリング

私はIsomorphic Reactを使用してブログアプリケーションを作成しようとしていました。Webpackを使用した同形レンダリング

ミディアム：現代同形スタック：
https://medium.com/@MoBinni/a-modern-isomorphic-stack-6609c7c9d057

blog.lunarlogic.org：いくつかのグーグルが、私はこれら三つのチュートリアルに遭遇してきました検索した後、ユニバーサルReactjsアプリケーション
http://blog.lunarlogic.io/2015/how-to-create-a-universal-reactjs-application-with-bare-reactjs/

を作成する方法

特に混乱している部分の1つは、サーバー側でhtml-webpack-pluginがどのように動作するかです。

これらのチュートリアルの両方を次のようになり、テンプレートいる：私はWebPACKのを通じて、このテンプレートを実行しようとすると、

<html> 
<head> 
... 
</head> 
<body> 
... 
<%- reactOutput %> 
</body> 
</html>

はしかし、私はreactOutputが定義されていないというエラーが発生します。

純粋なクライアント側のアプリケーションでは、クライアントに提供するindex.htmlファイルを生成するのに、html-webpack-pluginを使用します。この世代は私が開発者と生産のためにwebpackで異なる設定をしているので、私にとってより簡単になります。（一般的なチャンクとそのすべて）

サーバー側のレンダリングについて話すときにも考慮する必要がありますか？それとも私はこれについて間違っているのだろうか？

出典

2017-05-13 mikeyGlitz

私はテンプレートをあらかじめ生成することを除いて、等式の中の数字はhtml-webpack-pluginとは思えません。テンプレートコンテンツを取得したら、reactOutputの値と共にレンダラーに提供します。

あなたはa call like shown here in line 42 to grab the rendered contentを行います

var reactOutput = ReactDOMServer.renderToString(<RoutingContext {...renderProps} />);

はその後、テンプレートと一緒にこのVARを与えることになります。 In the tutorial they use ejs for templatingあなたがあなた自身の中にプラグインできるものの：

res.render('index', { 
    reactOutput: reactOutput) 
});

出典

2017-05-13 20:43:06 Ivo

私はあなたが 'res.render'を使用してサーバから提供されますテンプレートとしてHTML-のWebPACK-Plugin'を'からの出力を使用するように言っているものを手に入れますか'res.send'ですが、' <％ - reactOutput％> 'で定義されていないエラーはどうでしょうか？文字列としてファイル全体を読み込んだ後、テンプレートコードを置き換える方法があると思いますが、どのように動作しますか？ – mikeyGlitz

これはサーバー側のレンダリングの仕組みとまったく同じです。 ReactDOMServerを使用すると、アプリケーションをメモリにレンダリングし、クライアントに返すことができます。あなたがカバーする必要があるギャップがまだあります。「メモリ内の文字列をテンプレートにどうやって入れますか？」リンクしたチュートリアルでは、テンプレート作成に 'ejs'を使ってそれを行う方法を示しています。これはあなたが持っているテンプレート設定に近いです：http://bitdrift.com/post/2376383378/using-mustache-templates-in-express – Ivo

私は 'fs.readFileSync'を使ってテンプレートと' stringを読み終えました。サーバ側の反応をテンプレートに注入するために「置き換える」。おそらく最善のアプローチではなく、うまくいくように見えました。 – mikeyGlitz

Webpackを使用した同形レンダリング

答えて

関連する問題