[{"data":1,"prerenderedAt":505},["ShallowReactive",2],{"navigation_docs_ko":3,"-ko-note-web-rendering-modes":195,"-ko-note-web-rendering-modes-surround":500},[4,124,181],{"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,114],{"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},"SEO","icon-park-solid:seo","\u002Fko\u002Fnote\u002Fseo","ko\u002F1.note\u002F6.seo",[120],{"title":121,"path":122,"stem":123,"icon":26},"[SEO] 개발 블로그 검색 노출을 위한 robots.txt와 SEO 설정 가이드","\u002Fko\u002Fnote\u002Fseo\u002Fseo","ko\u002F1.note\u002F6.seo\u002F1.seo",{"title":125,"icon":126,"path":127,"stem":128,"children":129,"page":27},"Project (개발일지)","icon-park-solid:branch-two","\u002Fko\u002Fproject","ko\u002F2.project",[130],{"title":131,"icon":132,"path":133,"stem":134,"children":135,"page":27},"Brolog","custom:symbol","\u002Fko\u002Fproject\u002Fbrolog","ko\u002F2.project\u002F1.brolog",[136,140,144,148,152,156,160,164,168,173,177],{"title":137,"path":138,"stem":139,"icon":26},"Brolog 프로젝트 개요","\u002Fko\u002Fproject\u002Fbrolog\u002Foutline","ko\u002F2.project\u002F1.brolog\u002F1.outline",{"title":141,"path":142,"stem":143,"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":145,"path":146,"stem":147,"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":149,"path":150,"stem":151,"icon":26},"[Brolog] 검색 엔진 노출을 위한 SEO 적용 과정","\u002Fko\u002Fproject\u002Fbrolog\u002Fbrolog-seo","ko\u002F2.project\u002F1.brolog\u002F12.brolog-seo",{"title":153,"path":154,"stem":155,"icon":26},"Brolog 프로젝트 구조","\u002Fko\u002Fproject\u002Fbrolog\u002Fstructure","ko\u002F2.project\u002F1.brolog\u002F2.structure",{"title":157,"path":158,"stem":159,"icon":26},"[Nuxt Content] 네비게이션 아이콘 커스텀 빌드","\u002Fko\u002Fproject\u002Fbrolog\u002Fcustom-icon","ko\u002F2.project\u002F1.brolog\u002F3.custom-icon",{"title":161,"path":162,"stem":163,"icon":26},"[Nuxt 4] Auto-imports 동작 원리와 자동 import 시스템 이해","\u002Fko\u002Fproject\u002Fbrolog\u002Fnuxt-auto-import","ko\u002F2.project\u002F1.brolog\u002F4.nuxt-auto-import",{"title":165,"path":166,"stem":167,"icon":26},"[Brolog] 개발 블로그 메인 페이지 구현","\u002Fko\u002Fproject\u002Fbrolog\u002Fdevelop-main","ko\u002F2.project\u002F1.brolog\u002F5.develop-main",{"title":169,"path":170,"stem":171,"icon":172},"[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":174,"path":175,"stem":176,"icon":26},"[Brolog] Nuxt Multi Layer 프로젝트 Vercel 배포 (1)","\u002Fko\u002Fproject\u002Fbrolog\u002Fvercel-deploy1","ko\u002F2.project\u002F1.brolog\u002F8.vercel-deploy1",{"title":178,"path":179,"stem":180,"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":182,"icon":183,"path":184,"stem":185,"children":186,"page":27},"Error (트러블슈팅)","emojione:stop-sign","\u002Fko\u002Ftrouble-shooting","ko\u002F3.trouble-shooting",[187],{"title":131,"icon":132,"path":188,"stem":189,"children":190,"page":27},"\u002Fko\u002Ftrouble-shooting\u002Fbrolog","ko\u002F3.trouble-shooting\u002F1.brolog",[191],{"title":192,"path":193,"stem":194,"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":196,"title":111,"body":197,"date":486,"description":487,"extension":488,"links":489,"meta":490,"navigation":495,"path":112,"seo":496,"stem":113,"__hash__":499},"docs_ko\u002Fko\u002F1.note\u002F4.web\u002F2.rendering-modes.md",{"type":198,"value":199,"toc":473},"minimark",[200],[201,202,204,209,214,242,246,263,267,284,288,305,309,431,435],"u-page-card",{":spotlight":203},"true",[205,206,208],"h2",{"id":207},"_1-렌더링-모드별-핵심-매커니즘","🔍 1. 렌더링 모드별 핵심 매커니즘",[210,211,213],"h3",{"id":212},"csr-client-side-rendering","CSR (Client-Side Rendering)",[215,216,217,230,236],"ul",{},[218,219,220,224,225,229],"li",{},[221,222,223],"strong",{},"구동 원리:"," 서버는 데이터가 없는 텅 빈 ",[226,227,228],"code",{},"\u003Cbody>"," 태그와 자바스크립트(JS) 번들 파일 링크만 포함된 최소한의 HTML을 클라이언트에 내려준다. 브라우저가 이 JS 파일을 다운로드하고 실행하는 시점에 API 요청을 보내 데이터를 받아오고 화면을 동적으로 그려낸다.",[218,231,232,235],{},[221,233,234],{},"장점:"," 첫 로딩 이후 페이지 이동 시 서버에 새 HTML을 요청하지 않고 필요한 데이터만 바꾸므로 앱처럼 매끄러운 사용자 경험(UX)을 제공한다. 서버 연산 부담이 가장 적다.",[218,237,238,241],{},[221,239,240],{},"단점:"," 대용량 JS 파일을 모두 다운로드할 때까지 사용자는 흰 화면(Blank Page)을 보게 된다. HTML 뼈대가 비어있어 검색 엔진 봇이 콘텐츠를 긁어가지 못하므로 SEO(검색 엔진 최적화)에 매우 불리하다.",[210,243,245],{"id":244},"ssr-server-side-rendering","SSR (Server-Side Rendering)",[215,247,248,253,258],{},[218,249,250,252],{},[221,251,223],{}," 사용자가 특정 URL에 접속할 때마다 서버(Node.js 등)가 동적으로 데이터베이스나 API 서버에서 데이터를 긁어온다. 그 후 서버 메모리 상에서 HTML 뼈대에 데이터를 결합하여 완벽히 완성된 HTML 스트림을 빌드한 뒤 브라우저에 던져준다.",[218,254,255,257],{},[221,256,234],{}," 브라우저가 HTML을 받자마자 화면을 바로 그릴 수 있어 초기 콘텐츠 표시 속도(FCP)가 매우 빠르다. 완성된 HTML을 제공하므로 크롤러 로봇이 페이지를 완벽하게 인식하여 SEO에 최적화된다.",[218,259,260,262],{},[221,261,240],{}," 사용자가 페이지를 이동하거나 새로고침할 때마다 서버가 매번 실시간으로 화면을 새로 연산해서 빌드하므로, 트래픽이 몰리면 서버 부하가 급격히 증가하고 인프라 유지 비용이 커진다.",[210,264,266],{"id":265},"ssg-static-site-generation","SSG (Static Site Generation)",[215,268,269,274,279],{},[218,270,271,273],{},[221,272,223],{}," 사용자의 요청 시점이 아니라, 개발자가 코드를 빌드하고 배포하는 시점(Build Time)에 가용한 모든 페이지의 HTML을 미리 정적으로 구워둔다. 배포가 완료되면 서버는 이미 만들어진 HTML static 파일들을 CDN을 통해 유저에게 배달만 한다.",[218,275,276,278],{},[221,277,234],{}," 서버가 실시간으로 화면을 연산할 필요가 전혀 없으므로 보안성이 극도로 높고 속도가 압도적으로 빠르다. AWS S3나 Netlify, Vercel 같은 정적 호스팅 환경이나 CDN 캐싱을 적극 활용할 수 있어 인프라 비용이 거의 제로에 가깝다.",[218,280,281,283],{},[221,282,240],{}," 데이터가 변경되면 정적 파일들을 다시 만들기 위해 전체 프로젝트를 '다시 빌드하고 배포'해야 한다. 수만 개의 상품 페이지가 있는 커머스처럼 페이지 수가 너무 많으면 빌드하는 데 수 시간이 걸려 실시간 데이터 반영이 불가능하다.",[210,285,287],{"id":286},"isr-incremental-static-regeneration","ISR (Incremental Static Regeneration)",[215,289,290,295,300],{},[218,291,292,294],{},[221,293,223],{}," SSG의 치명적인 한계(실시간성 부족)를 극복하기 위해 등장한 하이브리드 방식이다. 전체 페이지를 빌드 시점에 미리 만들어두는 것은 SSG와 같지만, 각 페이지마다 유효 기간(예: 60초)을 설정한다. 유효 기간이 지난 후 유저가 방문하면 서버가 백그라운드에서 해당 페이지를 딱 한 번만 새로 빌드하여 정적 파일을 조용히 업데이트한다.",[218,296,297,299],{},[221,298,234],{}," SSG의 압도적인 속도와 비용 절감 장점을 그대로 누리면서, 주기적으로 데이터가 자동으로 최신화되므로 대규모 블로그나 트래픽이 높은 뉴스 사이, 상품 목록 페이지에 이상적이다.",[218,301,302,304],{},[221,303,240],{}," 첫 번째 유효 기간 만료 직후 방문한 사용자는 백그라운드에서 빌드가 도는 동안 '이전 버전(Stale)의 정적 화면'을 보게 되는 데이터 시차가 발생할 수 있다.",[205,306,308],{"id":307},"_2-아키텍처-지표별-비교-매트릭스","📊 2. 아키텍처 지표별 비교 매트릭스",[310,311,312,335],"table",{},[313,314,315],"thead",{},[316,317,318,323,326,329,332],"tr",{},[319,320,322],"th",{"align":321},"left","비교 지표",[319,324,325],{"align":321},"CSR",[319,327,328],{"align":321},"SSR",[319,330,331],{"align":321},"SSG",[319,333,334],{"align":321},"ISR",[336,337,338,358,376,393,412],"tbody",{},[316,339,340,346,349,352,355],{},[341,342,343],"td",{"align":321},[221,344,345],{},"HTML 생성 시점",[341,347,348],{"align":321},"브라우저 런타임 (실시간)",[341,350,351],{"align":321},"사용자 요청 시점 (On-Demand)",[341,353,354],{"align":321},"프로젝트 빌드 타임 (사전 생성)",[341,356,357],{"align":321},"빌드 타임 + 주기적 백그라운드 생성",[316,359,360,365,368,371,374],{},[341,361,362],{"align":321},[221,363,364],{},"초기 로딩 속도 (FCP)",[341,366,367],{"align":321},"느림 (JS 로딩 대기)",[341,369,370],{"align":321},"빠름",[341,372,373],{"align":321},"매우 빠름",[341,375,373],{"align":321},[316,377,378,383,386,389,391],{},[341,379,380],{"align":321},[221,381,382],{},"SEO 최적화 수준",[341,384,385],{"align":321},"낮음 (자동 크롤링 제한)",[341,387,388],{"align":321},"매우 높음",[341,390,388],{"align":321},[341,392,388],{"align":321},[316,394,395,400,403,406,409],{},[341,396,397],{"align":321},[221,398,399],{},"실시간 데이터 동기화",[341,401,402],{"align":321},"완벽함 (클라이언트 통신)",[341,404,405],{"align":321},"완벽함 (요청 시점 반영)",[341,407,408],{"align":321},"불가능 (재배포 필요)",[341,410,411],{"align":321},"우수함 (지정 주기 준수)",[316,413,414,419,422,425,428],{},[341,415,416],{"align":321},[221,417,418],{},"인프라 비용 및 부하",[341,420,421],{"align":321},"매우 낮음",[341,423,424],{"align":321},"매우 높음 (컴퓨팅 지속)",[341,426,427],{"align":321},"가장 낮음 (CDN 호스팅)",[341,429,430],{"align":321},"낮음 (간헐적 백그라운드 연산)",[205,432,434],{"id":433},"_3-비즈니스-시나리오별-최적의-선택-가이드","💡 3. 비즈니스 시나리오별 최적의 선택 가이드",[215,436,437,446,455,464],{},[218,438,439,442,443,445],{},[221,440,441],{},"대시보드 \u002F 사내 관리자 페이지 (Admin):"," 외부 검색 엔진에 노출될 필요가 전혀 없고, 사용자와의 잦은 인터랙션 및 실시간 데이터 차트 반영이 핵심이므로 ",[221,444,325],{},"이 가장 적합하다.",[218,447,448,451,452,454],{},[221,449,450],{},"커뮤니티 \u002F 마이페이지 \u002F 실시간 금융 정보:"," 사용자 로그인 상태에 따라 화면이 매번 다르게 바뀌어야 하고, 공유 링크나 보안, 실시간성이 생명인 영역은 ",[221,453,328],{},"이 강제된다.",[218,456,457,460,461,463],{},[221,458,459],{},"공식 가이드 문서 \u002F 기업 소개 \u002F 블로그:"," 데이터가 한 달에 몇 번 바뀔까 말까 하며, 전 세계 유저에게 초고속으로 문서를 뿌려야 하고 SEO가 최우선인 기술 위키나 도큐먼트 사이트는 ",[221,462,331],{},"가 절대적인 정답이다.",[218,465,466,469,470,472],{},[221,467,468],{},"대규모 커머스 상품 카탈로그 \u002F 실시간 뉴스 매체:"," 수천 수만 개의 정적 페이지 속도를 유지하면서 한 시간 혹은 하루 단위로 가격 정보나 기사를 업데이트해야 할 때는 ",[221,471,334],{}," 아키텍처를 도입하는 것이 최선이다.",{"title":474,"searchDepth":475,"depth":475,"links":476},"",2,[477,484,485],{"id":207,"depth":475,"text":208,"children":478},[479,481,482,483],{"id":212,"depth":480,"text":213},3,{"id":244,"depth":480,"text":245},{"id":265,"depth":480,"text":266},{"id":286,"depth":480,"text":287},{"id":307,"depth":475,"text":308},{"id":433,"depth":475,"text":434},"2026-07-07","SSR, CSR, SSG, ISR 등 현대 웹 애플리케이션의 주요 렌더링 방식의 동작 원리와 특징, 상황별 선택 기준 정리","md",null,{"tags":491},[492,493,328,325,331,334,494],"Rendering","Frontend","WebDev",{"icon":26},{"title":497,"description":498},"SSR CSR SSG ISR 차이점과 웹 렌더링 방식 이해","SSR, CSR, SSG, ISR의 동작 원리와 장단점을 비교하고 웹 애플리케이션에서 적절한 렌더링 방식을 선택하는 기준을 설명합니다.","mnW-LacOSOaYAJpTuF3N6-ZvwabBKAFFcjVPIcsS_BM",[501,503],{"title":101,"path":102,"stem":103,"description":502,"icon":26,"children":-1},"npm, yarn, pnpm의 Lock 파일이 생성되는 이유와 재현 가능한 의존성 관리 메커니즘 분석",{"title":121,"path":122,"stem":123,"description":504,"icon":26,"children":-1},"개인 개발 블로그를 검색 엔진에 정상적으로 노출하기 위해 필요한 robots.txt, sitemap.xml, canonical URL, Google Search Console, RSS 설정과 검색 최적화 방법을 정리합니다.",1785305905081]