FastAPI で Vue 3 の SSR を実行するにはどうすればよいですか?
<p>Vue の SSR ドキュメントによると、node.js を使用してアプリケーションをレンダリングし、Express サーバーを使用してそれを返すことが可能です。 FastAPIでも同じことができるのでしょうか? </p>
<p>それとも、Jinja2 テンプレートまたは SPA を使用することが唯一の解決策ですか? </p>
<h3>質問: </h3>
<li>SPA なし: SEO に役立ちます</li>
<li>SSG なし: 生成されるページが多すぎます。一部は動的に生成する必要があります。 </li>
<li>Jinja2/Python テンプレートなし: ノード モジュールは構築、バンドル、提供されません。すべてのモジュールはリモート パッケージ CDN 経由で提供される必要があります。 </li>
</ul>
<p>Vue 3 の区切り文字を変更してプロジェクトをビルドし、ファイルを Jinja2 テンプレートとして提供することが解決策になるような気がしますが、それが Vue のルーターでどのように機能するかはわかりません。 <code>/dist</code> フォルダーをデフォルト ルートで提供し、実際に存在するファイルを表示するために使用できるキャッチオールを使用できることはわかっています。 </p>
考えられる解決策
<pre class="brush:py;toolbar:false;">@app.get("/", response_class=FileResponse)
def read_index(リクエスト: リクエスト):
インデックス = f"{static_folder}/index.html"
ファイルレスポンス(インデックス)を返す
@app.get("/{catchall:path}"、response_class=FileResponse)
def read_index(リクエスト: リクエスト):
path = request.path_params["キャッチオール"]
ファイル = 静的フォルダーのパス
os.path.exists(ファイル)の場合:
ファイル応答を返す(ファイル)
インデックス = f"{static_folder}/index.html"
ファイルレスポンス(インデックス)を返す
</pre>
<h3>質問</h3>
<li>FastAPI と Vue 3 を使用して SSR を実行する方法があるとしたら、それは何ですか? </li>
<li>直接的な方法がない場合、Vue の組み込み <code>/dist</code> と Jinja2 テンプレートを組み合わせて動的ページを提供するにはどうすればよいでしょうか? </li>
</ul><
