Bagaimana untuk membuat FastAPI melaksanakan SSR untuk Vue 3?

Question

Menurut dokumentasi SSR Vue, adalah mungkin untuk membuat aplikasi menggunakan node.js dan mengembalikannya menggunakan pelayan Express. Bolehkah FastAPI melakukan perkara yang sama?

Atau adakah menggunakan templat Jinja2 atau SPA satu-satunya penyelesaian?

Soalan:

• Tiada SPA: Membantu dengan SEO
• Tiada SSG: Terlalu banyak halaman akan dijana. Sesetengahnya perlu dijana secara dinamik.
• Tiada templat Jinja2/Python: Modul nod tidak akan dibina, digabungkan dan disampaikan. Semua modul mesti disampaikan melalui CDN pakej jauh.

Saya mempunyai perasaan bahawa mungkin menukar pembatas Vue 3 dan kemudian membina projek dan menyediakan fail sebagai templat Jinja2 akan menjadi penyelesaiannya, tetapi saya tidak pasti bagaimana ia akan berfungsi dengan penghala Vue. Saya tahu bahawa folder /dist boleh disampaikan pada laluan lalai dan kemudian menggunakan catch-all yang boleh digunakan untuk menunjukkan fail yang sebenarnya wujud.

Penyelesaian yang mungkin

@app.get("/", response_class=FileResponse)
def read_index(permintaan: Permintaan):
    indeks = f"{static_folder}/index.html"
    kembalikan FileResponse(indeks)


@app.get("/{catchall:path}", response_class=FileResponse)
def read_index(permintaan: Permintaan):
    laluan = request.path_params["catchall"]
    fail = static_folder + laluan

    jika os.path.exists(fail):
        kembalikan FileResponse(fail)

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

Soalan

Jika ada cara untuk melakukan SSR menggunakan FastAPI dan Vue 3, apakah cara itu? 
Jika tiada cara langsung, bagaimana untuk menggabungkan /dist terbina dalam Vue dengan templat Jinja2 untuk menyediakan halaman dinamik? 
            

Answer 1

Terdapat pelbagai pilihan yang tersedia seperti Nuxt.js, Quasar dan Gridsome yang menyediakan sokongan untuk SSR melalui FastAPI dan Vue 3.