[{"data":1,"prerenderedAt":161},["ShallowReactive",2],{"blog-en-nextjs-9-static-optimization":3},{"id":4,"title":5,"body":6,"cover":145,"date":146,"description":147,"draft":148,"extension":149,"locale":150,"meta":151,"navigation":152,"path":153,"seo":154,"stem":155,"tags":156,"__hash__":160},"blog\u002Fblog\u002Fen\u002Fnextjs-9-static-optimization.md","Next.js 9: static, fast, considered",{"type":7,"value":8,"toc":141},"minimark",[9,13,18,26,32,35,39,46,128,131,134,137],[10,11,12],"p",{},"I love working with React, but the blunt question — \"how does this actually get to the server, fast?\" — followed me for a long time. Next.js was already my answer before. Yet version 9, released this summer, feels like the moment the framework truly grows up.",[14,15,17],"h2",{"id":16},"automatic-static-optimization","Automatic static optimization",[10,19,20,21,25],{},"The most important step for me: Next.js now detects on its own which pages need no server-side data and renders them automatically as static HTML. I don't have to configure anything. A page without ",[22,23,24],"code",{},"getInitialProps"," is served statically — lightning fast, cacheable, with no live server render.",[27,28,29],"blockquote",{},[10,30,31],{},"The best performance optimization is the one I never have to think about.",[10,33,34],{},"And the beauty of it: it isn't an either-or. On the same site a static landing page can sit right next to a data-driven, server-rendered route. That hybridity is exactly what real projects need — because a website is almost never fully static or fully dynamic.",[14,36,38],{"id":37},"api-routes-without-a-separate-backend","API routes, without a separate backend",[10,40,41,42,45],{},"The second big win is API routes. A file under ",[22,43,44],{},"pages\u002Fapi\u002F"," becomes an endpoint:",[47,48,53],"pre",{"className":49,"code":50,"language":51,"meta":52,"style":52},"language-js shiki shiki-themes github-light github-dark","export default function handler(req, res) {\n  res.status(200).json({ name: \"Max\" });\n}\n","js","",[22,54,55,91,122],{"__ignoreMap":52},[56,57,60,64,67,70,74,78,82,85,88],"span",{"class":58,"line":59},"line",1,[56,61,63],{"class":62},"szBVR","export",[56,65,66],{"class":62}," default",[56,68,69],{"class":62}," function",[56,71,73],{"class":72},"sScJk"," handler",[56,75,77],{"class":76},"sVt8B","(",[56,79,81],{"class":80},"s4XuR","req",[56,83,84],{"class":76},", ",[56,86,87],{"class":80},"res",[56,89,90],{"class":76},") {\n",[56,92,94,97,100,102,106,109,112,115,119],{"class":58,"line":93},2,[56,95,96],{"class":76},"  res.",[56,98,99],{"class":72},"status",[56,101,77],{"class":76},[56,103,105],{"class":104},"sj4cs","200",[56,107,108],{"class":76},").",[56,110,111],{"class":72},"json",[56,113,114],{"class":76},"({ name: ",[56,116,118],{"class":117},"sZZnC","\"Max\"",[56,120,121],{"class":76}," });\n",[56,123,125],{"class":58,"line":124},3,[56,126,127],{"class":76},"}\n",[10,129,130],{},"For a contact form, a newsletter handler, or a small data query, I no longer need a separate backend. Front and back live in the same project, in the same language, with the same deployment. For the smaller brand and portfolio sites I often build, that's an enormous simplification.",[10,132,133],{},"What excites me about Next.js 9 isn't a single feature, but the attitude behind it. The framework makes sensible default decisions, yet hands me control whenever I need it. It takes the boring work off my plate and leaves me the interesting part.",[10,135,136],{},"Fast sites aren't a luxury, they're respect for the people who visit them. Next.js 9 makes it easier to deliver on that respect — and that's exactly why it's becoming my default tool for React projects.",[138,139,140],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}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);}",{"title":52,"searchDepth":93,"depth":93,"links":142},[143,144],{"id":16,"depth":93,"text":17},{"id":37,"depth":93,"text":38},null,"2019-07-09","Next.js 9 brought API routes and automatic static optimization — finally making hybrid static and server-rendered sites effortless.",false,"md","en",{},true,"\u002Fblog\u002Fen\u002Fnextjs-9-static-optimization",{"title":5,"description":147},"blog\u002Fen\u002Fnextjs-9-static-optimization",[157,158,159],"Next.js","React","Web","tibyDy5o-JwjA7QnUZdqzoE31Tkp_JKB6N3I96v2DkY",1781596072532]