1"use strict";(self.webpackChunk_torrta_docs=self.webpackChunk_torrta_docs||[]).push([[255],{501:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>p,frontMatter:()=>s,metadata:()=>r,toc:()=>d});var r=n(3206),a=n(5105),o=n(3331);const s={slug:"how-nextjs-breaks-react-fundamentals",image:"./rendering-runtime.png",draft:!1},i="How Next.js breaks React Fundamentals (Examples)",c={image:n(4357).A,authorsImageUrls:[]},d=[];function l(e){const t={p:"p",...(0,o.R)(),...e.components};return(0,a.jsx)(t.p,{children:"In the front-end world, there's an ongoing war over performance.\nRSC (React Server Components), currently implemented in the Next.js App router, serve as the official weapon aimed at improving startup performance.\nHowever, it seems that in the midst of this battle, we've forgotten about some fundamentals, resulting in a degraded DX (Developer Experience).\nThis article aims to provide examples of such DX issues in the current Next.js API.\nTowards the end, I outline a better proposal."})}function p(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,a.jsx)(t,{...e,children:(0,a.jsx)(l,{...e})}):l(e)}},3206:e=>{e.exports=JSON.parse('{"permalink":"/how-nextjs-breaks-react-fundamentals","source":"@site/blog/2024-03-19-how-nextjs-breaks-react-fundamentals/index.mdx","title":"How Next.js breaks React Fundamentals (Examples)","description":"In the front-end world, there\'s an ongoing war over performance.","date":"2024-03-19T00:00:00.000Z","tags":[],"readingTime":13.05,"hasTruncateMarker":true,"authors":[],"frontMatter":{"slug":"how-nextjs-breaks-react-fundamentals","image":"./rendering-runtime.png","draft":false},"unlisted":false,"prevItem":{"title":"Avoid the State Synchronization Trap","permalink":"/avoid-state-synchronization-trap"},"nextItem":{"title":"Conceptual Model of React and RSC","permalink":"/conceptual-model-of-react-and-rsc"}}')},3331:(e,t,n)=>{n.d(t,{R:()=>s,x:()=>i});var r=n(8101);const a={},o=r.createContext(a);function s(e){const t=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:s(e.components),r.createElement(o.Provider,{value:t},e.children)}},4357:(e,t,n)=>{n.d(t,{A:()=>r});const r=n.p+"assets/images/rendering-runtime-b80dd32377a2dd069b774c13fe0a6880.png"}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.