[{"data":1,"prerenderedAt":1422},["ShallowReactive",2],{"navigation_docs_ko":3,"-ko-note-nuxt4-nuxt-rendering-strategy":181,"-ko-note-nuxt4-nuxt-rendering-strategy-surround":1417},[4,114,167],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":27},"Note (개발 지식)","emojione-v1:note-pad","\u002Fko\u002Fnote","ko\u002F1.note",[10,28,42,68,78,88,104],{"title":11,"icon":12,"path":13,"stem":14,"children":15,"page":27},"Spring","logos:spring-icon","\u002Fko\u002Fnote\u002Fspring","ko\u002F1.note\u002F0.spring",[16],{"title":17,"icon":18,"path":19,"stem":20,"children":21,"page":27},"Spring Ai","custom:ai","\u002Fko\u002Fnote\u002Fspring\u002Fspring-ai","ko\u002F1.note\u002F0.spring\u002F1.spring-ai",[22],{"title":23,"path":24,"stem":25,"icon":26},"Spring AI 핵심 개념과 LLM 애플리케이션 구조 이해","\u002Fko\u002Fnote\u002Fspring\u002Fspring-ai\u002Fspring-ai","ko\u002F1.note\u002F0.spring\u002F1.spring-ai\u002F1.spring-ai","lucide:file-text",false,{"title":29,"icon":30,"path":31,"stem":32,"children":33,"page":27},"Javascript","skill-icons:javascript","\u002Fko\u002Fnote\u002Fjavascript","ko\u002F1.note\u002F1.javascript",[34,38],{"title":35,"path":36,"stem":37,"icon":26},"Promise.all과 구조 분해 할당을 활용한 데이터 처리 패턴","\u002Fko\u002Fnote\u002Fjavascript\u002Fdestructuring","ko\u002F1.note\u002F1.javascript\u002F1.destructuring",{"title":39,"path":40,"stem":41,"icon":26},"JavaScript 배열 고차 함수와 데이터 처리 패턴 이해","\u002Fko\u002Fnote\u002Fjavascript\u002Ffilter","ko\u002F1.note\u002F1.javascript\u002F2.filter",{"title":43,"icon":44,"path":45,"stem":46,"children":47,"page":27},"Nuxt4","logos:nuxt-icon","\u002Fko\u002Fnote\u002Fnuxt4","ko\u002F1.note\u002F2.nuxt4",[48,52,56,60,64],{"title":49,"path":50,"stem":51,"icon":26},"Nuxt 4를 선택한 이유와 아키텍처 및 실무 가이드","\u002Fko\u002Fnote\u002Fnuxt4\u002Fnuxt-info","ko\u002F1.note\u002F2.nuxt4\u002F1.nuxt-info",{"title":53,"path":54,"stem":55,"icon":26},"Nuxt useAsyncData 동작 원리와 SSR 데이터 페칭 최적화","\u002Fko\u002Fnote\u002Fnuxt4\u002Fnuxt-use_async_data","ko\u002F1.note\u002F2.nuxt4\u002F2.nuxt-use_async_data",{"title":57,"path":58,"stem":59,"icon":26},"Nuxt Content v3 데이터 모델과 Query 시스템 이해","\u002Fko\u002Fnote\u002Fnuxt4\u002Fnuxt-content-v3","ko\u002F1.note\u002F2.nuxt4\u002F3.nuxt-content-v3",{"title":61,"path":62,"stem":63,"icon":26},"Nuxt Auto-imports 내부 동작과 컴파일 과정 분석","\u002Fko\u002Fnote\u002Fnuxt4\u002Fnuxt-auto-import","ko\u002F1.note\u002F2.nuxt4\u002F4.nuxt-auto-import",{"title":65,"path":66,"stem":67,"icon":26},"Nuxt 렌더링 방식 이해: SSR, SSG, ISR, CSR 구현 방법","\u002Fko\u002Fnote\u002Fnuxt4\u002Fnuxt-rendering-strategy","ko\u002F1.note\u002F2.nuxt4\u002F5.nuxt-rendering-strategy",{"title":69,"icon":70,"path":71,"stem":72,"children":73,"page":27},"Nitro","unjs:nitro","\u002Fko\u002Fnote\u002Fnitro","ko\u002F1.note\u002F3.nitro",[74],{"title":75,"path":76,"stem":77,"icon":26},"Nitro 아키텍처와 서버 엔진 구조","\u002Fko\u002Fnote\u002Fnitro\u002Fnitro","ko\u002F1.note\u002F3.nitro\u002Fnitro",{"title":79,"icon":80,"path":81,"stem":82,"children":83,"page":27},"Devops","vscode-icons:file-type-pipeline","\u002Fko\u002Fnote\u002Fdevops","ko\u002F1.note\u002F4.devops",[84],{"title":85,"path":86,"stem":87,"icon":26},"서버사이드 WebAssembly(Wasm)와 차세대 실행 환경","\u002Fko\u002Fnote\u002Fdevops\u002Fwebassembly","ko\u002F1.note\u002F4.devops\u002F1.webAssembly",{"title":89,"icon":90,"path":91,"stem":92,"children":93,"page":27},"Tooling","lucide:wrench","\u002Fko\u002Fnote\u002Ftooling","ko\u002F1.note\u002F4.tooling",[94],{"title":95,"icon":96,"path":97,"stem":98,"children":99,"page":27},"Package Manager","devicon:npm","\u002Fko\u002Fnote\u002Ftooling\u002Fpackage-manager","ko\u002F1.note\u002F4.tooling\u002F1.package-manager",[100],{"title":101,"path":102,"stem":103,"icon":26},"Package Lock 파일의 역할과 의존성 관리 원리","\u002Fko\u002Fnote\u002Ftooling\u002Fpackage-manager\u002Fpackage-lock","ko\u002F1.note\u002F4.tooling\u002F1.package-manager\u002F1.package-lock",{"title":105,"icon":106,"path":107,"stem":108,"children":109,"page":27},"Web","streamline-plump:web","\u002Fko\u002Fnote\u002Fweb","ko\u002F1.note\u002F4.web",[110],{"title":111,"path":112,"stem":113,"icon":26},"웹 애플리케이션 렌더링 아키텍처 이해","\u002Fko\u002Fnote\u002Fweb\u002Frendering-modes","ko\u002F1.note\u002F4.web\u002F2.rendering-modes",{"title":115,"icon":116,"path":117,"stem":118,"children":119,"page":27},"Project (개발일지)","icon-park-solid:branch-two","\u002Fko\u002Fproject","ko\u002F2.project",[120],{"title":121,"icon":122,"path":123,"stem":124,"children":125,"page":27},"Brolog","custom:symbol","\u002Fko\u002Fproject\u002Fbrolog","ko\u002F2.project\u002F1.brolog",[126,130,134,138,142,146,150,154,159,163],{"title":127,"path":128,"stem":129,"icon":26},"Brolog 프로젝트 개요","\u002Fko\u002Fproject\u002Fbrolog\u002Foutline","ko\u002F2.project\u002F1.brolog\u002F1.outline",{"title":131,"path":132,"stem":133,"icon":26},"[Brolog] Nuxt Multi Layer 프로젝트 Vercel 배포 (3) - Runtime 기능 문제 분석과 AI Assistant 전환","\u002Fko\u002Fproject\u002Fbrolog\u002Fvercel-deploy3-ai-integration","ko\u002F2.project\u002F1.brolog\u002F10.vercel-deploy3-ai-integration",{"title":135,"path":136,"stem":137,"icon":26},"[Brolog] AI Assistant 적용 과정 - Agent 구조와 API 사용량 관리 시 고려사항","\u002Fko\u002Fproject\u002Fbrolog\u002Fai-assistant-application-process","ko\u002F2.project\u002F1.brolog\u002F11.ai-assistant-application-process",{"title":139,"path":140,"stem":141,"icon":26},"Brolog 프로젝트 구조","\u002Fko\u002Fproject\u002Fbrolog\u002Fstructure","ko\u002F2.project\u002F1.brolog\u002F2.structure",{"title":143,"path":144,"stem":145,"icon":26},"[Nuxt Content] 네비게이션 아이콘 커스텀 빌드","\u002Fko\u002Fproject\u002Fbrolog\u002Fcustom-icon","ko\u002F2.project\u002F1.brolog\u002F3.custom-icon",{"title":147,"path":148,"stem":149,"icon":26},"[Nuxt 4] Auto-imports 동작 원리와 자동 import 시스템 이해","\u002Fko\u002Fproject\u002Fbrolog\u002Fnuxt-auto-import","ko\u002F2.project\u002F1.brolog\u002F4.nuxt-auto-import",{"title":151,"path":152,"stem":153,"icon":26},"[Brolog] 개발 블로그 메인 페이지 구현","\u002Fko\u002Fproject\u002Fbrolog\u002Fdevelop-main","ko\u002F2.project\u002F1.brolog\u002F5.develop-main",{"title":155,"path":156,"stem":157,"icon":158},"[Brolog] 브랜드 아이덴티티 적용 - Custom 404 페이지와 Default No Image 구현","\u002Fko\u002Fproject\u002Fbrolog\u002Fcustom-error-and-default-thumbnail","ko\u002F2.project\u002F1.brolog\u002F6.custom-error-and-default-thumbnail","lucide:image",{"title":160,"path":161,"stem":162,"icon":26},"[Brolog] Nuxt Multi Layer 프로젝트 Vercel 배포 (1)","\u002Fko\u002Fproject\u002Fbrolog\u002Fvercel-deploy1","ko\u002F2.project\u002F1.brolog\u002F8.vercel-deploy1",{"title":164,"path":165,"stem":166,"icon":26},"[Brolog] Nuxt Multi Layer 프로젝트 Vercel 배포 (2) - Build Pipeline 오류 분석과 Nuxt 실행 구조 이해","\u002Fko\u002Fproject\u002Fbrolog\u002Fvercel-deploy2-error-analyze","ko\u002F2.project\u002F1.brolog\u002F9.vercel-deploy2-error-analyze",{"title":168,"icon":169,"path":170,"stem":171,"children":172,"page":27},"Error (트러블슈팅)","emojione:stop-sign","\u002Fko\u002Ftrouble-shooting","ko\u002F3.trouble-shooting",[173],{"title":121,"icon":122,"path":174,"stem":175,"children":176,"page":27},"\u002Fko\u002Ftrouble-shooting\u002Fbrolog","ko\u002F3.trouble-shooting\u002F1.brolog",[177],{"title":178,"path":179,"stem":180,"icon":26},"[Nuxt Content] Nuxt Icon 오류 해결과 Custom Collection 기반 오프라인 아이콘 구성","\u002Fko\u002Ftrouble-shooting\u002Fbrolog\u002Fnuxt-icon-restricted-network-troubleshooting","ko\u002F3.trouble-shooting\u002F1.brolog\u002F1.nuxt-icon-restricted-network-troubleshooting",{"id":182,"title":65,"body":183,"date":1404,"description":1405,"extension":1406,"links":1407,"meta":1408,"navigation":1412,"path":66,"seo":1413,"stem":67,"__hash__":1416},"docs_ko\u002Fko\u002F1.note\u002F2.nuxt4\u002F5.nuxt-rendering-strategy.md",{"type":184,"value":185,"toc":1387},"minimark",[186,1383],[187,188,190,195,204,207,223,226,229,232,236,239,242,254,257,262,265,397,400,404,407,418,425,428,430,434,437,440,447,450,452,456,459,582,585,587,591,596,599,603,606,610,617,620,622,626,629,636,639,641,645,652,676,679,686,689,691,695,698,791,794,796,800,803,817,819,823,826,829,836,838,842,856,939,942,949,951,955,958,965,968,979,982,984,988,1055,1057,1061,1064,1067,1070,1234,1237,1244,1247,1249,1253,1263,1265,1283,1286,1289,1296,1299,1302,1309,1311,1313,1329,1332,1334,1341,1344,1346,1353,1355,1358,1361,1364,1374,1377,1380],"u-page-card",{":spotlight":189},"true",[191,192,194],"h1",{"id":193},"nuxt-렌더링-방식-이해하기","🌐 Nuxt 렌더링 방식 이해하기",[196,197,198,199,203],"p",{},"웹 애플리케이션을 개발할 때 중요한 결정 중 하나는 ",[200,201,202],"strong",{},"페이지를 언제 생성할 것인가","이다.",[196,205,206],{},"같은 Nuxt 애플리케이션이라도 설정에 따라:",[208,209,210,214,217,220],"ul",{},[211,212,213],"li",{},"브라우저에서 생성하는 방식 (CSR)",[211,215,216],{},"서버 요청마다 생성하는 방식 (SSR)",[211,218,219],{},"빌드 시 미리 생성하는 방식 (SSG)",[211,221,222],{},"일정 주기로 재생성하는 방식 (ISR)",[196,224,225],{},"으로 동작 방식을 변경할 수 있다.",[196,227,228],{},"Nuxt는 특정 하나의 렌더링 방식만 제공하는 프레임워크가 아니라, 페이지 성격에 맞게 여러 렌더링 전략을 조합할 수 있도록 설계되어 있다.",[230,231],"hr",{},[191,233,235],{"id":234},"_1-csr-client-side-rendering","1. CSR (Client Side Rendering)",[196,237,238],{},"CSR은 브라우저에서 JavaScript를 실행한 뒤 화면을 생성하는 방식이다.",[196,240,241],{},"전통적인 SPA(Vue CLI, React SPA 등)에서 사용하는 대표적인 방식이다.",[243,244,251],"pre",{"className":245,"code":247,"filename":248,"language":249,"meta":250},[246],"language-text","\n사용자 요청\n\n↓\n\nHTML 반환\n(빈 Root Element)\n\n↓\n\nJavaScript 다운로드\n\n↓\n\n브라우저에서 Vue 실행\n\n↓\n\n화면 렌더링\n","CSR Rendering Flow","text","",[252,253,247],"code",{"__ignoreMap":250},[196,255,256],{},"초기 HTML에는 실제 콘텐츠가 포함되지 않고, 브라우저에서 Vue 애플리케이션이 실행된 이후 화면이 생성된다.",[258,259,261],"h2",{"id":260},"nuxt에서-csr-사용하기","Nuxt에서 CSR 사용하기",[196,263,264],{},"Nuxt는 기본적으로 SSR을 지원하지만 특정 페이지를 CSR 방식으로 변경할 수 있다.",[243,266,271],{"className":267,"code":268,"filename":269,"language":270,"meta":250,"style":250},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\n\u003Cscript setup>\ndefinePageMeta({\n  ssr: false\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    Client Side Rendering 페이지\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","pages\u002Fadmin.vue","vue",[252,272,273,282,300,314,327,336,346,351,361,372,378,388],{"__ignoreMap":250},[274,275,278],"span",{"class":276,"line":277},"line",1,[274,279,281],{"emptyLinePlaceholder":280},true,"\n",[274,283,285,289,293,297],{"class":276,"line":284},2,[274,286,288],{"class":287},"sMK4o","\u003C",[274,290,292],{"class":291},"swJcz","script",[274,294,296],{"class":295},"spNyl"," setup",[274,298,299],{"class":287},">\n",[274,301,303,307,311],{"class":276,"line":302},3,[274,304,306],{"class":305},"s2Zo4","definePageMeta",[274,308,310],{"class":309},"sTEyZ","(",[274,312,313],{"class":287},"{\n",[274,315,317,320,323],{"class":276,"line":316},4,[274,318,319],{"class":291},"  ssr",[274,321,322],{"class":287},":",[274,324,326],{"class":325},"sfNiH"," false\n",[274,328,330,333],{"class":276,"line":329},5,[274,331,332],{"class":287},"}",[274,334,335],{"class":309},")\n",[274,337,339,342,344],{"class":276,"line":338},6,[274,340,341],{"class":287},"\u003C\u002F",[274,343,292],{"class":291},[274,345,299],{"class":287},[274,347,349],{"class":276,"line":348},7,[274,350,281],{"emptyLinePlaceholder":280},[274,352,354,356,359],{"class":276,"line":353},8,[274,355,288],{"class":287},[274,357,358],{"class":291},"template",[274,360,299],{"class":287},[274,362,364,367,370],{"class":276,"line":363},9,[274,365,366],{"class":287},"  \u003C",[274,368,369],{"class":291},"div",[274,371,299],{"class":287},[274,373,375],{"class":276,"line":374},10,[274,376,377],{"class":309},"    Client Side Rendering 페이지\n",[274,379,381,384,386],{"class":276,"line":380},11,[274,382,383],{"class":287},"  \u003C\u002F",[274,385,369],{"class":291},[274,387,299],{"class":287},[274,389,391,393,395],{"class":276,"line":390},12,[274,392,341],{"class":287},[274,394,358],{"class":291},[274,396,299],{"class":287},[196,398,399],{},"해당 페이지는 서버에서 HTML을 생성하지 않고 브라우저에서만 렌더링된다.",[258,401,403],{"id":402},"csr-사용-사례","CSR 사용 사례",[196,405,406],{},"적합한 영역:",[208,408,409,412,415],{},[211,410,411],{},"관리자 페이지",[211,413,414],{},"인증이 필요한 대시보드",[211,416,417],{},"SEO가 중요하지 않은 서비스 영역",[243,419,423],{"className":420,"code":421,"filename":422,"language":249,"meta":250},[246],"\u002Fadmin\u002Fdashboard\n\n\u002Fmember\u002Fsettings\n","CSR Page Example",[252,424,421],{"__ignoreMap":250},[196,426,427],{},"검색 엔진 노출보다 사용자 인터랙션이 중요한 경우 적합하다.",[230,429],{},[191,431,433],{"id":432},"_2-ssr-server-side-rendering","2. SSR (Server Side Rendering)",[196,435,436],{},"SSR은 사용자가 페이지를 요청할 때 서버에서 HTML을 생성하는 방식이다.",[196,438,439],{},"Nuxt의 기본 렌더링 방식이다.",[243,441,445],{"className":442,"code":443,"filename":444,"language":249,"meta":250},[246],"\n사용자 요청\n\n↓\n\nNuxt Server\n\n↓\n\nVue Component 실행\n\n↓\n\nHTML 생성\n\n↓\n\n브라우저 전달\n\n↓\n\nHydration\n","SSR Rendering Flow",[252,446,443],{"__ignoreMap":250},[196,448,449],{},"서버에서 완성된 HTML을 전달하기 때문에 초기 화면 표시가 빠르고 SEO에 유리하다.",[230,451],{},[258,453,455],{"id":454},"nuxt-기본-ssr-동작","Nuxt 기본 SSR 동작",[196,457,458],{},"별도의 설정 없이 Nuxt 페이지는 SSR로 동작한다.",[243,460,463],{"className":267,"code":461,"filename":462,"language":270,"meta":250,"style":250},"\n\u003Cscript setup>\n\nconst { data } = await useFetch('\u002Fapi\u002Fposts')\n\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n\n  \u003Cdiv>\n    {{ data }}\n  \u003C\u002Fdiv>\n\n\u003C\u002Ftemplate>\n","pages\u002Fposts.vue",[252,464,465,469,479,483,519,523,531,535,543,547,555,560,568,573],{"__ignoreMap":250},[274,466,467],{"class":276,"line":277},[274,468,281],{"emptyLinePlaceholder":280},[274,470,471,473,475,477],{"class":276,"line":284},[274,472,288],{"class":287},[274,474,292],{"class":291},[274,476,296],{"class":295},[274,478,299],{"class":287},[274,480,481],{"class":276,"line":302},[274,482,281],{"emptyLinePlaceholder":280},[274,484,485,488,491,494,496,499,503,506,508,511,515,517],{"class":276,"line":316},[274,486,487],{"class":295},"const",[274,489,490],{"class":287}," {",[274,492,493],{"class":309}," data ",[274,495,332],{"class":287},[274,497,498],{"class":287}," =",[274,500,502],{"class":501},"s7zQu"," await",[274,504,505],{"class":305}," useFetch",[274,507,310],{"class":309},[274,509,510],{"class":287},"'",[274,512,514],{"class":513},"sfazB","\u002Fapi\u002Fposts",[274,516,510],{"class":287},[274,518,335],{"class":309},[274,520,521],{"class":276,"line":329},[274,522,281],{"emptyLinePlaceholder":280},[274,524,525,527,529],{"class":276,"line":338},[274,526,341],{"class":287},[274,528,292],{"class":291},[274,530,299],{"class":287},[274,532,533],{"class":276,"line":348},[274,534,281],{"emptyLinePlaceholder":280},[274,536,537,539,541],{"class":276,"line":353},[274,538,288],{"class":287},[274,540,358],{"class":291},[274,542,299],{"class":287},[274,544,545],{"class":276,"line":363},[274,546,281],{"emptyLinePlaceholder":280},[274,548,549,551,553],{"class":276,"line":374},[274,550,366],{"class":287},[274,552,369],{"class":291},[274,554,299],{"class":287},[274,556,557],{"class":276,"line":380},[274,558,559],{"class":309},"    {{ data }}\n",[274,561,562,564,566],{"class":276,"line":390},[274,563,383],{"class":287},[274,565,369],{"class":291},[274,567,299],{"class":287},[274,569,571],{"class":276,"line":570},13,[274,572,281],{"emptyLinePlaceholder":280},[274,574,576,578,580],{"class":276,"line":575},14,[274,577,341],{"class":287},[274,579,358],{"class":291},[274,581,299],{"class":287},[196,583,584],{},"위 코드는 서버에서 먼저 실행되어 HTML 생성 과정에 포함된다.",[230,586],{},[258,588,590],{"id":589},"ssr-장점","SSR 장점",[592,593,595],"h3",{"id":594},"seo-최적화","SEO 최적화",[196,597,598],{},"검색 엔진 크롤러가 완성된 HTML을 받을 수 있다.",[592,600,602],{"id":601},"최신-데이터-제공","최신 데이터 제공",[196,604,605],{},"요청 시 서버에서 데이터를 조회하기 때문에 항상 최신 상태를 유지할 수 있다.",[592,607,609],{"id":608},"동적-서비스-적합","동적 서비스 적합",[243,611,615],{"className":612,"code":613,"filename":614,"language":249,"meta":250},[246],"\n\u002Fprofile\u002F:id\n\n\u002Fproduct\u002F:id\n\n\u002Fdashboard\n","SSR Page Example",[252,616,613],{"__ignoreMap":250},[196,618,619],{},"사용자마다 다른 데이터를 보여줘야 하는 페이지에 적합하다.",[230,621],{},[191,623,625],{"id":624},"_3-ssg-static-site-generation","3. SSG (Static Site Generation)",[196,627,628],{},"SSG는 빌드 시점에 HTML을 미리 생성하는 방식이다.",[243,630,634],{"className":631,"code":632,"filename":633,"language":249,"meta":250},[246],"\nBuild 실행\n\n↓\n\nNuxt 페이지 실행\n\n↓\n\nHTML 생성\n\n↓\n\n정적 파일 저장\n\n↓\n\nCDN 제공\n","SSG Rendering Flow",[252,635,632],{"__ignoreMap":250},[196,637,638],{},"사용자가 방문할 때 서버에서 생성하지 않고 이미 만들어진 HTML 파일을 반환한다.",[230,640],{},[258,642,644],{"id":643},"nuxt에서-ssg-생성하기","Nuxt에서 SSG 생성하기",[196,646,647,648,651],{},"Nuxt에서는 ",[252,649,650],{},"generate"," 명령어를 사용한다.",[243,653,658],{"className":654,"code":655,"filename":656,"language":657,"meta":250,"style":250},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\nnpx nuxi generate\n","Terminal","bash",[252,659,660,664],{"__ignoreMap":250},[274,661,662],{"class":276,"line":277},[274,663,281],{"emptyLinePlaceholder":280},[274,665,666,670,673],{"class":276,"line":284},[274,667,669],{"class":668},"sBMFI","npx",[274,671,672],{"class":513}," nuxi",[274,674,675],{"class":513}," generate\n",[196,677,678],{},"빌드 결과:",[243,680,684],{"className":681,"code":682,"filename":683,"language":249,"meta":250},[246],"\n.output\u002F\n\n├── public\n\n└── generated html\n","Generate Output Structure",[252,685,682],{"__ignoreMap":250},[196,687,688],{},"형태의 정적 결과물이 생성된다.",[230,690],{},[258,692,694],{"id":693},"특정-페이지-정적-생성","특정 페이지 정적 생성",[196,696,697],{},"Nuxt 설정에서 prerender 대상을 지정할 수 있다.",[243,699,704],{"className":700,"code":701,"filename":702,"language":703,"meta":250,"style":250},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\nexport default defineNuxtConfig({\n\n  routeRules: {\n\n    '\u002Fblog\u002F**': {\n      prerender: true\n    }\n\n  }\n\n})\n","nuxt.config.ts","ts",[252,705,706,710,725,729,739,743,757,767,772,776,781,785],{"__ignoreMap":250},[274,707,708],{"class":276,"line":277},[274,709,281],{"emptyLinePlaceholder":280},[274,711,712,715,718,721,723],{"class":276,"line":284},[274,713,714],{"class":501},"export",[274,716,717],{"class":501}," default",[274,719,720],{"class":305}," defineNuxtConfig",[274,722,310],{"class":309},[274,724,313],{"class":287},[274,726,727],{"class":276,"line":302},[274,728,281],{"emptyLinePlaceholder":280},[274,730,731,734,736],{"class":276,"line":316},[274,732,733],{"class":291},"  routeRules",[274,735,322],{"class":287},[274,737,738],{"class":287}," {\n",[274,740,741],{"class":276,"line":329},[274,742,281],{"emptyLinePlaceholder":280},[274,744,745,748,751,753,755],{"class":276,"line":338},[274,746,747],{"class":287},"    '",[274,749,750],{"class":291},"\u002Fblog\u002F**",[274,752,510],{"class":287},[274,754,322],{"class":287},[274,756,738],{"class":287},[274,758,759,762,764],{"class":276,"line":348},[274,760,761],{"class":291},"      prerender",[274,763,322],{"class":287},[274,765,766],{"class":325}," true\n",[274,768,769],{"class":276,"line":353},[274,770,771],{"class":287},"    }\n",[274,773,774],{"class":276,"line":363},[274,775,281],{"emptyLinePlaceholder":280},[274,777,778],{"class":276,"line":374},[274,779,780],{"class":287},"  }\n",[274,782,783],{"class":276,"line":380},[274,784,281],{"emptyLinePlaceholder":280},[274,786,787,789],{"class":276,"line":390},[274,788,332],{"class":287},[274,790,335],{"class":309},[196,792,793],{},"해당 경로는 빌드 과정에서 HTML이 생성된다.",[230,795],{},[258,797,799],{"id":798},"ssg-사용-사례","SSG 사용 사례",[196,801,802],{},"정적 콘텐츠 중심 서비스:",[208,804,805,808,811,814],{},[211,806,807],{},"기술 블로그",[211,809,810],{},"문서 사이트",[211,812,813],{},"포트폴리오",[211,815,816],{},"마케팅 페이지",[230,818],{},[191,820,822],{"id":821},"_4-isr-incremental-static-regeneration","4. ISR (Incremental Static Regeneration)",[196,824,825],{},"ISR은 SSG와 SSR의 중간 형태다.",[196,827,828],{},"기본적으로 정적 페이지를 제공하지만, 일정 시간이 지나면 서버에서 페이지를 다시 생성한다.",[243,830,834],{"className":831,"code":832,"filename":833,"language":249,"meta":250},[246],"\n첫 요청\n\n↓\n\n기존 생성된 HTML 반환\n\n↓\n\n재생성 시간 확인\n\n↓\n\n필요하면 백그라운드 재생성\n\n↓\n\n다음 요청부터 새로운 HTML 제공\n","ISR Rendering Flow",[252,835,832],{"__ignoreMap":250},[230,837],{},[258,839,841],{"id":840},"nuxt에서-isr-사용하기","Nuxt에서 ISR 사용하기",[196,843,647,844,847,848,851,852,855],{},[252,845,846],{},"routeRules","의 ",[252,849,850],{},"swr"," 또는 ",[252,853,854],{},"isr"," 옵션을 활용한다.",[243,857,859],{"className":700,"code":858,"filename":702,"language":703,"meta":250,"style":250},"\nexport default defineNuxtConfig({\n\n  routeRules: {\n\n    '\u002Fposts\u002F**': {\n      swr: 3600\n    }\n\n  }\n\n})\n",[252,860,861,865,877,881,889,893,906,917,921,925,929,933],{"__ignoreMap":250},[274,862,863],{"class":276,"line":277},[274,864,281],{"emptyLinePlaceholder":280},[274,866,867,869,871,873,875],{"class":276,"line":284},[274,868,714],{"class":501},[274,870,717],{"class":501},[274,872,720],{"class":305},[274,874,310],{"class":309},[274,876,313],{"class":287},[274,878,879],{"class":276,"line":302},[274,880,281],{"emptyLinePlaceholder":280},[274,882,883,885,887],{"class":276,"line":316},[274,884,733],{"class":291},[274,886,322],{"class":287},[274,888,738],{"class":287},[274,890,891],{"class":276,"line":329},[274,892,281],{"emptyLinePlaceholder":280},[274,894,895,897,900,902,904],{"class":276,"line":338},[274,896,747],{"class":287},[274,898,899],{"class":291},"\u002Fposts\u002F**",[274,901,510],{"class":287},[274,903,322],{"class":287},[274,905,738],{"class":287},[274,907,908,911,913],{"class":276,"line":348},[274,909,910],{"class":291},"      swr",[274,912,322],{"class":287},[274,914,916],{"class":915},"sbssI"," 3600\n",[274,918,919],{"class":276,"line":353},[274,920,771],{"class":287},[274,922,923],{"class":276,"line":363},[274,924,281],{"emptyLinePlaceholder":280},[274,926,927],{"class":276,"line":374},[274,928,780],{"class":287},[274,930,931],{"class":276,"line":380},[274,932,281],{"emptyLinePlaceholder":280},[274,934,935,937],{"class":276,"line":390},[274,936,332],{"class":287},[274,938,335],{"class":309},[196,940,941],{},"의미:",[243,943,947],{"className":944,"code":945,"filename":946,"language":249,"meta":250},[246],"\n3600초 동안 생성된 HTML 재사용\n\n↓\n\n시간 만료 후 새로운 HTML 생성\n","ISR Cache Strategy",[252,948,945],{"__ignoreMap":250},[230,950],{},[258,952,954],{"id":953},"isr-사용-사례","ISR 사용 사례",[196,956,957],{},"자주 변경되지만 매 요청마다 SSR 할 필요가 없는 서비스.",[243,959,963],{"className":960,"code":961,"filename":962,"language":249,"meta":250},[246],"\n\u002Fnews\n\n\u002Fproducts\n\n\u002Franking\n","ISR Page Example",[252,964,961],{"__ignoreMap":250},[196,966,967],{},"특히:",[208,969,970,973,976],{},[211,971,972],{},"쇼핑몰 상품 페이지",[211,974,975],{},"뉴스 사이트",[211,977,978],{},"콘텐츠 플랫폼",[196,980,981],{},"같은 서비스에서 유용하다.",[230,983],{},[191,985,987],{"id":986},"_5-ssr-ssg-isr-선택-기준","5. SSR \u002F SSG \u002F ISR 선택 기준",[989,990,991,1007],"table",{},[992,993,994],"thead",{},[995,996,997,1001,1004],"tr",{},[998,999,1000],"th",{},"방식",[998,1002,1003],{},"생성 시점",[998,1005,1006],{},"적합한 서비스",[1008,1009,1010,1022,1033,1044],"tbody",{},[995,1011,1012,1016,1019],{},[1013,1014,1015],"td",{},"CSR",[1013,1017,1018],{},"브라우저 실행 시",[1013,1020,1021],{},"관리자 페이지, 앱 서비스",[995,1023,1024,1027,1030],{},[1013,1025,1026],{},"SSR",[1013,1028,1029],{},"요청 시 서버 생성",[1013,1031,1032],{},"로그인 기반 서비스, 동적 데이터",[995,1034,1035,1038,1041],{},[1013,1036,1037],{},"SSG",[1013,1039,1040],{},"빌드 시 생성",[1013,1042,1043],{},"블로그, 문서 사이트",[995,1045,1046,1049,1052],{},[1013,1047,1048],{},"ISR",[1013,1050,1051],{},"일정 주기 재생성",[1013,1053,1054],{},"뉴스, 상품, 콘텐츠 서비스",[230,1056],{},[191,1058,1060],{"id":1059},"_6-nuxt에서는-여러-방식을-함께-사용할-수-있다","6. Nuxt에서는 여러 방식을 함께 사용할 수 있다",[196,1062,1063],{},"Nuxt의 장점은 프로젝트 전체가 하나의 렌더링 방식으로 고정되지 않는다는 점이다.",[196,1065,1066],{},"페이지별로 렌더링 전략을 다르게 설정할 수 있다.",[196,1068,1069],{},"예:",[243,1071,1073],{"className":700,"code":1072,"filename":702,"language":703,"meta":250,"style":250},"\nexport default defineNuxtConfig({\n\n  routeRules: {\n\n    \u002F\u002F 블로그 글\n    '\u002Fblog\u002F**': {\n      prerender: true\n    },\n\n    \u002F\u002F 상품 페이지\n    '\u002Fproducts\u002F**': {\n      swr: 3600\n    },\n\n    \u002F\u002F 관리자 페이지\n    '\u002Fadmin\u002F**': {\n      ssr: false\n    }\n\n  }\n\n})\n",[252,1074,1075,1079,1091,1095,1103,1107,1113,1125,1133,1138,1142,1147,1160,1168,1172,1177,1183,1197,1207,1212,1217,1222,1227],{"__ignoreMap":250},[274,1076,1077],{"class":276,"line":277},[274,1078,281],{"emptyLinePlaceholder":280},[274,1080,1081,1083,1085,1087,1089],{"class":276,"line":284},[274,1082,714],{"class":501},[274,1084,717],{"class":501},[274,1086,720],{"class":305},[274,1088,310],{"class":309},[274,1090,313],{"class":287},[274,1092,1093],{"class":276,"line":302},[274,1094,281],{"emptyLinePlaceholder":280},[274,1096,1097,1099,1101],{"class":276,"line":316},[274,1098,733],{"class":291},[274,1100,322],{"class":287},[274,1102,738],{"class":287},[274,1104,1105],{"class":276,"line":329},[274,1106,281],{"emptyLinePlaceholder":280},[274,1108,1109],{"class":276,"line":338},[274,1110,1112],{"class":1111},"sHwdD","    \u002F\u002F 블로그 글\n",[274,1114,1115,1117,1119,1121,1123],{"class":276,"line":348},[274,1116,747],{"class":287},[274,1118,750],{"class":291},[274,1120,510],{"class":287},[274,1122,322],{"class":287},[274,1124,738],{"class":287},[274,1126,1127,1129,1131],{"class":276,"line":353},[274,1128,761],{"class":291},[274,1130,322],{"class":287},[274,1132,766],{"class":325},[274,1134,1135],{"class":276,"line":363},[274,1136,1137],{"class":287},"    },\n",[274,1139,1140],{"class":276,"line":374},[274,1141,281],{"emptyLinePlaceholder":280},[274,1143,1144],{"class":276,"line":380},[274,1145,1146],{"class":1111},"    \u002F\u002F 상품 페이지\n",[274,1148,1149,1151,1154,1156,1158],{"class":276,"line":390},[274,1150,747],{"class":287},[274,1152,1153],{"class":291},"\u002Fproducts\u002F**",[274,1155,510],{"class":287},[274,1157,322],{"class":287},[274,1159,738],{"class":287},[274,1161,1162,1164,1166],{"class":276,"line":570},[274,1163,910],{"class":291},[274,1165,322],{"class":287},[274,1167,916],{"class":915},[274,1169,1170],{"class":276,"line":575},[274,1171,1137],{"class":287},[274,1173,1175],{"class":276,"line":1174},15,[274,1176,281],{"emptyLinePlaceholder":280},[274,1178,1180],{"class":276,"line":1179},16,[274,1181,1182],{"class":1111},"    \u002F\u002F 관리자 페이지\n",[274,1184,1186,1188,1191,1193,1195],{"class":276,"line":1185},17,[274,1187,747],{"class":287},[274,1189,1190],{"class":291},"\u002Fadmin\u002F**",[274,1192,510],{"class":287},[274,1194,322],{"class":287},[274,1196,738],{"class":287},[274,1198,1200,1203,1205],{"class":276,"line":1199},18,[274,1201,1202],{"class":291},"      ssr",[274,1204,322],{"class":287},[274,1206,326],{"class":325},[274,1208,1210],{"class":276,"line":1209},19,[274,1211,771],{"class":287},[274,1213,1215],{"class":276,"line":1214},20,[274,1216,281],{"emptyLinePlaceholder":280},[274,1218,1220],{"class":276,"line":1219},21,[274,1221,780],{"class":287},[274,1223,1225],{"class":276,"line":1224},22,[274,1226,281],{"emptyLinePlaceholder":280},[274,1228,1230,1232],{"class":276,"line":1229},23,[274,1231,332],{"class":287},[274,1233,335],{"class":309},[196,1235,1236],{},"하나의 Nuxt 프로젝트 안에서:",[243,1238,1242],{"className":1239,"code":1240,"filename":1241,"language":249,"meta":250},[246],"\nBlog\n\n→ SSG\n\n\nProduct\n\n→ ISR\n\n\nAdmin\n\n→ CSR\n\n\nUser Profile\n\n→ SSR\n","Hybrid Rendering Strategy",[252,1243,1240],{"__ignoreMap":250},[196,1245,1246],{},"처럼 목적에 맞는 조합이 가능하다.",[230,1248],{},[191,1250,1252],{"id":1251},"_7-build와-generate의-관계","7. build와 generate의 관계",[196,1254,1255,1256,1259,1260,1262],{},"Nuxt에서 자주 혼동하는 부분은 ",[252,1257,1258],{},"build","와 ",[252,1261,650],{},"의 차이다.",[258,1264,1258],{"id":1258},[243,1266,1268],{"className":654,"code":1267,"filename":656,"language":657,"meta":250,"style":250},"\nnpx nuxi build\n",[252,1269,1270,1274],{"__ignoreMap":250},[274,1271,1272],{"class":276,"line":277},[274,1273,281],{"emptyLinePlaceholder":280},[274,1275,1276,1278,1280],{"class":276,"line":284},[274,1277,669],{"class":668},[274,1279,672],{"class":513},[274,1281,1282],{"class":513}," build\n",[196,1284,1285],{},"Nuxt 애플리케이션을 프로덕션 실행 형태로 빌드한다.",[196,1287,1288],{},"결과:",[243,1290,1294],{"className":1291,"code":1292,"filename":1293,"language":249,"meta":250},[246],"\n.output\u002F\n\n├── server\n├── public\n└── nitro\n","Build Output Structure",[252,1295,1292],{"__ignoreMap":250},[196,1297,1298],{},"Node 서버 또는 Serverless 환경에서 실행된다.",[196,1300,1301],{},"대표 방식:",[243,1303,1307],{"className":1304,"code":1305,"filename":1306,"language":249,"meta":250},[246],"\nSSR\n","Build Rendering Target",[252,1308,1305],{"__ignoreMap":250},[230,1310],{},[258,1312,650],{"id":650},[243,1314,1315],{"className":654,"code":655,"filename":656,"language":657,"meta":250,"style":250},[252,1316,1317,1321],{"__ignoreMap":250},[274,1318,1319],{"class":276,"line":277},[274,1320,281],{"emptyLinePlaceholder":280},[274,1322,1323,1325,1327],{"class":276,"line":284},[274,1324,669],{"class":668},[274,1326,672],{"class":513},[274,1328,675],{"class":513},[196,1330,1331],{},"정적 HTML 파일을 생성한다.",[196,1333,1288],{},[243,1335,1339],{"className":1336,"code":1337,"filename":1338,"language":249,"meta":250},[246],"\n.output\u002Fpublic\n\n├── index.html\n├── blog\u002Fpage.html\n└── assets\n","Generate Static Files",[252,1340,1337],{"__ignoreMap":250},[196,1342,1343],{},"CDN 기반 정적 배포에 적합하다.",[196,1345,1301],{},[243,1347,1351],{"className":1348,"code":1349,"filename":1350,"language":249,"meta":250},[246],"\nSSG\n","Generate Rendering Target",[252,1352,1349],{"__ignoreMap":250},[230,1354],{},[191,1356,1357],{"id":1357},"마무리",[196,1359,1360],{},"Nuxt는 단순히 SSR 프레임워크가 아니다.",[196,1362,1363],{},"하나의 프로젝트 안에서:",[208,1365,1366,1368,1370,1372],{},[211,1367,1015],{},[211,1369,1026],{},[211,1371,1037],{},[211,1373,1048],{},[196,1375,1376],{},"모든 렌더링 전략을 선택적으로 사용할 수 있는 하이브리드 프레임워크다.",[196,1378,1379],{},"중요한 것은 어떤 방식이 더 좋다는 것이 아니라,",[196,1381,1382],{},"페이지의 목적과 데이터 변경 주기에 맞는 렌더링 전략을 선택하는 것이다.",[1384,1385,1386],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":250,"searchDepth":284,"depth":284,"links":1388},[1389,1390,1391,1392,1397,1398,1399,1400,1401,1402,1403],{"id":260,"depth":284,"text":261},{"id":402,"depth":284,"text":403},{"id":454,"depth":284,"text":455},{"id":589,"depth":284,"text":590,"children":1393},[1394,1395,1396],{"id":594,"depth":302,"text":595},{"id":601,"depth":302,"text":602},{"id":608,"depth":302,"text":609},{"id":643,"depth":284,"text":644},{"id":693,"depth":284,"text":694},{"id":798,"depth":284,"text":799},{"id":840,"depth":284,"text":841},{"id":953,"depth":284,"text":954},{"id":1258,"depth":284,"text":1258},{"id":650,"depth":284,"text":650},"2026-07-21","Nuxt에서 지원하는 SSR, SSG, ISR 렌더링 방식의 차이와 각각의 사용 방법, 데이터 패칭 전략을 정리","md",null,{"tags":1409,"image":1411},[43,1026,1037,1048,1015,1410],"Rendering","images\u002Fnuxt-thumbnail.png",{"icon":26},{"title":1414,"description":1415},"Nuxt SSR, SSG, ISR 렌더링 방식과 구현 방법 정리","Nuxt 애플리케이션에서 서버 사이드 렌더링, 정적 사이트 생성, 증분 정적 생성을 사용하는 방법과 적절한 선택 기준을 설명합니다.","c6w3222KChey1YkEx3dOXtT2A7RdlmbTR5WVFTNuXNU",[1418,1420],{"title":61,"path":62,"stem":63,"description":1419,"icon":26,"children":-1},"Nuxt의 Auto-imports 시스템이 정적 분석을 통해 Composable과 Component를 연결하는 방식과 빌드 타임 처리 과정을 분석",{"title":75,"path":76,"stem":77,"description":1421,"icon":26,"children":-1},"Nuxt 애플리케이션의 서버 런타임을 담당하는 Nitro의 구조와 서버 라우팅, 배포 추상화, 런타임 동작 방식을 분석",1785297529765]