FastAPI で Vue 3 の SSR を実行するにはどうすればよいですか?

Question

<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><

Answer 1

FastAPI および Vue 3 を介して SSR のサポートを提供する、Nuxt.js、Quasar、Gridsome など、いくつかのオプションが利用可能です。