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>No Jinja2/Python 템플릿: 노드 모듈이 빌드, 번들 및 제공되지 않습니다. 모든 모듈은 원격 패키지 CDN을 통해 제공되어야 합니다. </li> </ul> <p>Vue 3 구분 기호를 변경한 다음 프로젝트를 빌드하고 파일을 Jinja2 템플릿으로 제공하는 것이 해결책이 될 것 같지만 Vue 라우터에서 어떻게 작동할지 잘 모르겠습니다. <code>/dist</code> 폴더가 기본 경로에서 제공될 수 있으며 실제로 존재하는 파일을 표시하는 데 사용할 수 있는 catch-all을 사용할 수 있다는 것을 알고 있습니다. </p> <h3>가능한 해결책</h3> <pre class="brush:py;toolbar:false;">@app.get("/", response_class=FileResponse) def read_index(요청: 요청): index = f"{static_folder}/index.html" FileResponse(색인) 반환 @app.get("/{catchall:path}", response_class=FileResponse) def read_index(요청: 요청): 경로 = request.path_params["catchall"] 파일 = static_folder + 경로 os.path.exists(파일)인 경우: FileResponse(파일) 반환 index = f"{static_folder}/index.html" FileResponse(색인) 반환 </pre>

질문

<li>FastAPI와 Vue 3를 사용하여 SSR을 수행할 수 있는 방법이 있다면 무엇일까요? </li> <li>직접적인 방법이 없다면 Vue의 내장 <code>/dist</code>를 Jinja2 템플릿과 결합하여 동적 페이지를 제공하는 방법은 무엇입니까? </li>

Answer 1

FastAPI 및 Vue 3를 통해 SSR을 지원하는 Nuxt.js, Quasar 및 Gridsome과 같은 다양한 옵션을 사용할 수 있습니다.