[{"data":1,"prerenderedAt":566},["ShallowReactive",2],{"navigation_docs":3,"-web-dev-browser-ssr-csr-ssg":352,"-web-dev-browser-ssr-csr-ssg-surround":561},[4,54,83,116,125,161,179,200],{"title":5,"path":6,"stem":7,"children":8},"Ai","/ai","ai",[9,12,42,46,50],{"title":10,"path":6,"stem":11},"AI 技術探索","ai/index",{"title":13,"path":14,"stem":15,"children":16,"page":41},"Rag","/ai/rag","ai/RAG",[17,21,25,29,33,37],{"title":18,"path":19,"stem":20},"BM25 演算法深入解析：從 TF-IDF 到現代搜尋引擎的核心技術","/ai/rag/bm25-deep-dive-from-tf-idf-to-rag","ai/RAG/bm25-deep-dive-from-tf-idf-to-rag",{"title":22,"path":23,"stem":24},"Dense Retrieval（向量檢索）深入解析","/ai/rag/dense-retrieval-deep-dive","ai/RAG/dense-retrieval-deep-dive",{"title":26,"path":27,"stem":28},"RAG（Retrieval-Augmented Generation）原理與實作入門","/ai/rag/rag-intro-principles-and-implementation","ai/RAG/rag-intro-principles-and-implementation",{"title":30,"path":31,"stem":32},"RAG Retrieval Strategy 深入解析","/ai/rag/rag-retrieval-strategy-deep-dive","ai/RAG/rag-retrieval-strategy-deep-dive",{"title":34,"path":35,"stem":36},"Reciprocal Rank Fusion（RRF）教學：打造更穩定的檢索融合策略","/ai/rag/rrf-reciprocal-rank-fusion-guide","ai/RAG/rrf-reciprocal-rank-fusion-guide",{"title":38,"path":39,"stem":40},"TF-IDF（Term Frequency–Inverse Document Frequency）深入解析","/ai/rag/tf-idf-deep-dive","ai/RAG/tf-idf-deep-dive",false,{"title":43,"path":44,"stem":45},"Docus AI 功能完整實作指南","/ai/docus-ai-implementation","ai/docus-ai-implementation",{"title":47,"path":48,"stem":49},"llms.txt 是什麼？在 Nuxt 中控制 AI 與搜尋引擎爬蟲的新方式","/ai/llms-txt","ai/llms-txt",{"title":51,"path":52,"stem":53},"MCP（Model Context Protocol）是什麼？用「AI 的 USB-C」理解模型如何安全連接工具與資料","/ai/mcp_concept","ai/mcp_concept",{"title":55,"path":56,"stem":57,"children":58,"page":41},"Data Analysis","/data-analysis","data-analysis",[59,63,67,71,75,79],{"title":60,"path":61,"stem":62},"Exploratory Data Analysis（EDA）資料探索分析入門","/data-analysis/exploratory-data-analysis-eda","data-analysis/exploratory-data-analysis-eda",{"title":64,"path":65,"stem":66},"PR-AUC 深入解析：不平衡分類問題的重要評估指標","/data-analysis/pr-auc-for-imbalanced-classification","data-analysis/pr-auc-for-imbalanced-classification",{"title":68,"path":69,"stem":70},"ROC-AUC 深入解析：理解分類模型的判斷能力","/data-analysis/roc-auc-complete-guide","data-analysis/roc-auc-complete-guide",{"title":72,"path":73,"stem":74},"SHAP（SHapley Additive exPlanations）模型解釋方法深入解析","/data-analysis/shap-model-interpretation-complete-guide","data-analysis/shap-model-interpretation-complete-guide",{"title":76,"path":77,"stem":78},"Social Network Analysis（SNA）深入解析","/data-analysis/social-network-analysis-sna","data-analysis/social-network-analysis-sna",{"title":80,"path":81,"stem":82},"Time-based Split：為什麼時間序列資料不能使用 Random Split？","/data-analysis/time-based-split-vs-random-split","data-analysis/time-based-split-vs-random-split",{"title":84,"path":85,"stem":86,"children":87,"page":41},"MachineLearning","/machine_learning","machine_learning",[88,92,96,100,104,108,112],{"title":89,"path":90,"stem":91},"Confusion Matrix（混淆矩陣）完整解析","/machine_learning/confusion-matrix","machine_learning/confusion-matrix",{"title":93,"path":94,"stem":95},"Decision Tree 模型完整教學：從原理到 Python 實作","/machine_learning/decision-tree-complete-guide","machine_learning/decision-tree-complete-guide",{"title":97,"path":98,"stem":99},"為什麼 Decision Tree 在 Tabular Data 上常常勝過 Deep Learning？","/machine_learning/decision-tree-vs-deep-learning-on-tabular-data","machine_learning/decision-tree-vs-deep-learning-on-tabular-data",{"title":101,"path":102,"stem":103},"LightGBM 模型入門：理解高效能的 Gradient Boosting 演算法","/machine_learning/lightgbm-intro-for-tabular-data","machine_learning/lightgbm-intro-for-tabular-data",{"title":105,"path":106,"stem":107},"Logistic Regression（Logit 回歸）完整教學","/machine_learning/logistic-regression-complete-guide","machine_learning/logistic-regression-complete-guide",{"title":109,"path":110,"stem":111},"為什麼模型訓練需要 Train / Validation / Test Dataset？","/machine_learning/train-validation-test-dataset","machine_learning/train-validation-test-dataset",{"title":113,"path":114,"stem":115},"XGBoost 原理與實務教學","/machine_learning/xgboost-complete-guide","machine_learning/xgboost-complete-guide",{"title":117,"path":118,"stem":119,"children":120,"page":41},"Network","/network","network",[121],{"title":122,"path":123,"stem":124},"DNS 設定入門：CNAME vs A Record 完整解析","/network/dns-cname-vs-a-record-guide","network/dns-cname-vs-a-record-guide",{"title":126,"path":127,"stem":128,"children":129},"Nuxt","/nuxt","nuxt",[130,133,137,141,145,149,153,157],{"title":131,"path":127,"stem":132},"Nuxt 實戰指南","nuxt/index",{"title":134,"path":135,"stem":136},"Abstraction Layer 與 Adapter 的差別，一次搞懂設計角色","/nuxt/adapter_abstraction_layer","nuxt/adapter_abstraction_layer",{"title":138,"path":139,"stem":140},"Nuxt 4 全面理解 — 專案檔案結構解析","/nuxt/directory_structure","nuxt/directory_structure",{"title":142,"path":143,"stem":144},"Nuxt 前端 build 流程完整解析","/nuxt/frontend_build","nuxt/frontend_build",{"title":146,"path":147,"stem":148},"Nitro 是什麼？從 Nuxt 專案到 Server 與 Edge 的關鍵引擎","/nuxt/nitro","nuxt/nitro",{"title":150,"path":151,"stem":152},"深入理解 Nuxt 的 .nuxt 與 .output：為什麼部署時一定要分清楚？","/nuxt/nuxt_and_output","nuxt/nuxt_and_output",{"title":154,"path":155,"stem":156},"Nuxt 中 dev、build、preview 的差異一次搞懂","/nuxt/nuxt_dev_build_preview","nuxt/nuxt_dev_build_preview",{"title":158,"path":159,"stem":160},"Nuxt Image vs \u003Cimg>：為什麼 Nuxt 3 專案幾乎都該用 \u003CNuxtImg>？","/nuxt/nuxt_image","nuxt/nuxt_image",{"title":162,"path":163,"stem":164,"children":165},"Python 程式開發","/python","python/index",[166,167,171,175],{"title":162,"path":163,"stem":164},{"title":168,"path":169,"stem":170},"如何在 FastAPI 中調用記憶體 Buffer 回傳圖片 (附實例)","/python/memory_buffer","python/memory_buffer",{"title":172,"path":173,"stem":174},"Python 單元測試教學：如何為你的程式撰寫 Test","/python/python-unit-testing-unittest-pytest","python/python-unit-testing-unittest-pytest",{"title":176,"path":177,"stem":178},"如何使用 uv 取代 pip：改善 Python 專案的開發流程","/python/uv","python/uv",{"title":180,"path":181,"stem":182,"children":183,"page":41},"Statistic","/statistic","statistic",[184,188,192,196],{"title":185,"path":186,"stem":187},"卡方檢定（Chi-Square Test）入門教學","/statistic/chi-square-test-intro","statistic/chi-square-test-intro",{"title":189,"path":190,"stem":191},"常見抽樣方法（Sampling Methods）教學：Stratified、Quota、Convenience、Systematic、Simple Random","/statistic/common-sampling-methods-guide","statistic/common-sampling-methods-guide",{"title":193,"path":194,"stem":195},"Cramér’s V 指標介紹：如何衡量兩個類別變數之間的關聯","/statistic/cramers-v-for-categorical-association","statistic/cramers-v-for-categorical-association",{"title":197,"path":198,"stem":199},"Mann–Whitney U 與 Kolmogorov–Smirnov（KS）檢定：非參數統計檢定的入門指南","/statistic/mann-whitney-u-and-ks-test-intro","statistic/mann-whitney-u-and-ks-test-intro",{"title":201,"path":202,"stem":203,"children":204},"WebDev","/web_dev","web_dev",[205,208,234,248,282,312,334],{"title":206,"path":202,"stem":207},"Web 前端開發","web_dev/index",{"title":209,"path":210,"stem":211,"children":212},"瀏覽器與渲染","/web_dev/browser","web_dev/browser/index",[213,214,218,222,226,230],{"title":209,"path":210,"stem":211},{"title":215,"path":216,"stem":217},"瀏覽器儲存空間完整解析：Cookie、localStorage、IndexedDB 到 Cache Storage","/web_dev/browser/browser-storage-comprehensive-guide","web_dev/browser/browser-storage-comprehensive-guide",{"title":219,"path":220,"stem":221},"DOM (Document Object Model) 深入解析","/web_dev/browser/dom","web_dev/browser/dom",{"title":223,"path":224,"stem":225},"Service Worker Request Flow 深入解析","/web_dev/browser/service-worker-request-flow","web_dev/browser/service-worker-request-flow",{"title":227,"path":228,"stem":229},"CSR、SSR 與 SSG 是什麼？前端渲染策略完整比較","/web_dev/browser/ssr_csr_ssg","web_dev/browser/ssr_csr_ssg",{"title":231,"path":232,"stem":233},"Virtual DOM 深入解析：為什麼它能優化前端效能？","/web_dev/browser/virtual_dom","web_dev/browser/virtual_dom",{"title":235,"path":236,"stem":237,"children":238},"圖形技術","/web_dev/graphics","web_dev/graphics/index",[239,240,244],{"title":235,"path":236,"stem":237},{"title":241,"path":242,"stem":243},"為什麼 Three.js 專案幾乎都選擇 CSR？從 SSR 問題談起","/web_dev/graphics/threejs_csr","web_dev/graphics/threejs_csr",{"title":245,"path":246,"stem":247},"WebGL 是什麼？為什麼前端 3D 幾乎都靠它？","/web_dev/graphics/webgl","web_dev/graphics/webGL",{"title":249,"path":250,"stem":251,"children":252},"架構與配置","/web_dev/infrastructure","web_dev/infrastructure/index",[253,254,258,262,266,270,274,278],{"title":249,"path":250,"stem":251},{"title":255,"path":256,"stem":257},"Zeabur + K3s + Nuxt 部署架構完整解析","/web_dev/infrastructure/k3s-zeabur","web_dev/infrastructure/K3s-zeabur",{"title":259,"path":260,"stem":261},"ECS vs Docker vs Kubernetes：從部署堆疊理解三層架構","/web_dev/infrastructure/ecs-docker-kubernetes-stack","web_dev/infrastructure/ecs-docker-kubernetes-stack",{"title":263,"path":264,"stem":265},"ECS vs VPS 是什麼？從部署網站的角度一次搞懂差別","/web_dev/infrastructure/ecs-vs-vps","web_dev/infrastructure/ecs-vs-vps",{"title":267,"path":268,"stem":269},"Zeabur 內網服務連線完整入門指南","/web_dev/infrastructure/k3s-internal-networking","web_dev/infrastructure/k3s-internal-networking",{"title":271,"path":272,"stem":273},"使用 Microservices 架構設計系統的優勢解析","/web_dev/infrastructure/microservices-architecture-advantages","web_dev/infrastructure/microservices-architecture-advantages",{"title":275,"path":276,"stem":277},"Nginx 入門教學：從反向代理到與 Kubernetes 的架構比較","/web_dev/infrastructure/nginx-intro","web_dev/infrastructure/nginx-intro",{"title":279,"path":280,"stem":281},"YAML 配置是什麼？為什麼現代開發都在用它","/web_dev/infrastructure/yaml-configuration","web_dev/infrastructure/yaml-configuration",{"title":283,"path":284,"stem":285,"children":286},"網絡與通訊","/web_dev/network","web_dev/network/index",[287,288,292,296,300,304,308],{"title":283,"path":284,"stem":285},{"title":289,"path":290,"stem":291},"HTTP Request 結構完整解析：從 Request Line 到 Header 一次看懂","/web_dev/network/http-request-structure","web_dev/network/http-request-structure",{"title":293,"path":294,"stem":295},"OSI 模型（Open Systems Interconnection Model）完整解析","/web_dev/network/osi-model","web_dev/network/osi-model",{"title":297,"path":298,"stem":299},"RESTful API 設計原則與實務解析","/web_dev/network/restful-api","web_dev/network/restful-api",{"title":301,"path":302,"stem":303},"RESTful API 五大設計原則深入解析","/web_dev/network/restful-api-principles","web_dev/network/restful-api-principles",{"title":305,"path":306,"stem":307},"Server-Sent Events (SSE) 深入解析與實作教學","/web_dev/network/sse-introduction","web_dev/network/sse-introduction",{"title":309,"path":310,"stem":311},"WebSocket 入門教學：從概念到 Node.js 實作","/web_dev/network/websocket-introduction","web_dev/network/websocket-introduction",{"title":313,"path":314,"stem":315,"children":316},"認證與安全","/web_dev/security","web_dev/security/index",[317,318,322,326,330],{"title":313,"path":314,"stem":315},{"title":319,"path":320,"stem":321},"使用 Cookie 與 Session 建立使用者驗證（完整新手教學）","/web_dev/security/cookie-session-authentication","web_dev/security/cookie-session-authentication",{"title":323,"path":324,"stem":325},"JWT 驗證機制完整解析：從登入流程到實務應用","/web_dev/security/jwt-authentication","web_dev/security/jwt-authentication",{"title":327,"path":328,"stem":329},"Secret Key 簽名是什麼？從零理解資料簽名的本質","/web_dev/security/secret-key-signing","web_dev/security/secret-key-signing",{"title":331,"path":332,"stem":333},"SSH（Secure Shell）是什麼？從遠端登入到安全通道的核心概念","/web_dev/security/ssh","web_dev/security/ssh",{"title":335,"path":336,"stem":337,"children":338},"SEO 與規範","/web_dev/seo","web_dev/seo/index",[339,340,344,348],{"title":335,"path":336,"stem":337},{"title":341,"path":342,"stem":343},"Canonical URL 是什麼？用生活化方式搞懂前端 SEO 的基本保命符","/web_dev/seo/canonical_link","web_dev/seo/canonical_link",{"title":345,"path":346,"stem":347},"robots.txt 是什麼？SEO 的第一道守門員","/web_dev/seo/robot_txt","web_dev/seo/robot_txt",{"title":349,"path":350,"stem":351},"Nuxt SEO 中的 Meta 與 SEO 工具是如何運作的？","/web_dev/seo/seo","web_dev/seo/seo",{"id":353,"title":227,"body":354,"description":547,"extension":548,"links":549,"meta":550,"navigation":558,"path":228,"seo":559,"stem":229,"__hash__":560},"docs/web_dev/browser/ssr_csr_ssg.md",{"type":355,"value":356,"toc":537},"minimark",[357,366,369,372,377,384,392,395,402,410,414,420,423,430,433,438,440,444,447,454,457,460,465,467,470,473,488,491,493,497,517,520,523,525,528,534],[358,359,360,361,365],"p",{},"在現代前端開發中，「畫面是怎麼被產生的？」其實是一個非常核心、卻又容易被忽略的問題。當我們談到 CSR、SSR 與 SSG，本質上就是在討論：",[362,363,364],"strong",{},"HTML 是在什麼時間點、什麼地方被產生的","。理解這三種渲染策略，會直接影響你對效能、SEO、部署方式，甚至是框架設計（像 Nuxt 為什麼要區分 client / server）的理解。",[358,367,368],{},"這篇文章會從「新手能直覺理解」的角度出發，一步步比較 CSR、SSR 與 SSG 的運作流程與適合情境。",[370,371],"hr",{},[373,374,376],"h2",{"id":375},"什麼是-csrclient-side-rendering","什麼是 CSR（Client-Side Rendering）？",[358,378,379,380,383],{},"CSR，全名是 Client-Side Rendering，中文通常翻成「客戶端渲染」。這種模式下，",[362,381,382],{},"HTML 幾乎是空的殼，真正的畫面是由瀏覽器下載 JavaScript 後才組裝出來的","。",[358,385,386,387,391],{},"當使用者打開一個 CSR 網站時，伺服器回傳的 HTML 通常只包含一個 root 節點，例如 ",[388,389,390],"code",{},"\u003Cdiv id=\"app\">\u003C/div>","。接著瀏覽器會下載 JavaScript bundle，執行程式碼、建立 DOM、抓取 API 資料，最後才把完整畫面渲染出來。",[358,393,394],{},"這也是早期 SPA（Single Page Application）最典型的模式，例如使用 Vue CLI、Vite + Vue 建立的純前端專案。",[358,396,397,398,401],{},"CSR 的好處在於前後端分離明確，開發體驗單純，部署也非常容易，只要能放靜態檔案即可。但缺點同樣明顯：",[362,399,400],{},"初次載入時間較長，搜尋引擎在沒有執行 JavaScript 的情況下，幾乎看不到內容","，因此對 SEO 並不友善。",[373,403,405],{"id":404},"",[406,407],"img",{"alt":408,"src":409},"Image","https://m2z7h8d7.delivery.rocketcdn.me/wp-content/uploads/2023/06/ClientSideRender.jpg%E6%8B%B7%E8%B2%9D.png.webp",[373,411,413],{"id":412},"什麼是-ssrserver-side-rendering","什麼是 SSR（Server-Side Rendering）？",[358,415,416,417,383],{},"SSR，全名是 Server-Side Rendering，也就是「伺服器端渲染」。與 CSR 最大的差別在於：",[362,418,419],{},"HTML 是在伺服器上先產生好，再送到瀏覽器的",[358,421,422],{},"在 SSR 模式下，當使用者請求一個頁面時，伺服器會先執行 JavaScript（例如 Nuxt 的 server renderer），把 Vue 元件轉換成一份「已經有內容的 HTML」。瀏覽器拿到這份 HTML 後，可以立刻顯示畫面，接著再下載 JavaScript 進行 hydration，讓頁面變成可互動的狀態。",[358,424,425,426,429],{},"這種方式最大的優點是：",[362,427,428],{},"首屏顯示速度快，而且搜尋引擎一開始就能讀到完整內容","。因此，對於重視 SEO 的內容型網站、電商首頁或行銷頁面，SSR 是非常常見的選擇。",[358,431,432],{},"不過，SSR 的成本也比較高。你需要一個能即時執行 JavaScript 的伺服器環境，每一次請求都可能觸發一次渲染，對效能與架構設計的要求都比 CSR 高得多。",[358,434,435],{},[406,436],{"alt":408,"src":437},"https://m2z7h8d7.delivery.rocketcdn.me/wp-content/uploads/2023/06/ServerSideRender.jpg%E6%8B%B7%E8%B2%9D.png.webp",[370,439],{},[373,441,443],{"id":442},"什麼是-ssgstatic-site-generation","什麼是 SSG（Static Site Generation）？",[358,445,446],{},"SSG，全名是 Static Site Generation，中文常稱為「靜態網站產生」。它可以被視為 SSR 的「預先計算版」。",[358,448,449,450,453],{},"在 SSG 中，",[362,451,452],{},"HTML 不是在使用者請求時才產生，而是在 build 階段就全部產生完成","。也就是說，專案在部署之前，框架（例如 Nuxt、VitePress）會先把所有頁面轉成完整的 HTML 檔案，之後只要直接提供這些靜態檔案給使用者即可。",[358,455,456],{},"這讓 SSG 兼具 SEO 與效能優勢：HTML 一打開就有內容，而且因為只是靜態檔案，不需要伺服器運算，載入速度非常快，也非常穩定。這正是為什麼技術文件、教學部落格、官方文件網站，幾乎都偏好 SSG 的原因。",[358,458,459],{},"但 SSG 也有其限制。由於內容是在 build 時就固定，如果資料需要頻繁即時更新，或是頁面數量龐大且高度動態，SSG 的 build 成本與更新流程就會變得較不彈性。",[358,461,462],{},[406,463],{"alt":408,"src":464},"https://www.ionos.co.uk/digitalguide/fileadmin/_processed_/9/9/csm_Static-site-generation-diagram_9412b039b9.webp",[370,466],{},[373,468,469],{"id":469},"三種渲染方式的核心差異整理",[358,471,472],{},"如果用一句話來總結三者的差異，可以這樣記：",[358,474,475,476,479,480,483,484,487],{},"CSR 是「",[362,477,478],{},"瀏覽器自己畫畫面","」，\nSSR 是「",[362,481,482],{},"伺服器即時幫你畫好再送來","」，\nSSG 是「",[362,485,486],{},"先畫好、存起來，需要時直接拿","」。",[358,489,490],{},"從時間點來看，CSR 的 HTML 產生在使用者端、請求之後；SSR 的 HTML 產生在伺服器端、請求當下；SSG 則是在部署前就已經完成。",[370,492],{},[373,494,496],{"id":495},"在-nuxt-中為什麼要懂-csrssrssg","在 Nuxt 中為什麼要懂 CSR、SSR、SSG？",[358,498,499,500,503,504,503,507,503,510,513,514,383],{},"你之所以會在 Nuxt 裡看到 ",[388,501,502],{},"process.client","、",[388,505,506],{},"process.server",[388,508,509],{},"ssr: false",[388,511,512],{},"nuxi generate"," 這些設定，本質上都是因為 ",[362,515,516],{},"Nuxt 同時支援這三種渲染策略",[358,518,519],{},"當你使用 Three.js、Canvas、Web Audio 這類「只存在於瀏覽器的 API」時，就會發現它們在 SSR 階段根本不存在，這也是為什麼很多互動式專案最後會選擇純 CSR 或 client-only 的原因。",[358,521,522],{},"反過來說，如果你正在做教學文章、部落格或文件網站，SSG 幾乎就是最佳解；而如果你需要動態資料但又不想犧牲 SEO，那 SSR 就會成為折衷但強大的方案。",[370,524],{},[373,526,527],{"id":527},"結語",[358,529,530,531,383],{},"CSR、SSR 與 SSG 並沒有誰「比較先進」，它們只是為了解決不同問題而存在的工具。真正重要的不是記住名詞，而是理解：",[362,532,533],{},"你的 HTML 是在什麼時候、什麼地方產生的，以及這對使用者與搜尋引擎意味著什麼",[358,535,536],{},"一旦你掌握了這個核心概念，無論是在 Nuxt、Vue、React 或任何現代前端框架中，渲染策略的選擇都會變得非常清楚。",{"title":404,"searchDepth":538,"depth":538,"links":539},2,[540,541,542,543,544,545,546],{"id":375,"depth":538,"text":376},{"id":404,"depth":538,"text":404},{"id":412,"depth":538,"text":413},{"id":442,"depth":538,"text":443},{"id":469,"depth":538,"text":469},{"id":495,"depth":538,"text":496},{"id":527,"depth":538,"text":527},"一次搞懂 CSR、SSR、SSG 的差異、運作流程與適用情境，幫助你在 Nuxt、Vue 或現代前端專案中選擇最合適的渲染策略。","md",null,{"tags":551,"category":203,"date":557},[552,553,554,555,128,556],"csr","ssr","ssg","frontend","rendering","2026-02-03",true,{"title":227,"description":547},"iHXLU8xNlpCZCvVOPX7DhUHpRv04MQiMtZrc2hboLYc",[562,564],{"title":223,"path":224,"stem":225,"description":563,"children":-1},"從請求流程圖到實戰策略，完整理解 Service Worker 如何攔截請求、操作快取並打造離線優先的 PWA 體驗。",{"title":231,"path":232,"stem":233,"description":565,"children":-1},"探討 Virtual DOM 的基本概念、運作機制（Diffing），以及它與真實 DOM 的差異，幫助你理解現代前端框架如何提升開發效率與效能。",1776690845645]