|
|
import{_ as e,c as n,j as i,a,G as p,ag as l,B as d,o as h}from"./chunks/framework.C1C4sYC0.js";const _=JSON.parse('{"title":"MPA 모드","description":"","frontmatter":{},"headers":[],"relativePath":"ko/guide/mpa-mode.md","filePath":"ko/guide/mpa-mode.md","lastUpdated":1723033845000}'),k={name:"ko/guide/mpa-mode.md"},r={id:"mpa-mode",tabindex:"-1"};function o(E,s,c,g,m,y){const t=d("Badge");return h(),n("div",null,[i("h1",r,[s[0]||(s[0]=a("MPA 모드 ")),p(t,{type:"warning",text:"실험적"}),s[1]||(s[1]=a()),s[2]||(s[2]=i("a",{class:"header-anchor",href:"#mpa-mode","aria-label":'Permalink to "MPA 모드 <Badge type="warning" text="실험적" /> {#mpa-mode}"'},"",-1))]),s[3]||(s[3]=l(`<p>MPA (다중 페이지 애플리케이션) 모드는 명령줄에서 <code>vitepress build --mpa</code>를 통해 활성화할 수 있으며, 구성 파일에서 <code>mpa: true</code> 옵션을 통해서도 활성화할 수 있습니다.</p><p>MPA 모드에서는 모든 페이지가 기본적으로 JavaScript 없이 렌더링됩니다. 그 결과, 프로덕션 사이트는 감사 도구로부터 초기 방문 성능 점수가 더 좋을 가능성이 있습니다.</p><p>그러나 SPA 탐색이 없기 때문에 페이지 간 링크는 전체 페이지를 새로 고침합니다. MPA 모드에서의 포스트-로드 탐색은 SPA 모드만큼 즉각적으로 느껴지지 않을 것입니다.</p><p>또한 기본적으로 JS가 없다는 것은 Vue를 순전히 서버 사이드 템플릿 언어로 사용하고 있다는 것을 의미합니다. 브라우저에서는 이벤트 핸들러가 첨부되지 않으므로 상호작용이 없습니다. 클라이언트 사이드 JavaScript를 로드하려면 특별한 <code><script client></code> 태그를 사용해야 합니다:</p><div class="language-html vp-adaptive-theme"><button title="코드 복사" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> client</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
|
|
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"># Hello</span></span></code></pre></div><p><code><script client></code>는 VitePress 전용 기능이며, Vue 기능이 아닙니다. 이 기능은 <code>.md</code> 파일과 <code>.vue</code> 파일에서 모두 작동하지만, MPA 모드에서만 사용됩니다. 모든 테마 컴포넌트의 클라이언트 스크립트는 함께 번들링되지만, 특정 페이지에 대한 클라이언트 스크립트는 개별적으로 처리됩니다.</p><p><code><script client></code>는 <strong>Vue 컴포넌트 코드로 평가되지 않음</strong>을 유의하십시오. 이는 단순한 JavaScript 모듈로 처리됩니다. 이러한 이유로, 사이트가 최소한의 클라이언트 사이드 상호작용을 요구하는 경우에만 MPA 모드를 사용하는 것이 좋습니다.</p>`,7))])}const F=e(k,[["render",o]]);export{_ as __pageData,F as default};
|
