如何讓 FastAPI 為 Vue 3 執行 SSR？

Question

根據 Vue 的 SSR 文檔，可以使用 node.js 渲染應用程式並使用 Express 伺服器返回它。 FastAPI 可以做同樣的事情嗎？

或使用 Jinja2 模板或 SPA 是唯一的解決方案嗎？

問題：

• 無 SPA：幫助進行 SEO
• 無 SSG：會產生太多頁面。有些需要動態產生。
• 沒有 Jinja2/Python 模板：不會建造、捆綁和提供節點模組。所有模組都必須透過遠端包 CDN 提供服務。

我有一種感覺，也許更改 Vue 3 分隔符號然後建立專案並將文件作為 Jinja2 模板提供是解決方案，但我不確定它如何與 Vue 的路由器一起使用。我知道 /dist 資料夾可以在預設路由上提供服務，然後使用一個包羅萬象的可以用來顯示確實存在的檔案。

可能的解決方案

@app.get("/", response_class=FileResponse)
def read_index(request: Request):
    index = f"{static_folder}/index.html"
    return FileResponse(index)


@app.get("/{catchall:path}", response_class=FileResponse)
def read_index(request: Request):
    path = request.path_params["catchall"]
    file = static_folder path

    if os.path.exists(file):
        return FileResponse(file)

    index = f"{static_folder}/index.html"
    return FileResponse(index)

問題

• 如果有一種方法可以使用 FastAPI 和 Vue 3 進行 SSR，那是什麼？
• 如果沒有直接的方法，如何將 Vue 內建的 /dist 與 Jinja2 範本結合提供動態頁面？

Answer 1

有多種可用選項，例如 Nuxt.js、Quasar 和 Gridsome，它們透過 FastAPI 和 Vue 3 提供對 SSR 的支援。