Vite 側でテンプレート HTML を生成する

[acid-chicken]

Summary

• Pug テンプレートがバックエンド側にある現状を解決できる PugをHTMLに移行 #16
• ページ単位でモジュールを最適化できる frontend: init.tsをmain-boot.ts/sub-boot.tsのように分ける #10838
• CSP に対応できる CSPを導入する #9848

[EbiseLutica]

メタタグのSSRはどう埋め込む方針かしら

[tamaina]

https://ja.vitejs.dev/guide/ssr.html これ？

[tamaina]

メタタグのSSRは出来なさそうなのでpugは残るな

[acid-chicken]

実際の細かな手法については色々手探りで吟味することになると思うけど、メタタグについてはなんとかなる予定

[tamaina]

（htmlタグの中身全部描画すればいいのか）

[acid-chicken]

Vite に HTML の生成を任せると、そのページに必要なバンドルを載せられる構造基盤ができるので、そこからメタタグの注入であったり、（最初に目指すべき目標の範疇外だが）コンポーネントを SSR 可能にしてサーバー側で HTML を焼けるようにできる。どのみちスタート地点としてここを通るだろうという話。

[acid-chicken]

実際に SSR することを見越すならば Vue を Node.js 上で動かす構造などが予想される

[acid-chicken]

https://ja.vuejs.org/guide/scaling-up/ssr.html から読み始めていただくとイメージ掴みやすいかも

[tamaina]

（htmlタグの中身全部描画すればいいのか）

流石にこれは無理そうだったけど対応しないかしら

[tamaina]

あ、できるかも

[tamaina]

（Viteは大したことしてないのか

[acid-chicken]

• Vite にはテンプレート HTML すなわちアプリケーションがマウントされるより外側を生成させたい
  • ここからメタタグ程度ならなんとかなる
• そのテンプレート HTML に対してアプリケーションを SSR すると内側も書けるよね
  • これは色々やることが多いのですぐにはできない

[tamaina]

https://vscode.dev/github/vitejs/vite-plugin-vue/playground/ssr-vue/server.js あたりを参照するとかなり単純に見えて、htmlタグからvueとして書けるかもしれない

[tamaina]

（そういえばこんなところにいい感じのモックがあったので明日はこれを改造するか）

https://github.com/misskey-dev/client-build-mock

[tamaina]

メモ: ClientOnly

https://github.com/vuejs/vitepress/blob/main/src/client/app/components/ClientOnly.ts

[tamaina]

• サーバーではhtmlからレンダーして、クライアントではbody内の普通のマウントポイントにマウントする
• サーバーではプリロードの計算をするためにアプリのレンダーを2回行う

みたいなヤバい実装で今の所落ち着いている

https://github.com/misskey-dev/client-build-mock/tree/ssr

[fruitriin]

https://github.com/misskey-dev/misskey/compare/develop...fruitriin:feat/launch-standalone-frontend?expand=1

宛先間違えたかも
#9411

途中で飽きたけど一応Frontend単体で動いてます

テーマの取得がうまくかない
言語の取得がうまくいかない
(niraxから値が取得できてない？ config.ts が期待通り動いてない？）
など問題は多いですけど
OGP・検索用には前段でbackendにプロクシして返すなどすれば
TitleタグはVueからいじったらそのまま反映されるので
manifest.jsonはどうしようかな……

続きやりたい人いればどうぞ

[fruitriin]

fruitriin#1

進捗してます

[tamaina]

OGP・検索用には前段でbackendにプロクシして返すなどすれば

ちょっとこの方針は微妙かも…

[acid-chicken]

standalone frontend はそもそも Storybook がそれそのもの（ルーティングの概念がないだけで）

[fruitriin]

検索はともかくogpはJSをパースしないのでSSR的なアプローチが必要

逆に言えば、OGP以外でSSRが必要な要素はブラウザ的にはないとおもうんだけどどの辺が微妙？

[fruitriin]

SPAなアプリケーションをSSRにするのは移植が死ぬほど大変なのでおすすめしない

[tamaina]

SSRにしたいよね的な雰囲気があったんだけどこのIssueじゃなくて #11428 だったわね

[tamaina]

どんなに大変な移植でもしゅいろが1週間でやってくれるので問題ない

[tamaina]

@fruitriin 的にはこのIssueは「本番環境でフロントエンドのコードをバックエンドを介さずに返したい」という解釈になるらしいけど、私はむしろ #11428 も考えながらバックエンド側へViteを結合させていく方針だと思っているんだけど (少なくとも @acid-chicken の意見はそれで間違いなさそう)

[acid-chicken]

Yes

[fruitriin]

Nuxt等のSSRに移行すると、「ユーザーの状態とサーバーの状態を持った状態でレンダリングに至るまでの全てのステートを計算した上で仮想DOMを構築してHTMLをレンダリングする」という処理を「全ユーザーの全リクエストごとに」「サーバーで」行う必要があります。
これはパフォーマンス上サーバー管理人である私個人的には容認したくありません。

SSRしたいという意図は大きく分けて2つあり、一つはOGP用です。こちらはOGPのタグのみが必要であり、HTMLのBODYは必要ありません。
つまりこの要件を満たす最小の実装でも目的を果たすことができます。

もう一つはそれ以外のBODYを保存または解析する必要があるリクエストの応答です。
これは果たしてメインのユースケースでしょうか？
副次的な作用として、サーバーでHTMLが構築された状態でユーザーのデバイスに届ければデバイスでスクリプト実行を待たずにページが表示することができるので、ファーストビューが速いという作用があります。
(一時期これがフロントエンドの未来だ！的な感じで持て囃されましたが、ユーザーのデバイスで処理される部分とサーバー内で処理する部分で分岐させる必要があって運用が辛いか、私が世間から切り離されているかのいずれかだと思います)

飽きた

[tamaina]

ファーストビューを速くしたいというのは動機として大きかったと記憶している

サーバーの負荷が増大するのは私も懸念するところ

（とはいえViteで受けてバックエンドへプロキシするのもそれはそれでオーバーヘッドが増える懸念があるけど、これは計測が必要そう）

[fruitriin]

Viteでプロクシするアプローチは開発用のもので、Viteのdev serverは本番用ではありません
省きますが前段にnginxかapatchが必要です(urlのrewiteがないとルーティングできません)

[acid-chicken]

Nuxt等のSSRに移行すると、「ユーザーの状態とサーバーの状態を持った状態でレンダリングに至るまでの全てのステートを計算した上で仮想DOMを構築してHTMLをレンダリングする」という処理を「全ユーザーの全リクエストごとに」「サーバーで」行う必要があります。

うーん、少なくとも私が考えているのは

• 初回レンダーされるルートによって必要なアセットは違う
  • スクリプトやスタイルが nirax で遅延ロードされるよりは先にサーバーサイドで決定しておいてくれたほうが嬉しいし、それってビルド時に決定すれば静的に実現できるよね
• どうせ <script> とかを事前に決定するんだったらいわゆる OGP 向けのプレースホルダーも置けるよね

程度にしか考えていないし、もし仮にフロントエンドの初回ロードをサーバーサイドに持ってきたとてページ遷移ごとに SSR することを想定したつもりはなく、そのようなことを書いた覚えもない

[acid-chicken]

おそらく動的に持ち込むか静的に持ち込むかで解釈が剥離したんだと思うけど、少なくとも意図している方はタイトルに書いています

[fruitriin]

Storybookでいいじゃんルーティングないけど
という話はルーティングできないと開発がつらくないのですか……？

[fruitriin]

もし仮にフロントエンドの初回ロードをサーバーサイドに持ってきたとてページ遷移ごとに SSR することを想定したつもりはなく、そのようなことを書いた覚えもない

SSRしてページ遷移するときはサーバーに問い合わせるのはAPIだけなので都度SSRされるわけではありませんね

[fruitriin]

いやもうなんでもいいです
好きにして