<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>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
FastAPI 및 Vue 3를 통해 SSR을 지원하는 Nuxt.js, Quasar 및 Gridsome과 같은 다양한 옵션을 사용할 수 있습니다.