1:"$Sreact.fragment" 2:I[56271,["2545","static/chunks/c16f53c3-391a1f5a73546b11.js","2619","static/chunks/2619-eccd988d1e161df3.js","3353","static/chunks/3353-35c19838f8cf7b3b.js","7177","static/chunks/app/layout-cb4429a7e3e88a9f.js"],"ThemeProviders"] 3:I[41402,["2545","static/chunks/c16f53c3-391a1f5a73546b11.js","2619","static/chunks/2619-eccd988d1e161df3.js","3353","static/chunks/3353-35c19838f8cf7b3b.js","7177","static/chunks/app/layout-cb4429a7e3e88a9f.js"],""] 4:I[91367,["2545","static/chunks/c16f53c3-391a1f5a73546b11.js","2619","static/chunks/2619-eccd988d1e161df3.js","3353","static/chunks/3353-35c19838f8cf7b3b.js","7177","static/chunks/app/layout-cb4429a7e3e88a9f.js"],"KBarSearchProvider"] 5:I[52619,["2619","static/chunks/2619-eccd988d1e161df3.js","1356","static/chunks/1356-354ecf51aaaf5203.js","6909","static/chunks/app/blog/%5B...slug%5D/page-d416e20a09ba8ecb.js"],""] 6:I[51350,["2545","static/chunks/c16f53c3-391a1f5a73546b11.js","2619","static/chunks/2619-eccd988d1e161df3.js","3353","static/chunks/3353-35c19838f8cf7b3b.js","7177","static/chunks/app/layout-cb4429a7e3e88a9f.js"],"KBarButton"] 10:I[57150,[],""] :HL["/_next/static/css/29ff447a95e95257.css","style"] :HL["/_next/static/css/77af622156c5e021.css","style"] :HL["/_next/static/css/ddf3d904beac0ed7.css","style"] 0:{"P":null,"b":"FUTryh0Sm2lrVLTvF5oMH","p":"","c":["","blog","nextjs-performance"],"i":false,"f":[[["",{"children":["blog",{"children":[["slug","nextjs-performance","c"],{"children":["__PAGE__",{}]}]}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/29ff447a95e95257.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/css/77af622156c5e021.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"zh-cn","className":"scroll-smooth","suppressHydrationWarning":true,"children":[["$","link",null,{"rel":"apple-touch-icon","sizes":"76x76","href":"/static/favicons/apple-touch-icon.png"}],["$","link",null,{"rel":"icon","type":"image/png","sizes":"32x32","href":"/static/favicons/favicon-32x32.png"}],["$","link",null,{"rel":"icon","type":"image/png","sizes":"16x16","href":"/static/favicons/favicon-16x16.png"}],["$","link",null,{"rel":"manifest","href":"/static/favicons/site.webmanifest"}],["$","link",null,{"rel":"mask-icon","href":"/static/favicons/safari-pinned-tab.svg","color":"#5bbad5"}],["$","meta",null,{"name":"msapplication-TileColor","content":"#4f46e5"}],["$","meta",null,{"name":"theme-color","media":"(prefers-color-scheme: light)","content":"#ffffff"}],["$","meta",null,{"name":"theme-color","media":"(prefers-color-scheme: dark)","content":"#0f172a"}],["$","link",null,{"rel":"alternate","type":"application/rss+xml","href":"/feed.xml"}],["$","body",null,{"className":"bg-white pl-[calc(100vw-100%)] text-black antialiased dark:bg-gray-950 dark:text-white","children":["$","$L2",null,{"children":[["$undefined","$undefined","$undefined",["$","$L3",null,{"async":true,"defer":true,"src":"https://analytics.umami.is/script.js"}],"$undefined","$undefined"],["$","section",null,{"className":"mx-auto max-w-3xl px-4 sm:px-6 xl:max-w-5xl xl:px-0","children":[["$","$L4",null,{"kbarConfig":{"searchDocumentsPath":"/search.json"},"children":[["$","header",null,{"className":"flex items-center w-full bg-white dark:bg-gray-950 justify-between py-10","children":[["$","$L5",null,{"className":"break-words","href":"/","aria-label":"TechLog","children":["$","div",null,{"className":"flex items-center justify-between","children":[["$","div",null,{"className":"mr-3","children":["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","xmlnsXlink":"http://www.w3.org/1999/xlink","width":53.87,"height":43.61,"viewBox":"344.564 330.278 111.737 91.218","children":[["$","defs",null,{"children":[["$","linearGradient",null,{"id":"logo_svg__b","x1":420.97,"x2":420.97,"y1":331.28,"y2":418.5,"gradientUnits":"userSpaceOnUse","children":[["$","stop",null,{"offset":"0%","style":{"stopColor":"#06b6d4","stopOpacity":1}}],["$","stop",null,{"offset":"100%","style":{"stopColor":"#67e8f9","stopOpacity":1}}]]}],["$","linearGradient",null,{"id":"logo_svg__d","x1":377.89,"x2":377.89,"y1":331.28,"y2":418.5,"gradientUnits":"userSpaceOnUse","children":[["$","stop",null,{"offset":"0%","style":{"stopColor":"#06b6d4","stopOpacity":1}}],["$","stop",null,{"offset":"100%","style":{"stopColor":"#67e8f9","stopOpacity":1}}]]}],["$","path",null,{"id":"logo_svg__a","d":"M453.3 331.28v28.57l-64.66 58.65v-30.08z"}],["$","path",null,{"id":"logo_svg__c","d":"M410.23 331.28v28.57l-64.67 58.65v-30.08z"}]]}],["$","use",null,{"xlinkHref":"#logo_svg__a","fill":"url(#logo_svg__b)"}],["$","use",null,{"xlinkHref":"#logo_svg__c","fill":"url(#logo_svg__d)"}]]}]}],["$","div",null,{"className":"hidden h-6 text-2xl font-semibold sm:block","children":"TechLog"}]]}]}],["$","div",null,{"className":"flex items-center space-x-4 leading-5 sm:-mr-6 sm:space-x-6","children":[["$","div",null,{"className":"no-scrollbar hidden max-w-40 items-center gap-x-4 overflow-x-auto sm:flex md:max-w-72 lg:max-w-96","children":[["$","$L5","博客",{"className":"hover:text-primary-500 dark:hover:text-primary-400 m-1 font-medium text-gray-900 dark:text-gray-100","href":"/blog.html","children":"博客"}],["$","$L5","标签",{"className":"hover:text-primary-500 dark:hover:text-primary-400 m-1 font-medium text-gray-900 dark:text-gray-100","href":"/tags.html","children":"标签"}],["$","$L5","项目",{"className":"hover:text-primary-500 dark:hover:text-primary-400 m-1 font-medium text-gray-900 dark:text-gray-100","href":"/projects.html","children":"项目"}],["$","$L5","关于",{"className":"hover:text-primary-500 dark:hover:text-primary-400 m-1 font-medium text-gray-900 dark:text-gray-100","href":"/about.html","children":"关于"}]]}],["$","$L6",null,{"aria-label":"Search","children":["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","fill":"none","viewBox":"0 0 24 24","strokeWidth":1.5,"stroke":"currentColor","className":"hover:text-primary-500 dark:hover:text-primary-400 h-6 w-6 text-gray-900 dark:text-gray-100","children":"$L7"}]}],"$L8","$L9"]}]]}],"$La"]}],"$Lb"]}]]}]}]]}]]}],{"children":["blog","$Lc",{"children":[["slug","nextjs-performance","c"],"$Ld",{"children":["__PAGE__","$Le",{},null,false]},null,false]},null,false]},null,false],"$Lf",false]],"m":"$undefined","G":["$10",[]],"s":false,"S":true} 11:I[49217,["2545","static/chunks/c16f53c3-391a1f5a73546b11.js","2619","static/chunks/2619-eccd988d1e161df3.js","3353","static/chunks/3353-35c19838f8cf7b3b.js","7177","static/chunks/app/layout-cb4429a7e3e88a9f.js"],"default"] 12:I[394,["2545","static/chunks/c16f53c3-391a1f5a73546b11.js","2619","static/chunks/2619-eccd988d1e161df3.js","3353","static/chunks/3353-35c19838f8cf7b3b.js","7177","static/chunks/app/layout-cb4429a7e3e88a9f.js"],"default"] 13:I[9766,[],""] 14:I[98924,[],""] 16:I[24431,[],"OutletBoundary"] 18:I[15278,[],"AsyncMetadataOutlet"] 1a:I[24431,[],"ViewportBoundary"] 1c:I[24431,[],"MetadataBoundary"] 1d:"$Sreact.suspense" 7:["$","path",null,{"strokeLinecap":"round","strokeLinejoin":"round","d":"M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"}] 8:["$","$L11",null,{}] 9:["$","$L12",null,{}] a:["$","main",null,{"className":"mb-auto","children":["$","$L13",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L14",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","div",null,{"className":"flex flex-col items-start justify-start md:mt-24 md:flex-row md:items-center md:justify-center md:space-x-6","children":[["$","div",null,{"className":"space-x-2 pt-6 pb-8 md:space-y-5","children":["$","h1",null,{"className":"text-6xl leading-9 font-extrabold tracking-tight text-gray-900 md:border-r-2 md:px-6 md:text-8xl md:leading-14 dark:text-gray-100","children":"404"}]}],["$","div",null,{"className":"max-w-md","children":[["$","p",null,{"className":"mb-4 text-xl leading-normal font-bold md:text-2xl","children":"Sorry we couldn't find this page."}],["$","p",null,{"className":"mb-8","children":"But dont worry, you can find plenty of other things on our homepage."}],["$","$L5",null,{"className":"focus:shadow-outline-blue inline rounded-lg border border-transparent bg-blue-600 px-4 py-2 text-sm leading-5 font-medium text-white shadow-xs transition-colors duration-150 hover:bg-blue-700 focus:outline-hidden dark:hover:bg-blue-500","href":"/","children":"Back to homepage"}]]}]]}],[]],"forbidden":"$undefined","unauthorized":"$undefined"}]}] b:["$","footer",null,{"children":["$","div",null,{"className":"mt-16 flex flex-col items-center","children":[["$","div",null,{"className":"mb-3 flex space-x-4","children":[["$","a",null,{"className":"text-sm text-gray-500 transition hover:text-gray-600","target":"_blank","rel":"noopener noreferrer","href":"mailto:birenwenmou@qq.com","children":[["$","span",null,{"className":"sr-only","children":"mail"}],["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 20 20","className":"hover:text-primary-500 dark:hover:text-primary-400 fill-current text-gray-700 dark:text-gray-200 h-6 w-6","children":[["$","title",null,{"children":"Mail"}],["$","path",null,{"d":"M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"}],["$","path",null,{"d":"M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"}]]}]]}],["$","a",null,{"className":"text-sm text-gray-500 transition hover:text-gray-600","target":"_blank","rel":"noopener noreferrer","href":"https://github.com/joker1point","children":[["$","span",null,{"className":"sr-only","children":"github"}],["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 24 24","className":"hover:text-primary-500 dark:hover:text-primary-400 fill-current text-gray-700 dark:text-gray-200 h-6 w-6","children":[["$","title",null,{"children":"GitHub"}],["$","path",null,{"d":"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"}]]}]]}],null,null,null,null,null,null,null,null,null]}],["$","div",null,{"className":"mb-2 flex space-x-2 text-sm text-gray-500 dark:text-gray-400","children":[["$","div",null,{"children":"眠月"}],["$","div",null,{"children":" • "}],["$","div",null,{"children":"© 2026"}],["$","div",null,{"children":" • "}],["$","$L5",null,{"className":"break-words","href":"/","children":"TechLog"}]]}],["$","div",null,{"className":"mb-8 text-sm text-gray-500 dark:text-gray-400","children":["$","a",null,{"className":"break-words","target":"_blank","rel":"noopener noreferrer","href":"https://github.com/joker1point","children":"GitHub"}]}]]}]}] c:["$","$1","c",{"children":[null,["$","$L13",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L14",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}] d:["$","$1","c",{"children":[null,["$","$L13",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L14",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}] e:["$","$1","c",{"children":["$L15",[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/ddf3d904beac0ed7.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","$L16",null,{"children":["$L17",["$","$L18",null,{"promise":"$@19"}]]}]]}] f:["$","$1","h",{"children":[null,[["$","$L1a",null,{"children":"$L1b"}],null],["$","$L1c",null,{"children":["$","div",null,{"hidden":true,"children":["$","$1d",null,{"fallback":null,"children":"$L1e"}]}]}]]}] 1f:I[62088,["2619","static/chunks/2619-eccd988d1e161df3.js","1356","static/chunks/1356-354ecf51aaaf5203.js","6909","static/chunks/app/blog/%5B...slug%5D/page-d416e20a09ba8ecb.js"],"default"] 20:I[81356,["2619","static/chunks/2619-eccd988d1e161df3.js","1356","static/chunks/1356-354ecf51aaaf5203.js","6909","static/chunks/app/blog/%5B...slug%5D/page-d416e20a09ba8ecb.js"],"Image"] 21:I[16991,["2619","static/chunks/2619-eccd988d1e161df3.js","1356","static/chunks/1356-354ecf51aaaf5203.js","6909","static/chunks/app/blog/%5B...slug%5D/page-d416e20a09ba8ecb.js"],"default"] 15:[["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"BlogPosting\",\"headline\":\"Next.js App Router 性能优化实战\",\"datePublished\":\"2026-05-28T00:00:00.000Z\",\"dateModified\":\"2026-05-28T00:00:00.000Z\",\"description\":\"从 Server Components 到 Streaming SSR,一文掌握 Next.js App Router 的核心性能优化策略。\",\"image\":\"/static/images/twitter-card.png\",\"url\":\"https://techlog-18328.app.workbuddy.host/blog/nextjs-performance\",\"author\":[{\"@type\":\"Person\",\"name\":\"眠月\"}]}"}}],["$","section",null,{"className":"mx-auto max-w-3xl px-4 sm:px-6 xl:max-w-5xl xl:px-0","children":[["$","$L1f",null,{}],["$","article",null,{"children":["$","div",null,{"className":"xl:divide-y xl:divide-gray-200 xl:dark:divide-gray-700","children":[["$","header",null,{"className":"pt-6 xl:pb-6","children":["$","div",null,{"className":"space-y-1 text-center","children":[["$","dl",null,{"className":"space-y-10","children":[["$","div",null,{"children":[["$","dt",null,{"className":"sr-only","children":"Published on"}],["$","dd",null,{"className":"text-base leading-6 font-medium text-gray-500 dark:text-gray-400","children":["$","time",null,{"dateTime":"2026-05-28T00:00:00.000Z","children":"2026年5月28日星期四"}]}]]}],["$","div",null,{"children":[["$","dt",null,{"className":"sr-only","children":"Word count"}],["$","dd",null,{"className":"text-sm text-gray-400 dark:text-gray-500","children":["338"," 字"," · 阅读约 2 分钟"]}]]}]]}],["$","div",null,{"children":["$","h1",null,{"className":"text-3xl leading-9 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10 md:text-5xl md:leading-14 dark:text-gray-100","children":"Next.js App Router 性能优化实战"}]}]]}]}],["$","div",null,{"className":"grid-rows-[auto_1fr] divide-y divide-gray-200 pb-8 xl:grid xl:grid-cols-4 xl:gap-x-6 xl:divide-y-0 dark:divide-gray-700","children":[["$","dl",null,{"className":"pt-6 pb-10 xl:border-b xl:border-gray-200 xl:pt-11 xl:dark:border-gray-700","children":[["$","dt",null,{"className":"sr-only","children":"Authors"}],["$","dd",null,{"children":["$","ul",null,{"className":"flex flex-wrap justify-center gap-4 sm:space-x-12 xl:block xl:space-y-8 xl:space-x-0","children":[["$","li","眠月",{"className":"flex items-center space-x-2","children":[["$","$L20",null,{"src":"/static/images/avatar.png","width":38,"height":38,"alt":"avatar","className":"h-10 w-10 rounded-full"}],["$","dl",null,{"className":"text-sm leading-5 font-medium whitespace-nowrap","children":[["$","dt",null,{"className":"sr-only","children":"Name"}],["$","dd",null,{"className":"text-gray-900 dark:text-gray-100","children":"眠月"}],["$","dt",null,{"className":"sr-only","children":"Twitter"}],["$","dd",null,{"children":""}]]}]]}]]}]}]]}],["$","div",null,{"className":"divide-y divide-gray-200 xl:col-span-3 xl:row-span-2 xl:pb-0 dark:divide-gray-700","children":[["$","div",null,{"className":"prose dark:prose-invert max-w-none pt-10 pb-8","children":[["$","h2",null,{"className":"content-header","id":"server-components减少客户端-javascript","children":[["$","a",null,{"className":"break-words","href":"#server-components减少客户端-javascript","aria-hidden":"true","tabIndex":"-1","children":["$","span",null,{"className":"content-header-link","children":["$","svg",null,{"className":"h-5 linkicon w-5","fill":"currentColor","viewBox":"0 0 20 20","xmlns":"http://www.w3.org/2000/svg","children":[["$","path",null,{"d":"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"}],["$","path",null,{"d":"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"}]]}]}]}],"Server Components:减少客户端 JavaScript"]}],["$","p",null,{"children":"Next.js App Router 最大的变革是默认使用 Server Components。这意味着:"}],["$","$L21",null,{"className":"language-tsx","children":["$","code",null,{"className":"language-tsx code-highlight","children":[["$","span",null,{"className":"code-line","children":["$L22","\n"]}],"$L23","$L24","$L25","$L26","$L27","$L28","$L29","$L2a","$L2b","$L2c","$L2d"]}]}],"$L2e","$L2f","$L30","$L31","$L32","$L33","$L34","$L35","$L36","$L37","$L38","$L39","$L3a","$L3b","$L3c","$L3d","$L3e","$L3f","$L40"]}],"$L41","$L42"]}],"$L43"]}]]}]}]]}]] 51:I[50528,["2619","static/chunks/2619-eccd988d1e161df3.js","1356","static/chunks/1356-354ecf51aaaf5203.js","6909","static/chunks/app/blog/%5B...slug%5D/page-d416e20a09ba8ecb.js"],"default"] 22:["$","span",null,{"className":"token comment","children":"// 这个组件在服务端渲染,零客户端 JS"}] 23:["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token keyword","children":"async"}]," ",["$","span",null,{"className":"token keyword","children":"function"}]," ",["$","span",null,{"className":"token function","children":"BlogList"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n"]}] 24:["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"const"}]," posts ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token keyword","children":"await"}]," db",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"posts"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token function property-access method","children":"findMany"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}],"\n"]}] 25:["$","span",null,{"className":"code-line","children":" \n"}] 26:["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"return"}]," ",["$","span",null,{"className":"token punctuation","children":"("}],"\n"]}] 27:["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"ul"]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"\n"}]]}] 28:["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token plain-text","children":" "}],["$","span",null,{"className":"token punctuation","children":"{"}],"posts",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token function property-access method","children":"map"}],["$","span",null,{"className":"token punctuation","children":"("}],"post ",["$","span",null,{"className":"token operator arrow","children":"=>"}]," ",["$","span",null,{"className":"token punctuation","children":"("}],"\n"]}] 29:["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"li"]}]," ",["$","span",null,{"className":"token attr-name","children":"key"}],["$","span",null,{"className":"token language-javascript script","children":[["$","span",null,{"className":"token punctuation script-punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],"post",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"id"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token punctuation","children":"{"}],"post",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"title"}],["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":""}]]}],"\n"]}] 2a:["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token plain-text","children":"\n"}]]}] 2b:["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token plain-text","children":" "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":""}]]}],"\n"]}] 2c:["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token punctuation","children":")"}],"\n"]}] 2d:["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}] 2e:["$","h3",null,{"className":"content-header","id":"什么时候用-client-components","children":[["$","a",null,{"className":"break-words","href":"#什么时候用-client-components","aria-hidden":"true","tabIndex":"-1","children":["$","span",null,{"className":"content-header-link","children":["$","svg",null,{"className":"h-5 linkicon w-5","fill":"currentColor","viewBox":"0 0 20 20","xmlns":"http://www.w3.org/2000/svg","children":[["$","path",null,{"d":"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"}],["$","path",null,{"d":"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"}]]}]}]}],"什么时候用 Client Components?"]}] 2f:["$","p",null,{"children":["只有需要交互、状态、或浏览器 API 时才标记 ",["$","code",null,{"children":"'use client'"}],":"]}] 30:["$","$L21",null,{"className":"language-tsx","children":["$","code",null,{"className":"language-tsx code-highlight","children":[["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token string","children":"'use client'"}],"\n"]}],["$","span",null,{"className":"code-line","children":"\n"}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token keyword","children":"import"}]," ",["$","span",null,{"className":"token imports","children":[["$","span",null,{"className":"token punctuation","children":"{"}]," useState ",["$","span",null,{"className":"token punctuation","children":"}"}]]}]," ",["$","span",null,{"className":"token keyword","children":"from"}]," ",["$","span",null,{"className":"token string","children":"'react'"}],"\n"]}],["$","span",null,{"className":"code-line","children":"\n"}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token keyword","children":"export"}]," ",["$","span",null,{"className":"token keyword","children":"function"}]," ",["$","span",null,{"className":"token function","children":"SearchBar"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"const"}]," ",["$","span",null,{"className":"token punctuation","children":"["}],"query",["$","span",null,{"className":"token punctuation","children":","}]," setQuery",["$","span",null,{"className":"token punctuation","children":"]"}]," ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token function","children":"useState"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token string","children":"''"}],["$","span",null,{"className":"token punctuation","children":")"}],"\n"]}],["$","span",null,{"className":"code-line","children":" \n"}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"return"}]," ",["$","span",null,{"className":"token punctuation","children":"("}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"input"]}],"\n"]}]]}],["$","span",null,{"className":"code-line","children":["$","span",null,{"className":"token tag","children":[" ",["$","span",null,{"className":"token attr-name","children":"value"}],["$","span",null,{"className":"token language-javascript script","children":[["$","span",null,{"className":"token punctuation script-punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],"query",["$","span",null,{"className":"token punctuation","children":"}"}]]}],"\n"]}]}],["$","span",null,{"className":"code-line","children":["$","span",null,{"className":"token tag","children":[" ",["$","span",null,{"className":"token attr-name","children":"onChange"}],["$","span",null,{"className":"token language-javascript script","children":[["$","span",null,{"className":"token punctuation script-punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],"e ",["$","span",null,{"className":"token operator arrow","children":"=>"}]," ",["$","span",null,{"className":"token function","children":"setQuery"}],["$","span",null,{"className":"token punctuation","children":"("}],"e",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"target"}],["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token property-access","children":"value"}],["$","span",null,{"className":"token punctuation","children":")"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}],"\n"]}]}],["$","span",null,{"className":"code-line","children":["$","span",null,{"className":"token tag","children":[" ",["$","span",null,{"className":"token attr-name","children":"placeholder"}],["$","span",null,{"className":"token attr-value","children":[["$","span",null,{"className":"token punctuation attr-equals","children":"="}],["$","span",null,{"className":"token punctuation","children":"\""}],"搜索文章...",["$","span",null,{"className":"token punctuation","children":"\""}]]}],"\n"]}]}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token tag","children":[" ",["$","span",null,{"className":"token punctuation","children":"/>"}]]}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ","$L44","\n"]}],"$L45"]}]}] 31:["$","p",null,{"children":[["$","strong",null,{"children":"关键原则"}],":把 Client Component 推到叶子节点,让尽可能多的组件留在服务端。"]}] 32:["$","h2",null,{"className":"content-header","id":"streaming-ssr渐进式渲染","children":[["$","a",null,{"className":"break-words","href":"#streaming-ssr渐进式渲染","aria-hidden":"true","tabIndex":"-1","children":["$","span",null,{"className":"content-header-link","children":["$","svg",null,{"className":"h-5 linkicon w-5","fill":"currentColor","viewBox":"0 0 20 20","xmlns":"http://www.w3.org/2000/svg","children":[["$","path",null,{"d":"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"}],["$","path",null,{"d":"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"}]]}]}]}],"Streaming SSR:渐进式渲染"]}] 33:["$","p",null,{"children":["使用 ",["$","code",null,{"children":"loading.tsx"}]," 和 ",["$","code",null,{"children":"Suspense"}]," 实现流式渲染:"]}] 34:["$","$L21",null,{"className":"language-tsx","children":["$","code",null,{"className":"language-tsx code-highlight","children":[["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token comment","children":"// app/blog/loading.tsx"}],"\n"]}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token keyword","children":"export"}]," ",["$","span",null,{"className":"token keyword","children":"default"}]," ",["$","span",null,{"className":"token keyword","children":"function"}]," ",["$","span",null,{"className":"token function","children":"Loading"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"return"}]," ",["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],["$","span",null,{"className":"token class-name","children":"BlogSkeleton"}]]}]," ",["$","span",null,{"className":"token punctuation","children":"/>"}]]}],"\n"]}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}],["$","span",null,{"className":"code-line","children":"\n"}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token comment","children":"// 精细控制"}],"\n"]}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token keyword","children":"import"}]," ",["$","span",null,{"className":"token imports","children":[["$","span",null,{"className":"token punctuation","children":"{"}]," ",["$","span",null,{"className":"token maybe-class-name","children":"Suspense"}]," ",["$","span",null,{"className":"token punctuation","children":"}"}]]}]," ",["$","span",null,{"className":"token keyword","children":"from"}]," ",["$","span",null,{"className":"token string","children":"'react'"}],"\n"]}],["$","span",null,{"className":"code-line","children":"\n"}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token keyword","children":"export"}]," ",["$","span",null,{"className":"token keyword","children":"default"}]," ",["$","span",null,{"className":"token keyword","children":"function"}]," ",["$","span",null,{"className":"token function","children":"BlogPage"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"return"}]," ",["$","span",null,{"className":"token punctuation","children":"("}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"div"]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"\n"}]]}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token plain-text","children":" "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],"h1"]}],["$","span",null,{"className":"token punctuation","children":">"}]]}],["$","span",null,{"className":"token plain-text","children":"博客"}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":""}]]}],["$","span",null,{"className":"token plain-text","children":"\n"}]]}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token plain-text","children":" "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],["$","span",null,{"className":"token class-name","children":"Suspense"}]]}]," ",["$","span",null,{"className":"token attr-name","children":"fallback"}],["$","span",null,{"className":"token language-javascript script","children":[["$","span",null,{"className":"token punctuation script-punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":["$L46","$L47"]}]," ","$L48"]}],"$L49"]}],"$L4a"]}],"$L4b"]}],"$L4c","$L4d","$L4e","$L4f","$L50"]}]}] 35:["$","h2",null,{"className":"content-header","id":"图片优化","children":[["$","a",null,{"className":"break-words","href":"#图片优化","aria-hidden":"true","tabIndex":"-1","children":["$","span",null,{"className":"content-header-link","children":["$","svg",null,{"className":"h-5 linkicon w-5","fill":"currentColor","viewBox":"0 0 20 20","xmlns":"http://www.w3.org/2000/svg","children":[["$","path",null,{"d":"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"}],["$","path",null,{"d":"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"}]]}]}]}],"图片优化"]}] 36:["$","p",null,{"children":"Next.js Image 组件的优化策略:"}] 37:["$","$L21",null,{"className":"language-tsx","children":["$","code",null,{"className":"language-tsx code-highlight","children":[["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token keyword","children":"import"}]," ",["$","span",null,{"className":"token imports","children":["$","span",null,{"className":"token maybe-class-name","children":"Image"}]}]," ",["$","span",null,{"className":"token keyword","children":"from"}]," ",["$","span",null,{"className":"token string","children":"'next/image'"}],"\n"]}],["$","span",null,{"className":"code-line","children":"\n"}],["$","span",null,{"className":"code-line","children":["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],["$","span",null,{"className":"token class-name","children":"Image"}]]}],"\n"]}]}],["$","span",null,{"className":"code-line","children":["$","span",null,{"className":"token tag","children":[" ",["$","span",null,{"className":"token attr-name","children":"src"}],["$","span",null,{"className":"token attr-value","children":[["$","span",null,{"className":"token punctuation attr-equals","children":"="}],["$","span",null,{"className":"token punctuation","children":"\""}],"/hero.jpg",["$","span",null,{"className":"token punctuation","children":"\""}]]}],"\n"]}]}],["$","span",null,{"className":"code-line","children":["$","span",null,{"className":"token tag","children":[" ",["$","span",null,{"className":"token attr-name","children":"alt"}],["$","span",null,{"className":"token attr-value","children":[["$","span",null,{"className":"token punctuation attr-equals","children":"="}],["$","span",null,{"className":"token punctuation","children":"\""}],"Hero",["$","span",null,{"className":"token punctuation","children":"\""}]]}],"\n"]}]}],["$","span",null,{"className":"code-line","children":["$","span",null,{"className":"token tag","children":[" ",["$","span",null,{"className":"token attr-name","children":"width"}],["$","span",null,{"className":"token language-javascript script","children":[["$","span",null,{"className":"token punctuation script-punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token number","children":"1200"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}],"\n"]}]}],["$","span",null,{"className":"code-line","children":["$","span",null,{"className":"token tag","children":[" ",["$","span",null,{"className":"token attr-name","children":"height"}],["$","span",null,{"className":"token language-javascript script","children":[["$","span",null,{"className":"token punctuation script-punctuation","children":"="}],["$","span",null,{"className":"token punctuation","children":"{"}],["$","span",null,{"className":"token number","children":"630"}],["$","span",null,{"className":"token punctuation","children":"}"}]]}],"\n"]}]}],["$","span",null,{"className":"code-line","children":["$","span",null,{"className":"token tag","children":[" ",["$","span",null,{"className":"token attr-name","children":"priority"}]," ",["$","span",null,{"className":"token comment","children":"// 首屏图片立即加载"}],"\n"]}]}],["$","span",null,{"className":"code-line","children":["$","span",null,{"className":"token tag","children":[" ",["$","span",null,{"className":"token attr-name","children":"placeholder"}],["$","span",null,{"className":"token attr-value","children":[["$","span",null,{"className":"token punctuation attr-equals","children":"="}],["$","span",null,{"className":"token punctuation","children":"\""}],"blur",["$","span",null,{"className":"token punctuation","children":"\""}]]}]," ",["$","span",null,{"className":"token comment","children":"// 模糊占位"}],"\n"]}]}],["$","span",null,{"className":"code-line","children":["$","span",null,{"className":"token tag","children":[" ",["$","span",null,{"className":"token attr-name","children":"sizes"}],["$","span",null,{"className":"token attr-value","children":[["$","span",null,{"className":"token punctuation attr-equals","children":"="}],["$","span",null,{"className":"token punctuation","children":"\""}],"(max-width: 768px) 100vw, 50vw",["$","span",null,{"className":"token punctuation","children":"\""}]]}],"\n"]}]}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token tag","children":["$","span",null,{"className":"token punctuation","children":"/>"}]}],"\n"]}]]}]}] 38:["$","h2",null,{"className":"content-header","id":"字体优化","children":[["$","a",null,{"className":"break-words","href":"#字体优化","aria-hidden":"true","tabIndex":"-1","children":["$","span",null,{"className":"content-header-link","children":["$","svg",null,{"className":"h-5 linkicon w-5","fill":"currentColor","viewBox":"0 0 20 20","xmlns":"http://www.w3.org/2000/svg","children":[["$","path",null,{"d":"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"}],["$","path",null,{"d":"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"}]]}]}]}],"字体优化"]}] 39:["$","$L21",null,{"className":"language-tsx","children":["$","code",null,{"className":"language-tsx code-highlight","children":[["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token keyword","children":"import"}]," ",["$","span",null,{"className":"token imports","children":[["$","span",null,{"className":"token punctuation","children":"{"}]," ",["$","span",null,{"className":"token maybe-class-name","children":"Inter"}]," ",["$","span",null,{"className":"token punctuation","children":"}"}]]}]," ",["$","span",null,{"className":"token keyword","children":"from"}]," ",["$","span",null,{"className":"token string","children":"'next/font/google'"}],"\n"]}],["$","span",null,{"className":"code-line","children":"\n"}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token keyword","children":"const"}]," inter ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token function","children":"Inter"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":"{"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" subsets",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token punctuation","children":"["}],["$","span",null,{"className":"token string","children":"'latin'"}],["$","span",null,{"className":"token punctuation","children":"]"}],["$","span",null,{"className":"token punctuation","children":","}],"\n"]}],["$","span",null,{"className":"code-line","children":[" display",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token string","children":"'swap'"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token comment","children":"// 避免 FOIT"}],"\n"]}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":")"}],"\n"]}]]}]}] 3a:["$","h2",null,{"className":"content-header","id":"数据获取策略","children":[["$","a",null,{"className":"break-words","href":"#数据获取策略","aria-hidden":"true","tabIndex":"-1","children":["$","span",null,{"className":"content-header-link","children":["$","svg",null,{"className":"h-5 linkicon w-5","fill":"currentColor","viewBox":"0 0 20 20","xmlns":"http://www.w3.org/2000/svg","children":[["$","path",null,{"d":"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"}],["$","path",null,{"d":"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"}]]}]}]}],"数据获取策略"]}] 3b:["$","h3",null,{"className":"content-header","id":"静态生成推荐博客内容","children":[["$","a",null,{"className":"break-words","href":"#静态生成推荐博客内容","aria-hidden":"true","tabIndex":"-1","children":["$","span",null,{"className":"content-header-link","children":["$","svg",null,{"className":"h-5 linkicon w-5","fill":"currentColor","viewBox":"0 0 20 20","xmlns":"http://www.w3.org/2000/svg","children":[["$","path",null,{"d":"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"}],["$","path",null,{"d":"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"}]]}]}]}],"静态生成(推荐博客内容)"]}] 3c:["$","$L21",null,{"className":"language-tsx","children":["$","code",null,{"className":"language-tsx code-highlight","children":[["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token comment","children":"// 构建时获取数据"}],"\n"]}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token keyword","children":"async"}]," ",["$","span",null,{"className":"token keyword","children":"function"}]," ",["$","span",null,{"className":"token function","children":"getPosts"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"const"}]," res ",["$","span",null,{"className":"token operator","children":"="}]," ",["$","span",null,{"className":"token keyword","children":"await"}]," ",["$","span",null,{"className":"token function","children":"fetch"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token string","children":"'https://api.example.com/posts'"}],["$","span",null,{"className":"token punctuation","children":")"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token keyword","children":"return"}]," res",["$","span",null,{"className":"token punctuation","children":"."}],["$","span",null,{"className":"token function property-access method","children":"json"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token punctuation","children":")"}],"\n"]}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}]]}]}] 3d:["$","h3",null,{"className":"content-header","id":"增量静态再生-isr","children":[["$","a",null,{"className":"break-words","href":"#增量静态再生-isr","aria-hidden":"true","tabIndex":"-1","children":["$","span",null,{"className":"content-header-link","children":["$","svg",null,{"className":"h-5 linkicon w-5","fill":"currentColor","viewBox":"0 0 20 20","xmlns":"http://www.w3.org/2000/svg","children":[["$","path",null,{"d":"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"}],["$","path",null,{"d":"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"}]]}]}]}],"增量静态再生 (ISR)"]}] 3e:["$","$L21",null,{"className":"language-tsx","children":["$","code",null,{"className":"language-tsx code-highlight","children":[["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token comment","children":"// 每60秒重新验证"}],"\n"]}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token function","children":"fetch"}],["$","span",null,{"className":"token punctuation","children":"("}],["$","span",null,{"className":"token string","children":"'https://api.example.com/posts'"}],["$","span",null,{"className":"token punctuation","children":","}]," ",["$","span",null,{"className":"token punctuation","children":"{"}],"\n"]}],["$","span",null,{"className":"code-line","children":[" next",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token punctuation","children":"{"}]," revalidate",["$","span",null,{"className":"token operator","children":":"}]," ",["$","span",null,{"className":"token number","children":"60"}]," ",["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}],["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token punctuation","children":"}"}],["$","span",null,{"className":"token punctuation","children":")"}],"\n"]}]]}]}] 3f:["$","h2",null,{"className":"content-header","id":"性能检查清单","children":[["$","a",null,{"className":"break-words","href":"#性能检查清单","aria-hidden":"true","tabIndex":"-1","children":["$","span",null,{"className":"content-header-link","children":["$","svg",null,{"className":"h-5 linkicon w-5","fill":"currentColor","viewBox":"0 0 20 20","xmlns":"http://www.w3.org/2000/svg","children":[["$","path",null,{"d":"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z"}],["$","path",null,{"d":"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z"}]]}]}]}],"性能检查清单"]}] 40:["$","ul",null,{"className":"contains-task-list","children":[["$","li",null,{"className":"task-list-item","children":[["$","input",null,{"disabled":true,"type":"checkbox"}]," ","Lighthouse 评分 > 90"]}],["$","li",null,{"className":"task-list-item","children":[["$","input",null,{"disabled":true,"type":"checkbox"}]," ","LCP < 2.5s"]}],["$","li",null,{"className":"task-list-item","children":[["$","input",null,{"disabled":true,"type":"checkbox"}]," ","CLS < 0.1"]}],["$","li",null,{"className":"task-list-item","children":[["$","input",null,{"disabled":true,"type":"checkbox"}]," ","使用 Route Segment Config 控制缓存策略"]}],["$","li",null,{"className":"task-list-item","children":[["$","input",null,{"disabled":true,"type":"checkbox"}]," ","启用 Partial Prerendering (PPR)"]}],["$","li",null,{"className":"task-list-item","children":[["$","input",null,{"disabled":true,"type":"checkbox"}]," ","图片全部使用 ",["$","code",null,{"children":"next/image"}]]}],["$","li",null,{"className":"task-list-item","children":[["$","input",null,{"disabled":true,"type":"checkbox"}]," ","字体使用 ",["$","code",null,{"children":"next/font"}]," 自托管"]}]]}] 41:["$","div",null,{"className":"pt-6 pb-6 text-sm text-gray-700 dark:text-gray-300","children":[["$","a",null,{"className":"break-words","target":"_blank","rel":"nofollow","href":"https://mobile.twitter.com/search?q=https%3A%2F%2Ftechlog-18328.app.workbuddy.host%2Fblog%2Fnextjs-performance","children":"Discuss on Twitter"}]," • ",["$","a",null,{"className":"break-words","target":"_blank","rel":"noopener noreferrer","href":"https://github.com/joker1point/techlog/blob/main/data/blog/nextjs-performance.mdx","children":"View on GitHub"}]]}] 42:["$","div",null,{"className":"pt-6 pb-6 text-center text-gray-700 dark:text-gray-300","id":"comment","children":["$","$L51",null,{"slug":"nextjs-performance"}]}] 43:["$","footer",null,{"children":[["$","div",null,{"className":"divide-gray-200 text-sm leading-5 font-medium xl:col-start-1 xl:row-start-2 xl:divide-y dark:divide-gray-700","children":[["$","div",null,{"className":"py-4 xl:py-8","children":[["$","h2",null,{"className":"text-xs tracking-wide text-gray-500 uppercase dark:text-gray-400","children":"Tags"}],["$","div",null,{"className":"flex flex-wrap","children":[["$","$L5","nextjs",{"className":"text-primary-500 hover:text-primary-600 dark:hover:text-primary-400 mr-3 text-sm font-medium uppercase","href":"/tags/nextjs.html","children":"nextjs"}],["$","$L5","performance",{"className":"text-primary-500 hover:text-primary-600 dark:hover:text-primary-400 mr-3 text-sm font-medium uppercase","href":"/tags/performance.html","children":"performance"}],["$","$L5","react",{"className":"text-primary-500 hover:text-primary-600 dark:hover:text-primary-400 mr-3 text-sm font-medium uppercase","href":"/tags/react.html","children":"react"}],["$","$L5","frontend",{"className":"text-primary-500 hover:text-primary-600 dark:hover:text-primary-400 mr-3 text-sm font-medium uppercase","href":"/tags/frontend.html","children":"frontend"}]]}]]}],["$","div",null,{"className":"flex justify-between py-4 xl:block xl:space-y-8 xl:py-8","children":[["$","div",null,{"children":[["$","h2",null,{"className":"text-xs tracking-wide text-gray-500 uppercase dark:text-gray-400","children":"Previous Article"}],["$","div",null,{"className":"text-primary-500 hover:text-primary-600 dark:hover:text-primary-400","children":["$","$L5",null,{"className":"break-words","href":"/blog/design-system-with-tailwind.html","children":"构建现代设计系统:从 Design Tokens 到组件库"}]}]]}],["$","div",null,{"children":[["$","h2",null,{"className":"text-xs tracking-wide text-gray-500 uppercase dark:text-gray-400","children":"Next Article"}],["$","div",null,{"className":"text-primary-500 hover:text-primary-600 dark:hover:text-primary-400","children":["$","$L5",null,{"className":"break-words","href":"/blog/webpack-to-turbopack.html","children":"前端工程化:从 Webpack 到 Turbopack 的迁移指南"}]}]]}]]}]]}],["$","div",null,{"className":"pt-4 xl:pt-8","children":["$","$L5",null,{"className":"text-primary-500 hover:text-primary-600 dark:hover:text-primary-400","href":"/blog.html","aria-label":"Back to the blog","children":"← Back to the blog"}]}]]}] 44:["$","span",null,{"className":"token punctuation","children":")"}] 45:["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}] 46:["$","span",null,{"className":"token punctuation","children":"<"}] 47:["$","span",null,{"className":"token class-name","children":"BlogSkeleton"}] 48:["$","span",null,{"className":"token punctuation","children":"/>"}] 49:["$","span",null,{"className":"token punctuation","children":"}"}] 4a:["$","span",null,{"className":"token punctuation","children":">"}] 4b:["$","span",null,{"className":"token plain-text","children":"\n"}] 4c:["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token plain-text","children":" "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":"<"}],["$","span",null,{"className":"token class-name","children":"BlogList"}]]}]," ",["$","span",null,{"className":"token punctuation","children":"/>"}]]}],["$","span",null,{"className":"token plain-text","children":"\n"}]]}] 4d:["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token plain-text","children":" "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":""}]]}],["$","span",null,{"className":"token plain-text","children":"\n"}]]}] 4e:["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token plain-text","children":" "}],["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token tag","children":[["$","span",null,{"className":"token punctuation","children":""}]]}],"\n"]}] 4f:["$","span",null,{"className":"code-line","children":[" ",["$","span",null,{"className":"token punctuation","children":")"}],"\n"]}] 50:["$","span",null,{"className":"code-line","children":[["$","span",null,{"className":"token punctuation","children":"}"}],"\n"]}] 1b:[["$","meta","0",{"charSet":"utf-8"}],["$","meta","1",{"name":"viewport","content":"width=device-width, initial-scale=1"}]] 17:null 19:{"metadata":[["$","title","0",{"children":"Next.js App Router 性能优化实战 | TechLog"}],["$","meta","1",{"name":"description","content":"从 Server Components 到 Streaming SSR,一文掌握 Next.js App Router 的核心性能优化策略。"}],["$","meta","2",{"name":"robots","content":"index, follow"}],["$","meta","3",{"name":"googlebot","content":"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"}],["$","link","4",{"rel":"canonical","href":"https://techlog-18328.app.workbuddy.host/blog/nextjs-performance"}],["$","link","5",{"rel":"alternate","type":"application/rss+xml","href":"https://techlog-18328.app.workbuddy.host/feed.xml"}],["$","meta","6",{"property":"og:title","content":"Next.js App Router 性能优化实战"}],["$","meta","7",{"property":"og:description","content":"从 Server Components 到 Streaming SSR,一文掌握 Next.js App Router 的核心性能优化策略。"}],["$","meta","8",{"property":"og:url","content":"https://techlog-18328.app.workbuddy.host/blog/nextjs-performance"}],["$","meta","9",{"property":"og:site_name","content":"TechLog"}],["$","meta","10",{"property":"og:locale","content":"en_US"}],["$","meta","11",{"property":"og:image","content":"https://techlog-18328.app.workbuddy.host/static/images/twitter-card.png"}],["$","meta","12",{"property":"og:type","content":"article"}],["$","meta","13",{"property":"article:published_time","content":"2026-05-28T00:00:00.000Z"}],["$","meta","14",{"property":"article:modified_time","content":"2026-05-28T00:00:00.000Z"}],["$","meta","15",{"property":"article:author","content":"眠月"}],["$","meta","16",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","17",{"name":"twitter:title","content":"Next.js App Router 性能优化实战"}],["$","meta","18",{"name":"twitter:description","content":"从 Server Components 到 Streaming SSR,一文掌握 Next.js App Router 的核心性能优化策略。"}],["$","meta","19",{"name":"twitter:image","content":"https://techlog-18328.app.workbuddy.host/static/images/twitter-card.png"}]],"error":null,"digest":"$undefined"} 1e:"$19:metadata"