react.jsは、静的なコンテンツ駆動型サイトに意味がありますか？

14

DOM操作が非常にスムーズで分かりやすいので、react.jsモデルでかなり売れています。しかし、移動しないテキストや画像の大きなブロックが多く、静的なサイトでどのように活用できるのかと思っています。邪魔になりますか？コンポーネントの状態がテキストのKBであるのは厄介なようです。

javascript web-development html

— ジギー
ソース

4

あなたはハンマーを持っており、このネジが釘として使用できるかどうかを熟考しています。通常、テクノロジー関連の決定は、「当社の要件はX、Y、Zです。どのテクノロジーが最も低いコストでそこに到達できるか」という線に沿って行われるべきです。「解決策はありますが、教えてください」私に問題がありますか？」Reactの経験が既にあるという事実は、決定を多少有利にしていますが、それによってどのような要件が満たされますか？顧客またはユーザーにどのような価値を追加しますか？

— アモン

4

まあ、それは私が決定しようとしているものです。Reactはハンマーまたはツールボックスですか？それは確かにFacebookが持っているある種のユースケースに優れており、他のケースでそれが悪いことを示すものは見ていません。確かに説得力は劣りますが、だからといって完全に問題があるわけではありません。

— ジギー

1

実際に同じ質問があります。Reactコンポーネントに関するすべてが大好きですが、javascriptが数行しかないコンテンツ駆動型サイトの場合、HTML-JSカップリングに焦点を当てており、クリーンなHTML-CSSよりも状態とイベントに重点を置いているようです。別のテンプレート言語のReactコンポーネントのようなものが欲しいです。

— JeroenVdb

10

何をしたいのかを理解してから、テクノロジーを選択してください。

その観点から、React.jsはほとんど静的なWebにとってはやり過ぎのようです。

Reactのウェブサイトから：

Reactを構築して、1つの問題を解決しました。時間とともに変化するデータを使用した大規模なアプリケーションの構築です。

Reactは特定のネイル用のハンマーです。それは、ほとんど静的なWebサイトの作成を妨げることを示します。

— 宮本明
ソース

2

静的ページの生成は、Reactの予想される使用です。 React.renderToStaticMarkup

に似てrenderToStringいますが、これはdata-react-idReactが内部的に使用するのような追加のDOM属性を作成しません。これは、Reactを単純な静的ページジェネレーターとして使用する場合に便利です。余分な属性を取り除くと、多くのバイトを節約できるためです。

ここでリアクションを使いすぎると言う人もいます。しかし、死んだものが欲しいときは、やりすぎても問題ありません。反応がこのユースケースに必要なものよりもはるかに多くのことができるという事実は、反応に対する議論ではありません。

ただし、非同期コードを実行する場合は問題が発生する可能性があります。以下を想像してみましょう：

function SchoolClass({classId}) {
   const students = await query("SELECT name FROM student WHERE class = ?", classId);
   return <ul>
      {_.map(students, ({name}) => <li>{name}</li>}
   </ul>
}

ただし、関数はReact要素ではなくPromiseを返し、Reactと互換性がないため、これは機能しません。Reactスタイルの静的サイトジェネレーターフレームワークを考案している場合、おそらくこれを許可するでしょう。ただし、Reactはwebappクライアントに焦点を合わせているため、許可されていません。

— ウィンストン・エワート
ソース