[{"data":1,"prerenderedAt":872},["ShallowReactive",2],{"content:\u002Fframework-performance\u002Fastro-and-sveltekit-performance\u002Fastro-vs-nextjs-for-content-site-performance":3,"surroundings:\u002Fframework-performance\u002Fastro-and-sveltekit-performance\u002Fastro-vs-nextjs-for-content-site-performance":864},{"id":4,"title":5,"body":6,"description":845,"extension":846,"meta":847,"navigation":858,"path":859,"seo":860,"stem":862,"__hash__":863},"content\u002Fframework-performance\u002Fastro-and-sveltekit-performance\u002Fastro-vs-nextjs-for-content-site-performance\u002Findex.md","Astro vs Next.js for Content-Site Performance",{"type":7,"value":8,"toc":827},"minimark",[9,13,28,31,188,193,222,226,232,238,244,250,254,259,262,266,278,282,297,301,304,400,466,470,473,477,480,484,487,491,494,639,643,669,673,679,685,691,697,701,713,722,731,740,749,758,767,776,785,789,812,817,820,823],[10,11,5],"h1",{"id":12},"astro-vs-nextjs-for-content-site-performance",[14,15,16,17,22,23,27],"p",{},"This guide is part of ",[18,19,21],"a",{"href":20},"\u002Fframework-performance\u002Fastro-and-sveltekit-performance\u002F","Astro & SvelteKit Performance",", within ",[18,24,26],{"href":25},"\u002Fframework-performance\u002F","Framework Performance",". Content sites — blogs, documentation, news, marketing sites, e-commerce category and product pages — share a profile: most of each page is text and images that are the same for every visitor, with a few interactive elements. For these sites, the most important performance factors are fast HTML delivery (static or cached), small or no JavaScript, optimised images and fonts, and good interactivity for the few interactive parts.",[14,29,30],{},"Astro and Next.js can both build excellent content sites, but they start from different defaults. Astro ships zero JavaScript unless you add islands; Next.js ships the React runtime and hydrates client components, with Server Components (App Router) reducing how much code reaches the browser. The right choice depends on how interactive the site is, the team's existing stack, and whether the content site shares code with an application.",[14,32,33],{},[34,35,41,42,41,49,41,53,41,56,41,65,41,71,41,77,41,84,41,88,41,93,41,96,41,100,41,104,41,108,41,112,41,115,41,117,41,120,41,123,41,127,41,129,41,132,41,134,41,137,41,140,41,144,41,146,41,149,41,151,41,154,41,157,41,161,41,163,41,166,41,168,41,171,41,174,41,178,41,180,41,183,41,185,41],"svg",{"viewBox":36,"width":37,"role":38,"ariaLabel":39,"style":40},"0 0 760 258","100%","img","Comparison of Astro and Next.js on defaults and characteristics that matter for content-site performance.","height:auto;max-width:760px;display:block;margin:1.75rem auto;font-family:inherit;color:var(--fp-svg-ink)"," ",[43,44],"rect",{"className":45,"x":47,"y":47,"width":37,"height":37,"fill":48},[46],"svg-canvas","0","#ffffff",[50,51,52],"title",{},"Astro vs Next.js for content sites",[54,55,39],"desc",{},[43,57],{"x":58,"y":58,"width":59,"height":60,"rx":61,"fill":62,"stroke":63,"style":64},"1","758","256","10","none","currentColor","stroke-opacity:0.18",[66,67,52],"text",{"x":68,"y":69,"fill":63,"style":70},"28.0","34.0","font-size:16px;font-weight:700",[43,72],{"x":68,"y":73,"width":74,"height":75,"rx":47,"fill":63,"stroke":63,"style":76},"56.0","115.1","30.0","fill-opacity:0.06;stroke-opacity:0.4",[66,78,83],{"x":79,"y":80,"fill":63,"style":81,"textAnchor":82},"38.0","75.5","font-size:12.5px;font-weight:700","start","Aspect",[43,85],{"x":86,"y":73,"width":87,"height":75,"rx":47,"fill":63,"stroke":63,"style":76},"143.1","294.5",[66,89,92],{"x":90,"y":80,"fill":63,"style":81,"textAnchor":91},"290.3","middle","Astro",[43,94],{"x":95,"y":73,"width":87,"height":75,"rx":47,"fill":63,"stroke":63,"style":76},"437.5",[66,97,99],{"x":98,"y":80,"fill":63,"style":81,"textAnchor":91},"584.8","Next.js (App Router)",[43,101],{"x":68,"y":102,"width":74,"height":75,"rx":47,"fill":62,"stroke":63,"style":103},"86.0","stroke-opacity:0.35",[66,105,107],{"x":79,"y":106,"fill":63,"style":81,"textAnchor":82},"105.5","Default client JS",[43,109],{"x":86,"y":102,"width":87,"height":75,"rx":47,"fill":110,"stroke":110,"style":111},"#0466c8","fill-opacity:0.14;stroke-opacity:0.9",[66,113,62],{"x":90,"y":106,"fill":63,"style":114,"textAnchor":91},"font-size:12px",[43,116],{"x":95,"y":102,"width":87,"height":75,"rx":47,"fill":63,"stroke":63,"style":76},[66,118,119],{"x":98,"y":106,"fill":63,"style":114,"textAnchor":91},"React runtime + client components",[43,121],{"x":68,"y":122,"width":74,"height":75,"rx":47,"fill":62,"stroke":63,"style":103},"116.0",[66,124,126],{"x":79,"y":125,"fill":63,"style":81,"textAnchor":82},"135.5","Interactivity",[43,128],{"x":86,"y":122,"width":87,"height":75,"rx":47,"fill":62,"stroke":63,"style":103},[66,130,131],{"x":90,"y":125,"fill":63,"style":114,"textAnchor":91},"islands, any framework",[43,133],{"x":95,"y":122,"width":87,"height":75,"rx":47,"fill":62,"stroke":63,"style":103},[66,135,136],{"x":98,"y":125,"fill":63,"style":114,"textAnchor":91},"React client components",[43,138],{"x":68,"y":139,"width":74,"height":75,"rx":47,"fill":62,"stroke":63,"style":103},"146.0",[66,141,143],{"x":79,"y":142,"fill":63,"style":81,"textAnchor":82},"165.5","Rendering",[43,145],{"x":86,"y":139,"width":87,"height":75,"rx":47,"fill":62,"stroke":63,"style":103},[66,147,148],{"x":90,"y":142,"fill":63,"style":114,"textAnchor":91},"static, SSR, server islands",[43,150],{"x":95,"y":139,"width":87,"height":75,"rx":47,"fill":62,"stroke":63,"style":103},[66,152,153],{"x":98,"y":142,"fill":63,"style":114,"textAnchor":91},"static, ISR, SSR, PPR",[43,155],{"x":68,"y":156,"width":74,"height":75,"rx":47,"fill":62,"stroke":63,"style":103},"176.0",[66,158,160],{"x":79,"y":159,"fill":63,"style":81,"textAnchor":82},"195.5","Navigation",[43,162],{"x":86,"y":156,"width":87,"height":75,"rx":47,"fill":62,"stroke":63,"style":103},[66,164,165],{"x":90,"y":159,"fill":63,"style":114,"textAnchor":91},"MPA (+ optional client router)",[43,167],{"x":95,"y":156,"width":87,"height":75,"rx":47,"fill":110,"stroke":110,"style":111},[66,169,170],{"x":98,"y":159,"fill":63,"style":114,"textAnchor":91},"client router + prefetch",[43,172],{"x":68,"y":173,"width":74,"height":75,"rx":47,"fill":62,"stroke":63,"style":103},"206.0",[66,175,177],{"x":79,"y":176,"fill":63,"style":81,"textAnchor":82},"225.5","Best fit",[43,179],{"x":86,"y":173,"width":87,"height":75,"rx":47,"fill":62,"stroke":63,"style":103},[66,181,182],{"x":90,"y":176,"fill":63,"style":114,"textAnchor":91},"mostly static content",[43,184],{"x":95,"y":173,"width":87,"height":75,"rx":47,"fill":62,"stroke":63,"style":103},[66,186,187],{"x":98,"y":176,"fill":63,"style":114,"textAnchor":91},"content mixed with app features",[189,190,192],"h2",{"id":191},"rapid-diagnosis","Rapid Diagnosis",[194,195,196,204,210,216],"ul",{},[197,198,199,203],"li",{},[200,201,202],"strong",{},"Measure JavaScript per page"," on your current site and identify what is actually interactive.",[197,205,206,209],{},[200,207,208],{},"Check the share of static content",": if most pages are identical for all users, static-first approaches fit.",[197,211,212,215],{},[200,213,214],{},"Check team expertise",": React-heavy teams can use React in both.",[197,217,218,221],{},[200,219,220],{},"Check integration needs",": shared components with a logged-in app favour a single framework.",[189,223,225],{"id":224},"root-cause-analysis-why-content-sites-get-slow","Root Cause Analysis: Why Content Sites Get Slow",[14,227,228,231],{},[200,229,230],{},"1. App frameworks used for documents."," Entire pages hydrate to support small interactive parts.",[14,233,234,237],{},[200,235,236],{},"2. Client-side data fetching."," Content loaded after JavaScript instead of in HTML.",[14,239,240,243],{},[200,241,242],{},"3. Unoptimised media."," Images and fonts dominate LCP.",[14,245,246,249],{},[200,247,248],{},"4. Third-party scripts."," Analytics, ads and widgets compete with rendering.",[189,251,253],{"id":252},"step-by-step-resolution","Step-by-Step Resolution",[255,256,258],"h3",{"id":257},"_1-quantify-interactivity","1. Quantify interactivity",[14,260,261],{},"List interactive components per template. If most pages have a handful of small widgets, Astro's islands model will ship much less JavaScript; if pages are largely interactive, the gap narrows.",[255,263,265],{"id":264},"_2-get-the-best-from-nextjs-if-you-stay","2. Get the best from Next.js if you stay",[14,267,268,269,273,274,277],{},"Use the App Router with Server Components for content, keep client components small and at the leaves, prerender or use ISR, mark the LCP image with ",[270,271,272],"code",{},"priority",", use ",[270,275,276],{},"next\u002Ffont",", and load third-party scripts late. Well-configured Next.js content pages can ship well under 100KB of JavaScript.",[255,279,281],{"id":280},"_3-get-the-best-from-astro-if-you-move","3. Get the best from Astro if you move",[14,283,284,285,288,289,292,293,296],{},"Render content as static HTML, use islands with ",[270,286,287],{},"client:visible"," or ",[270,290,291],{},"client:idle",", avoid multiple UI frameworks, use ",[270,294,295],{},"astro:assets"," for images, and use server islands for personalised parts.",[255,298,300],{"id":299},"_4-measure-on-your-own-pages","4. Measure on your own pages",[14,302,303],{},"Build a representative template in both (or compare with an existing implementation), and measure JavaScript, LCP, TBT and INP on a throttled profile. Decide with data.",[305,306,311],"pre",{"className":307,"code":308,"language":309,"meta":310,"style":310},"language-bash shiki shiki-themes github-light-high-contrast github-dark-high-contrast github-light-high-contrast","# Compare JavaScript transferred for the same template built two ways (Lighthouse CLI).\nnpx lighthouse https:\u002F\u002Fastro-preview.example.com\u002Fblog\u002Fpost --only-categories=performance --output=json --quiet --chrome-flags=\"--headless\" | jq '.audits[\"resource-summary\"].details.items[] | select(.resourceType==\"script\") | .transferSize'\nnpx lighthouse https:\u002F\u002Fnext-preview.example.com\u002Fblog\u002Fpost --only-categories=performance --output=json --quiet --chrome-flags=\"--headless\" | jq '.audits[\"resource-summary\"].details.items[] | select(.resourceType==\"script\") | .transferSize'\n# trade-off: a single lab run is noisy; run several and compare medians, and\n# confirm with field data after launch.\n","bash","",[270,312,313,322,362,388,394],{"__ignoreMap":310},[314,315,318],"span",{"class":316,"line":317},"line",1,[314,319,321],{"class":320},"sjfSM","# Compare JavaScript transferred for the same template built two ways (Lighthouse CLI).\n",[314,323,325,329,333,336,340,343,346,349,352,356,359],{"class":316,"line":324},2,[314,326,328],{"class":327},"sQw3B","npx",[314,330,332],{"class":331},"sZ8jY"," lighthouse",[314,334,335],{"class":331}," https:\u002F\u002Fastro-preview.example.com\u002Fblog\u002Fpost",[314,337,339],{"class":338},"sPXB4"," --only-categories=performance",[314,341,342],{"class":338}," --output=json",[314,344,345],{"class":338}," --quiet",[314,347,348],{"class":338}," --chrome-flags=",[314,350,351],{"class":331},"\"--headless\"",[314,353,355],{"class":354},"sPARh"," |",[314,357,358],{"class":327}," jq",[314,360,361],{"class":331}," '.audits[\"resource-summary\"].details.items[] | select(.resourceType==\"script\") | .transferSize'\n",[314,363,365,367,369,372,374,376,378,380,382,384,386],{"class":316,"line":364},3,[314,366,328],{"class":327},[314,368,332],{"class":331},[314,370,371],{"class":331}," https:\u002F\u002Fnext-preview.example.com\u002Fblog\u002Fpost",[314,373,339],{"class":338},[314,375,342],{"class":338},[314,377,345],{"class":338},[314,379,348],{"class":338},[314,381,351],{"class":331},[314,383,355],{"class":354},[314,385,358],{"class":327},[314,387,361],{"class":331},[314,389,391],{"class":316,"line":390},4,[314,392,393],{"class":320},"# trade-off: a single lab run is noisy; run several and compare medians, and\n",[314,395,397],{"class":316,"line":396},5,[314,398,399],{"class":320},"# confirm with field data after launch.\n",[14,401,402],{},[34,403,41,406,41,409,41,412,41,414,41,417,41,419,41,426,41,433,41,438,41,442,41,447,41,451,41,455,41,462,41],{"viewBox":404,"width":37,"role":38,"ariaLabel":405,"style":40},"0 0 760 163","Bar chart comparing JavaScript and total blocking time for the same blog template in Astro and in two Next.js configurations.",[43,407],{"className":408,"x":47,"y":47,"width":37,"height":37,"fill":48},[46],[50,410,411],{},"Blog post template, same design (median of 5 lab runs)",[54,413,405],{},[43,415],{"x":58,"y":58,"width":59,"height":416,"rx":61,"fill":62,"stroke":63,"style":64},"161",[66,418,411],{"x":68,"y":69,"fill":63,"style":70},[66,420,425],{"x":421,"y":422,"fill":63,"style":423,"textAnchor":424},"258.3","70.0","font-size:13px","end","Next.js Pages Router",[43,427],{"x":428,"y":73,"width":429,"height":430,"rx":431,"fill":62,"stroke":63,"style":432},"270.3","397.7","19","3","fill-opacity:0.7;stroke-opacity:0.35",[66,434,437],{"x":435,"y":422,"fill":63,"style":436},"674.0","font-size:12px;font-weight:600","180KB JS",[66,439,441],{"x":421,"y":440,"fill":63,"style":423,"textAnchor":424},"101.0","Next.js App Router (server components)",[43,443],{"x":428,"y":444,"width":445,"height":430,"rx":431,"fill":110,"stroke":110,"style":446},"87.0","203.3","fill-opacity:0.55;stroke-opacity:0.9",[66,448,450],{"x":449,"y":440,"fill":63,"style":436},"479.6","92KB JS",[66,452,454],{"x":421,"y":453,"fill":63,"style":423,"textAnchor":424},"132.0","Astro (one island, client:visible)",[43,456],{"x":428,"y":457,"width":458,"height":430,"rx":431,"fill":459,"stroke":460,"style":461},"118.0","24.3","#ffc300","#b8860b","fill-opacity:0.7;stroke-opacity:0.9",[66,463,465],{"x":464,"y":453,"fill":63,"style":436},"300.6","11KB JS",[189,467,469],{"id":468},"verification","Verification",[14,471,472],{},"Compare lab results on the same content and design, then verify with field data after launch: LCP, INP and CLS per template. Check build times and developer experience, since they affect how easily the site stays fast over time.",[189,474,476],{"id":475},"worked-example-a-news-publishers-evaluation","Worked Example: A News Publisher's Evaluation",[14,478,479],{},"A news publisher with a Next.js Pages Router site evaluated moving article pages to Astro. Their article template shipped 210KB of JavaScript, with LCP p75 2.8 seconds and INP p75 240ms. They built the template two ways: Next.js App Router with Server Components (95KB JS) and Astro with two islands (14KB JS). Lab LCP was similar (both server-rendered with optimised images); TBT was 280ms vs 40ms; INP in a field pilot was 160ms vs 80ms. Because article pages shared little code with their subscription app, they moved articles to Astro and kept the subscription flows in Next.js. Overall INP p75 across the site fell by 45%.",[189,481,483],{"id":482},"when-nextjs-is-the-better-fit","When Next.js Is the Better Fit",[14,485,486],{},"Next.js is often the better choice when content pages are tightly integrated with application features (accounts, carts, personalisation across pages), when the team wants one React codebase for marketing and product, when client-side navigation and shared state across pages matter, or when partial prerendering and ISR fit the content model. With careful use of Server Components, its performance on content pages can be very good — the gap with Astro is largest when Next.js is used with client components everywhere.",[189,488,490],{"id":489},"when-astro-is-the-better-fit","When Astro Is the Better Fit",[14,492,493],{},"Astro fits best when pages are mostly static, interactivity is limited and local, the site is content-driven (Markdown, MDX, headless CMS), and the team values minimal JavaScript by default. It also allows using components from several frameworks, which can ease migrations. For sites that later need more application-like features, Astro can host islands or link out to a separate app.",[14,495,496],{},[34,497,41,500,41,503,41,506,41,508,41,525,41,528,41,530,41,535,41,541,41,545,41,549,41,554,41,562,41,568,41,572,41,578,41,581,41,585,41,589,41,591,41,594,41,597,41,600,41,603,41,606,41,610,41,614,41,616,41,619,41,622,41,625,41,629,41,632,41,635,41],{"viewBox":498,"width":37,"role":38,"ariaLabel":499,"style":40},"0 0 760 359","Decision sequence for selecting Astro or Next.js for a content-focused website.",[43,501],{"className":502,"x":47,"y":47,"width":37,"height":37,"fill":48},[46],[50,504,505],{},"Choosing between Astro and Next.js for a content site",[54,507,499],{},[509,510,511],"defs",{},[512,513,520],"marker",{"id":514,"viewBox":515,"refX":516,"refY":517,"markerWidth":518,"markerHeight":518,"orient":519},"fad2f822b3","0 0 10 10","9","5","7","auto-start-reverse",[521,522],"path",{"d":523,"fill":63,"style":524},"M0 0 L10 5 L0 10 z","fill-opacity:0.7",[43,526],{"x":58,"y":58,"width":59,"height":527,"rx":61,"fill":62,"stroke":63,"style":64},"357",[66,529,505],{"x":68,"y":69,"fill":63,"style":70},[43,531],{"x":68,"y":73,"width":532,"height":533,"rx":534,"fill":63,"stroke":63,"style":76},"320.0","52.0","6",[66,536,540],{"x":537,"y":538,"fill":63,"style":539,"textAnchor":91},"188.0","78.0","font-size:13px;font-weight:700","Are pages mostly static with small, local",[66,542,544],{"x":537,"y":543,"fill":63,"style":539,"textAnchor":91},"95.0","interactivity?",[43,546],{"x":547,"y":73,"width":532,"height":533,"rx":534,"fill":459,"stroke":460,"style":548},"412.0","fill-opacity:0.24;stroke-opacity:0.9",[66,550,92],{"x":551,"y":552,"fill":63,"style":553,"textAnchor":91},"572.0","86.5","font-size:12.5px",[316,555],{"x1":556,"y1":557,"x2":558,"y2":557,"stroke":63,"strokeWidth":559,"style":560,"markerEnd":561},"348.0","82.0","410.0","1.5","stroke-opacity:0.6","url(#fad2f822b3)",[66,563,567],{"x":564,"y":565,"fill":110,"style":566,"textAnchor":91},"380.0","75.0","font-size:11.5px;font-weight:700","yes",[316,569],{"x1":537,"y1":570,"x2":537,"y2":571,"stroke":63,"strokeWidth":559,"style":560,"markerEnd":561},"108.0","142.0",[66,573,577],{"x":574,"y":575,"fill":576,"style":566},"196.0","130.0","#51617a","no",[43,579],{"x":68,"y":580,"width":532,"height":533,"rx":534,"fill":63,"stroke":63,"style":76},"144.0",[66,582,584],{"x":537,"y":583,"fill":63,"style":539,"textAnchor":91},"166.0","Do content pages share state and code with an",[66,586,588],{"x":537,"y":587,"fill":63,"style":539,"textAnchor":91},"183.0","app?",[43,590],{"x":547,"y":580,"width":532,"height":533,"rx":534,"fill":110,"stroke":110,"style":111},[66,592,99],{"x":551,"y":593,"fill":63,"style":553,"textAnchor":91},"174.5",[316,595],{"x1":556,"y1":596,"x2":558,"y2":596,"stroke":63,"strokeWidth":559,"style":560,"markerEnd":561},"170.0",[66,598,567],{"x":564,"y":599,"fill":110,"style":566,"textAnchor":91},"163.0",[316,601],{"x1":537,"y1":574,"x2":537,"y2":602,"stroke":63,"strokeWidth":559,"style":560,"markerEnd":561},"230.0",[66,604,577],{"x":574,"y":605,"fill":576,"style":566},"218.0",[43,607],{"x":68,"y":608,"width":532,"height":609,"rx":534,"fill":63,"stroke":63,"style":76},"232.0","35.0",[66,611,613],{"x":537,"y":612,"fill":63,"style":539,"textAnchor":91},"254.0","Is the team React-only and wants one codebase?",[43,615],{"x":547,"y":608,"width":532,"height":609,"rx":534,"fill":110,"stroke":110,"style":111},[66,617,618],{"x":551,"y":612,"fill":63,"style":553,"textAnchor":91},"Next.js with Server Components",[316,620],{"x1":556,"y1":621,"x2":558,"y2":621,"stroke":63,"strokeWidth":559,"style":560,"markerEnd":561},"249.5",[66,623,567],{"x":564,"y":624,"fill":110,"style":566,"textAnchor":91},"242.5",[316,626],{"x1":537,"y1":627,"x2":537,"y2":628,"stroke":63,"strokeWidth":559,"style":560,"markerEnd":561},"267.0","301.0",[66,630,577],{"x":574,"y":631,"fill":576,"style":566},"289.0",[43,633],{"x":68,"y":634,"width":532,"height":69,"rx":534,"fill":459,"stroke":460,"style":548},"303.0",[66,636,638],{"x":537,"y":637,"fill":63,"style":553,"textAnchor":91},"324.5","Prototype one template in both and measure",[189,640,642],{"id":641},"common-mistakes","Common Mistakes",[194,644,645,651,657,663],{},[197,646,647,650],{},[200,648,649],{},"Choosing by benchmarks alone."," Your content, team and integrations matter.",[197,652,653,656],{},[200,654,655],{},"Comparing a poorly configured Next.js site with Astro."," Configure both well before deciding.",[197,658,659,662],{},[200,660,661],{},"Ignoring images and fonts."," They often dominate LCP regardless of framework.",[197,664,665,668],{},[200,666,667],{},"Migrating without field measurement."," Lab gains may not match real-user gains.",[189,670,672],{"id":671},"edge-cases","Edge Cases",[14,674,675,678],{},[200,676,677],{},"Large documentation sites."," Build times matter; both support incremental approaches, but check with your page count.",[14,680,681,684],{},[200,682,683],{},"Personalisation."," Astro's server islands and Next.js partial prerendering both handle personalised fragments on cached pages.",[14,686,687,690],{},[200,688,689],{},"Search."," Client-side search adds JavaScript; load it on demand in either framework.",[14,692,693,696],{},[200,694,695],{},"i18n."," Both support localised routing; check how locale handling affects static generation.",[189,698,700],{"id":699},"faq","FAQ",[702,703,706,710],"details",{"className":704},[705],"faq-item",[707,708,709],"summary",{},"Is Astro always faster than Next.js?",[14,711,712],{},"For mostly static content, Astro usually ships less JavaScript by default, which helps INP and TBT. With careful Server Component use, Next.js can be close. LCP depends more on images, fonts and delivery.",[702,714,716,719],{"className":715},[705],[707,717,718],{},"Can I use React components in Astro?",[14,720,721],{},"Yes, as islands, so React teams can reuse components while shipping less JavaScript overall.",[702,723,725,728],{"className":724},[705],[707,726,727],{},"Does Next.js App Router ship less JavaScript than Pages Router?",[14,729,730],{},"Typically yes, because Server Components do not ship their code to the client.",[702,732,734,737],{"className":733},[705],[707,735,736],{},"Which has better SEO?",[14,738,739],{},"Both server-render or prerender HTML, which is what search engines need. Performance differences can affect Core Web Vitals, a minor ranking factor.",[702,741,743,746],{"className":742},[705],[707,744,745],{},"Is migration worth it?",[14,747,748],{},"When JavaScript and hydration are the main bottlenecks on content pages and those pages are separable from the app, often yes. Prototype one template first.",[702,750,752,755],{"className":751},[705],[707,753,754],{},"What about client-side navigation?",[14,756,757],{},"Next.js navigates client-side with prefetching. Astro is a multi-page site by default, with an optional client router; speculation rules can make Astro navigations nearly instant.",[702,759,761,764],{"className":760},[705],[707,762,763],{},"How do build times compare?",[14,765,766],{},"Both handle large sites; build times depend on page count, image processing and data fetching. Measure with your content.",[702,768,770,773],{"className":769},[705],[707,771,772],{},"Can both deploy to the edge?",[14,774,775],{},"Yes. Both support static hosting and server or edge rendering through adapters on major platforms.",[702,777,779,782],{"className":778},[705],[707,780,781],{},"Can I combine Astro and Next.js on one domain?",[14,783,784],{},"Yes. Route marketing and content paths to Astro and app paths to Next.js at the CDN or reverse proxy. Shared design tokens and components keep the experience consistent.",[189,786,788],{"id":787},"related","Related",[194,790,791,798,805],{},[197,792,793,797],{},[18,794,796],{"href":795},"\u002Fframework-performance\u002Fastro-and-sveltekit-performance\u002Fchoosing-astro-client-directives\u002F","Choosing Astro client directives"," — keeping islands lean.",[197,799,800,804],{},[18,801,803],{"href":802},"\u002Fframework-performance\u002Fnextjs-performance\u002Freducing-nextjs-first-load-javascript\u002F","Reducing Next.js first load JavaScript"," — getting the best from Next.js.",[197,806,807,811],{},[18,808,810],{"href":809},"\u002Fnetwork-protocol-optimization\u002Fspeculative-loading-and-prefetching\u002Fspeculation-rules-for-instant-navigations\u002F","Speculation rules for instant navigations"," — fast navigations for multi-page sites.",[813,814,816],"script",{"type":815},"application\u002Fld+json","\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"HowTo\",\n  \"name\": \"Astro vs Next.js for Content-Site Performance\",\n  \"description\": \"A performance-focused comparison of Astro and Next.js for content-heavy sites, including what each ships by default and how to get the best from either.\",\n  \"step\": [\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 1,\n      \"name\": \"Quantify interactivity\",\n      \"text\": \"List interactive components per template.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 2,\n      \"name\": \"Get the best from Next.js if you stay\",\n      \"text\": \"Use the App Router with Server Components for content, keep client components small and at the leaves, prerender or use ISR, mark the LCP image with priority, use next\u002Ffont, and load third-party scripts late.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 3,\n      \"name\": \"Get the best from Astro if you move\",\n      \"text\": \"Render content as static HTML, use islands with client:visible or client:idle, avoid multiple UI frameworks, use astro:assets for images, and use server islands for personalised parts.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 4,\n      \"name\": \"Measure on your own pages\",\n      \"text\": \"Build a representative template in both (or compare with an existing implementation), and measure JavaScript, LCP, TBT and INP on a throttled profile.\"\n    }\n  ]\n}\n",[813,818,819],{"type":815},"\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"TechArticle\",\n  \"headline\": \"Astro vs Next.js for Content-Site Performance\",\n  \"description\": \"A performance-focused comparison of Astro and Next.js for content-heavy sites, including what each ships by default and how to get the best from either.\",\n  \"datePublished\": \"2026-10-06\",\n  \"dateModified\": \"2026-10-06\",\n  \"author\": {\n    \"@type\": \"Organization\",\n    \"name\": \"frontend-performance.com\"\n  },\n  \"publisher\": {\n    \"@type\": \"Organization\",\n    \"name\": \"frontend-performance.com\"\n  },\n  \"mainEntityOfPage\": {\n    \"@type\": \"WebPage\",\n    \"@id\": \"https:\u002F\u002Ffrontend-performance.com\u002Fframework-performance\u002Fastro-and-sveltekit-performance\u002Fastro-vs-nextjs-for-content-site-performance\u002F\"\n  }\n}\n",[813,821,822],{"type":815},"\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"BreadcrumbList\",\n  \"itemListElement\": [\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 1,\n      \"name\": \"Home\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 2,\n      \"name\": \"Framework Performance\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fframework-performance\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 3,\n      \"name\": \"Astro & SvelteKit Performance\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fframework-performance\u002Fastro-and-sveltekit-performance\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 4,\n      \"name\": \"Astro vs Next.js for Content-Site Performance\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fframework-performance\u002Fastro-and-sveltekit-performance\u002Fastro-vs-nextjs-for-content-site-performance\u002F\"\n    }\n  ]\n}\n",[824,825,826],"style",{},"html pre.shiki code .sjfSM, html code.shiki .sjfSM{--shiki-default:#66707B;--shiki-dark:#BDC4CC;--shiki-light:#66707B}html pre.shiki code .sQw3B, html code.shiki .sQw3B{--shiki-default:#702C00;--shiki-dark:#FFB757;--shiki-light:#702C00}html pre.shiki code .sZ8jY, html code.shiki .sZ8jY{--shiki-default:#032563;--shiki-dark:#ADDCFF;--shiki-light:#032563}html pre.shiki code .sPXB4, html code.shiki .sPXB4{--shiki-default:#023B95;--shiki-dark:#91CBFF;--shiki-light:#023B95}html pre.shiki code .sPARh, html code.shiki .sPARh{--shiki-default:#A0111F;--shiki-dark:#FF9492;--shiki-light:#A0111F}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 .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);}",{"title":310,"searchDepth":324,"depth":324,"links":828},[829,830,831,837,838,839,840,841,842,843,844],{"id":191,"depth":324,"text":192},{"id":224,"depth":324,"text":225},{"id":252,"depth":324,"text":253,"children":832},[833,834,835,836],{"id":257,"depth":364,"text":258},{"id":264,"depth":364,"text":265},{"id":280,"depth":364,"text":281},{"id":299,"depth":364,"text":300},{"id":468,"depth":324,"text":469},{"id":475,"depth":324,"text":476},{"id":482,"depth":324,"text":483},{"id":489,"depth":324,"text":490},{"id":641,"depth":324,"text":642},{"id":671,"depth":324,"text":672},{"id":699,"depth":324,"text":700},{"id":787,"depth":324,"text":788},"A performance-focused comparison of Astro and Next.js for content-heavy sites, including what each ships by default and how to get the best from either.","md",{"slug":12,"type":848,"breadcrumb":849,"datePublished":857,"dateModified":857},"article",[850,853,854,855],{"name":851,"url":852},"Home","\u002F",{"name":26,"url":25},{"name":21,"url":20},{"name":5,"url":856},"\u002Fframework-performance\u002Fastro-and-sveltekit-performance\u002Fastro-vs-nextjs-for-content-site-performance\u002F","2026-10-06",true,"\u002Fframework-performance\u002Fastro-and-sveltekit-performance\u002Fastro-vs-nextjs-for-content-site-performance",{"title":5,"description":861},"Compare Astro and Next.js for blogs, docs and marketing sites on JavaScript shipped, LCP, INP, build times and interactivity, with guidance on when each fits best.","framework-performance\u002Fastro-and-sveltekit-performance\u002Fastro-vs-nextjs-for-content-site-performance\u002Findex","7GEfCgZM5HmXM_OBB1bO1OB7jStmKs5P-nzvVcsyz84",[865,868],{"title":21,"path":866,"stem":867,"children":-1},"\u002Fframework-performance\u002Fastro-and-sveltekit-performance","framework-performance\u002Fastro-and-sveltekit-performance\u002Findex",{"title":869,"path":870,"stem":871,"children":-1},"Choosing Astro Client Directives","\u002Fframework-performance\u002Fastro-and-sveltekit-performance\u002Fchoosing-astro-client-directives","framework-performance\u002Fastro-and-sveltekit-performance\u002Fchoosing-astro-client-directives\u002Findex",1791308074729]