ページの一部を後でJS化する場合どうするか

例えば、元々はサーバサイドでHTMLを生成して返していただけのページで：

• 「次に進む」リンクでのページネーションを「もっと読む」へ変更したい。
• 初期表示で数列表示されているテキストフィールドを「＋」ボタンで増やせるようにしたい。

このような要望が後で発生し、
一部を JavaScript で書き直さざるを得ないケースは良くあることだと思います。

これ、どういう設計で対応するのが一番いいのかなー、と結論は出ていないのですが、とりあえずまとめてみます。
（アドバイス貰えるかもしれないし）

正攻法です。

動的に変更する可能性があるHTMLは、クライアントサイドのJSのみで描画します。
もしサーバサイドのデータが必要な場合は、別途 Web-API を作成します。

例えば、「もっと読む」なら、現在サーバサイドのテンプレートで描画しているリスト部分を削除し、対応する Web-API を作り、それを Ajax で呼ぶことで DOM を生成する JS を書き、サーバ側によるHTML描画が終了した時点でその JS を呼ぶようにする、という対応です。

問題は特に無いと思いますが、手間が掛かります。

Web-API で「部分的なHTML文字列」そのものを返すようにし、Ajax で取得します。

メリットは、サーバサイドのテンプレートシステムをそのまま使えること、クライアントJSをあまり知らなくても大丈夫なこと、などです。

デメリットは、汎用性の低いWeb-APIを作る必要があるということ、部分的に呼び出した部分に対し更にJSで加工する必要が発生するとカオスになること、などです。

2 パターンしか思いつきませんでした。

もっと他の（悪い）パターンがあった気がするんだが..

@kjirou 最適化っていう観点から言えばダメなんだけど、ふつうにページネーションのリンク先を非同期で取得して、必要な部分だけ id なり class なりで抜き出して、今のページに継ぎ足すみたいなことすればサーバーサイドの変更不要ですね

— Qurage (@Qurage) 2014, 8月 28

@kjirou たしか AutoPagarize 系の拡張がやってることも同じだった記憶あるんですが、ちゃんと実装みたわけじゃないのでわかんないです

— Qurage (@Qurage) 2014, 8月 28

@kjirou 全部 js でレンダリングすると実装かっこいいかわりに現状はまだSEOが大変ていうデメリット発生するし、検索インデックス考慮する条件付きなら、スクレイピング方式でも部分API方式でも、1ページ目はサーバーサイド、次ページはjsで継ぎ足す方式、妥当な気はしてます

— Qurage (@Qurage) 2014, 8月 28

ごアドバイスをいただいた。

一時しのぎ的ではありますが、非常に手軽で、また後の設計に影響を与えずに動かすことができるので、使える機会は多いと思いました。