JavaScript で書きかえる系のページの初期HTMLはどこで作るか

Question

SPAサイトやフレームワークの経験者の人の意見を聞きたいです。

完全に SPA のサイトまで行かなくとも、 JavaScript で画面を書き換えることが多いページで URL にアクセスしたときに最初に表示する HTML はどこでつくるのが最も良い方法なのでしょうか？

選択肢はこの 3 つのどれかになるかと思います。

• サーバサイドのテンプレートエンジンなどをつかって HTML として作っておく
• JSON などを埋め込んでおいて onload などで JavaScript で構築する
• 埋め込みはしないでページ開いたときにデータを fetch してそのデータを使って構築する

1 つめは、JS が動かない環境でも見れますし、クライアント側での処理が少なく済むのがメリットに思います。
ですが、いまどき JS が動かない環境はほぼなくサポートする必要もないと言っていいくらいですし、 JS メインのページなので最初の状態だけ見れてもあまり意味がないと思います。
また、クライアント側の処理が少ないといっても最初のちょっとだけですし、アクセスが多くなることを考えるとサーバ側の処理を減らしたほうが良いように思います。

さらに、JS で画面遷移がある以上、初期の画面を作ることは JS 側で可能なはずです。
JS で作れる処理があるのに、おなじものをサーバ側でも作るのはムダに思いますし、デザイン変更があると修正が二度手間に思います。

これらのことから、HTMLを準備するのはメリットが薄く、 1つめの方法はあまり使いたいと思えません。

残り 2 つは、画面を作るためのデータをHTMLにJSONとして埋め込むかfetchして外部からデータを持ってくるかの違いです。
キャッシュなどの都合から別ファイルになっていたほうが良いように思うので 3 つめが一番いいのでは、というのが私の結論です。
（webpack で動的なデータもまとめられるなら 2 つめになるかも）

ですが、世の中のサイトではサーバから受け取るHTMLがすでに完成済みのものが多いように思います。
なぜこの方法をとっているのでしょうか？

JS を実行できない検索エンジンへのSEO対策でしょうか？
それとも、なんらかのフレームワークで作るとこうしたほうが楽になるような仕組みがあるのでしょうか？

Answer 1

状況によっても違いますが、最初から「一定程度のHTMLを生成する」理由として、以下のようなものがあります。

• SEOなどの目的で、JavaScriptフレームワークが生成する結果をサーバサイドレンダリングしている（多くのフレームワークで、Node.jsを組み合わせれば比較的容易に実現可能です）
• あくまで「JavaScriptはオプショナルなもの」という考えで、「JavaScriptがなくても最低限度のアクセスができるようにする」プログレッシブ・エンハンスメント

いまどき JS が動かない環境はほぼなくサポートする必要もない

視覚障害者向けに画面の文字を読み上げるスクリーンリーダーなど、ビジュアルなWebブラウザを使えない環境にいる人も一定数います。

Comments

[lazex]

GoogleはbotでもJS実行してくれますし、Bingもそんなことしてると聞いたことがあります。
どの検索エンジン向けのSEOを意識してるのか気になりました。
SPAサービスってサーバは Node.js 使っていることが多いのですかね。

> スクリーンリーダーなど、ビジュアルなWebブラウザを使えない環境
こういったものでも JavaScript で DOM 書き換え後のものを使うと思ってましたが、そうではないのもあるのですね。