const{Fragment:e,jsx:n,jsxs:l}=arguments[0];function _createMdxContent(r){const c={a:"a",code:"code",figure:"figure",h2:"h2",h3:"h3",h4:"h4",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",span:"span",strong:"strong",ul:"ul",...r.components};return l(e,{children:[n(c.h2,{id:"the-typical-vulnerability",children:n(c.a,{className:"subheading-anchor",href:"#the-typical-vulnerability",children:"The typical vulnerability"})}),"\n",l(c.p,{children:["Fetching data in ",n(c.code,{children:"Next. Js"})," feels pretty straightforward foe the first time.\nJust use async await in react server component and good to go."]}),"\n",n(c.p,{children:"If user authenticate required await headers, cookies or session as you required."}),"\n",n(c.p,{children:"Here's what flow looks like :"}),"\n",n(c.p,{children:"Create an async function, grab some data with Prisma (suppose all the TODO from DB), call it inside your RSC (react server component), and you're done, right?"}),"\n",n(c.p,{children:"Unfortunately, NO\nIt's not simple actually. What you have done is created a POST request. Not GET but a POST request because that's how Next. Js works under the hood."}),"\n",n(c.p,{children:"So what's the issue with POST request?\nThe issue is -"}),"\n",l(c.ul,{children:["\n",n(c.li,{children:"It blocks parallelism"}),"\n",n(c.li,{children:"It doesn't support caching"}),"\n",n(c.li,{children:"Bypass your authenticate"}),"\n",n(c.li,{children:"And also create a security vulnerability"}),"\n"]}),"\n",n(c.h2,{id:"the-problem",children:n(c.a,{className:"subheading-anchor",href:"#the-problem",children:"The problem"})}),"\n",n(c.h3,{id:"server-actions-for-data-fetching",children:n(c.a,{className:"subheading-anchor",href:"#server-actions-for-data-fetching",children:"Server Actions for Data Fetching"})}),"\n",n(c.p,{children:"Let's start with a common example.\nConsider a simple todo application where users can create todos that render below a form."}),"\n",n(c.p,{children:"Here's what the typical (but problematic) implementation looks like:"}),"\n",n(c.figure,{"data-rehype-pretty-code-figure":"",children:n(c.pre,{style:{backgroundColor:"#1e1e2e",color:"#cdd6f4"},tabIndex:"0","data-language":"ts","data-theme":"catppuccin-mocha",children:l(c.code,{"data-language":"ts","data-theme":"catppuccin-mocha",style:{display:"grid"},children:[n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#6C7086",fontStyle:"italic"},children:"// page.tsx"})}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#A6E3A1"},children:"'use client'"}),n(c.span,{style:{color:"#9399B2"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CBA6F7"},children:"export"}),n(c.span,{style:{color:"#CBA6F7"},children:" default"}),n(c.span,{style:{color:"#CBA6F7"},children:" function"}),n(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" Home"}),n(c.span,{style:{color:"#9399B2"},children:"()"}),n(c.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CBA6F7"},children:" const"}),n(c.span,{style:{color:"#9399B2"},children:" ["}),n(c.span,{style:{color:"#CDD6F4"},children:"todos"}),n(c.span,{style:{color:"#9399B2"},children:","}),n(c.span,{style:{color:"#CDD6F4"},children:" setTodos"}),n(c.span,{style:{color:"#9399B2"},children:"]"}),n(c.span,{style:{color:"#94E2D5"},children:" ="}),n(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" useState"}),n(c.span,{style:{color:"#CDD6F4"},children:"([])"}),n(c.span,{style:{color:"#9399B2"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" useEffect"}),n(c.span,{style:{color:"#CDD6F4"},children:"("}),n(c.span,{style:{color:"#9399B2"},children:"()"}),n(c.span,{style:{color:"#94E2D5"},children:" =>"}),n(c.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" getTodos"}),n(c.span,{style:{color:"#CDD6F4"},children:"()"}),n(c.span,{style:{color:"#94E2D5"},children:"."}),n(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"then"}),n(c.span,{style:{color:"#CDD6F4"},children:"(setTodos)"}),n(c.span,{style:{color:"#9399B2"},children:";"})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#9399B2"},children:" },"}),n(c.span,{style:{color:"#CDD6F4"},children:" [])"}),n(c.span,{style:{color:"#9399B2"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#6C7086",fontStyle:"italic"},children:" // Rest of component..."})}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#9399B2"},children:"}"})})]})})}),"\n",n(c.figure,{"data-rehype-pretty-code-figure":"",children:n(c.pre,{style:{backgroundColor:"#1e1e2e",color:"#cdd6f4"},tabIndex:"0","data-language":"ts","data-theme":"catppuccin-mocha",children:l(c.code,{"data-language":"ts","data-theme":"catppuccin-mocha",style:{display:"grid"},children:[n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#6C7086",fontStyle:"italic"},children:"// actions.ts"})}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#A6E3A1"},children:"'use server'"}),n(c.span,{style:{color:"#9399B2"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CBA6F7"},children:"export"}),n(c.span,{style:{color:"#CBA6F7"},children:" async"}),n(c.span,{style:{color:"#CBA6F7"},children:" function"}),n(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" getTodos"}),n(c.span,{style:{color:"#9399B2"},children:"()"}),n(c.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CBA6F7"},children:" const"}),n(c.span,{style:{color:"#CDD6F4"},children:" todos "}),n(c.span,{style:{color:"#94E2D5"},children:"="}),n(c.span,{style:{color:"#CBA6F7"},children:" await"}),n(c.span,{style:{color:"#CDD6F4"},children:" prisma"}),n(c.span,{style:{color:"#94E2D5"},children:"."}),n(c.span,{style:{color:"#CDD6F4"},children:"todo"}),n(c.span,{style:{color:"#94E2D5"},children:"."}),n(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"findMany"}),n(c.span,{style:{color:"#CDD6F4"},children:"()"}),n(c.span,{style:{color:"#9399B2"},children:";"})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CBA6F7"},children:" return"}),n(c.span,{style:{color:"#CDD6F4"},children:" todos"}),n(c.span,{style:{color:"#9399B2"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#9399B2"},children:"}"})})]})})}),"\n",n(c.p,{children:"This works, but it creates several critical problems:"}),"\n",n(c.h4,{id:"problem-1--post-requests-for-data-fetching",children:n(c.a,{className:"subheading-anchor",href:"#problem-1--post-requests-for-data-fetching",children:"Problem 1 : POST Requests for Data Fetching"})}),"\n",n(c.p,{children:"When you use server actions to fetch data, you're creating POST requests instead of GET requests."}),"\n",n(c.p,{children:"I'd say open your browser tab and fetch something using server action and the request will be shown as POST Request."}),"\n",n(c.p,{children:n(c.img,{src:"/blog/imported/nextjs-data-fetching/inline-1.png",alt:"POST Req"})}),"\n",n(c.h4,{id:"problem-2--no-parallelism",children:n(c.a,{className:"subheading-anchor",href:"#problem-2--no-parallelism",children:"Problem 2 : No Parallelism"})}),"\n",n(c.p,{children:"The bigger issue is that POST requests run successively, not in parallel.\nIf I we suppose request takes 15-second for the data fetching function and try to create a new todo while data is loading, the creation request waits for the fetch to complete first. This destroys performance."}),"\n",n(c.p,{children:"Here's what happens:"}),"\n",l(c.ul,{children:["\n",n(c.li,{children:"Request 1 (fetch): 15 seconds"}),"\n",n(c.li,{children:"Request 2 (create): Waits for Request 1 to finish, then executes"}),"\n",n(c.li,{children:"Total time: 15+ seconds"}),"\n"]}),"\n",n(c.p,{children:n(c.img,{src:"/blog/imported/nextjs-data-fetching/inline-2.png",alt:"What we doing"})}),"\n",n(c.p,{children:"What we want:"}),"\n",l(c.ul,{children:["\n",n(c.li,{children:"Request 1 (fetch): 15 seconds"}),"\n",n(c.li,{children:"Request 2 (create): 0.01 seconds (runs in parallel)"}),"\n",n(c.li,{children:"Total time: ~15 seconds"}),"\n"]}),"\n",n(c.p,{children:n(c.img,{src:"/blog/imported/nextjs-data-fetching/inline-3.png",alt:"What we want"})}),"\n",n(c.h4,{id:"solution-1-server-components-with-streaming",children:n(c.a,{className:"subheading-anchor",href:"#solution-1-server-components-with-streaming",children:"Solution 1: Server Components with Streaming"})}),"\n",n(c.p,{children:"The first step is moving data fetching to server components.\nServer components let you fetch data and render parts of your UI on the server, with optional caching and streaming."}),"\n",n(c.p,{children:"Example :"}),"\n",n(c.figure,{"data-rehype-pretty-code-figure":"",children:n(c.pre,{style:{backgroundColor:"#1e1e2e",color:"#cdd6f4"},tabIndex:"0","data-language":"typescript","data-theme":"catppuccin-mocha",children:l(c.code,{"data-language":"typescript","data-theme":"catppuccin-mocha",style:{display:"grid"},children:[n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#6C7086",fontStyle:"italic"},children:"// page.tsx (Server Component)"})}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CBA6F7"},children:"import"}),n(c.span,{style:{color:"#9399B2"},children:" {"}),n(c.span,{style:{color:"#CDD6F4"},children:" Suspense "}),n(c.span,{style:{color:"#9399B2"},children:"}"}),n(c.span,{style:{color:"#CBA6F7"},children:" from"}),n(c.span,{style:{color:"#A6E3A1"},children:" 'react'"})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CBA6F7"},children:"import"}),n(c.span,{style:{color:"#CDD6F4"},children:" TodoForm "}),n(c.span,{style:{color:"#CBA6F7"},children:"from"}),n(c.span,{style:{color:"#A6E3A1"},children:" './components/todo-form'"})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CBA6F7"},children:"import"}),n(c.span,{style:{color:"#CDD6F4"},children:" TodoList "}),n(c.span,{style:{color:"#CBA6F7"},children:"from"}),n(c.span,{style:{color:"#A6E3A1"},children:" './components/todo-list'"})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CBA6F7"},children:"export"}),n(c.span,{style:{color:"#CBA6F7"},children:" default"}),n(c.span,{style:{color:"#CBA6F7"},children:" function"}),n(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" Home"}),n(c.span,{style:{color:"#9399B2"},children:"()"}),n(c.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CBA6F7"},children:" return"}),n(c.span,{style:{color:"#CDD6F4"},children:" ("})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CDD6F4"},children:" <"}),n(c.span,{style:{color:"#F9E2AF",fontStyle:"italic"},children:"div"}),n(c.span,{style:{color:"#CDD6F4"},children:">"})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#94E2D5"},children:" <"}),n(c.span,{style:{color:"#CDD6F4"},children:"TodoForm "}),n(c.span,{style:{color:"#94E2D5"},children:"/>"})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#94E2D5"},children:" <"}),n(c.span,{style:{color:"#CDD6F4"},children:"Suspense fallback"}),n(c.span,{style:{color:"#94E2D5"},children:"="}),n(c.span,{style:{color:"#9399B2"},children:"{"}),n(c.span,{style:{color:"#CDD6F4"},children:"

Loading"}),n(c.span,{style:{color:"#94E2D5"},children:"..."}),n(c.span,{style:{color:"#9399B2"},children:"}"}),n(c.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#94E2D5"},children:" <"}),n(c.span,{style:{color:"#CDD6F4"},children:"TodoList "}),n(c.span,{style:{color:"#94E2D5"},children:"/>"})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#CDD6F4"},children:" )"})}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#9399B2"},children:"}"})})]})})}),"\n",n(c.figure,{"data-rehype-pretty-code-figure":"",children:n(c.pre,{style:{backgroundColor:"#1e1e2e",color:"#cdd6f4"},tabIndex:"0","data-language":"typescript","data-theme":"catppuccin-mocha",children:l(c.code,{"data-language":"typescript","data-theme":"catppuccin-mocha",style:{display:"grid"},children:[n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#6C7086",fontStyle:"italic"},children:"// components/todo-form.tsx (Client Component)"})}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#A6E3A1"},children:"'use client'"}),n(c.span,{style:{color:"#9399B2"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CBA6F7"},children:"export"}),n(c.span,{style:{color:"#CBA6F7"},children:" default"}),n(c.span,{style:{color:"#CBA6F7"},children:" function"}),n(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" TodoForm"}),n(c.span,{style:{color:"#9399B2"},children:"()"}),n(c.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#6C7086",fontStyle:"italic"},children:" // Form logic with client-side validation"})}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#6C7086",fontStyle:"italic"},children:" // and server action for mutations"})}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#9399B2"},children:"}"})})]})})}),"\n",n(c.figure,{"data-rehype-pretty-code-figure":"",children:n(c.pre,{style:{backgroundColor:"#1e1e2e",color:"#cdd6f4"},tabIndex:"0","data-language":"typescript","data-theme":"catppuccin-mocha",children:l(c.code,{"data-language":"typescript","data-theme":"catppuccin-mocha",style:{display:"grid"},children:[n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#6C7086",fontStyle:"italic"},children:"// components/todo-list.tsx (Server Component)"})}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CBA6F7"},children:"import"}),n(c.span,{style:{color:"#CDD6F4"},children:" prisma "}),n(c.span,{style:{color:"#CBA6F7"},children:"from"}),n(c.span,{style:{color:"#A6E3A1"},children:" '@/lib/prisma'"})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CBA6F7"},children:"async"}),n(c.span,{style:{color:"#CBA6F7"},children:" function"}),n(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" getTodos"}),n(c.span,{style:{color:"#9399B2"},children:"()"}),n(c.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CBA6F7"},children:" return"}),n(c.span,{style:{color:"#CBA6F7"},children:" await"}),n(c.span,{style:{color:"#CDD6F4"},children:" prisma"}),n(c.span,{style:{color:"#94E2D5"},children:"."}),n(c.span,{style:{color:"#CDD6F4"},children:"todo"}),n(c.span,{style:{color:"#94E2D5"},children:"."}),n(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"findMany"}),n(c.span,{style:{color:"#CDD6F4"},children:"()"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#9399B2"},children:"}"})}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CBA6F7"},children:"export"}),n(c.span,{style:{color:"#CBA6F7"},children:" default"}),n(c.span,{style:{color:"#CBA6F7"},children:" async"}),n(c.span,{style:{color:"#CBA6F7"},children:" function"}),n(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" TodoList"}),n(c.span,{style:{color:"#9399B2"},children:"()"}),n(c.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CBA6F7"},children:" const"}),n(c.span,{style:{color:"#CDD6F4"},children:" todos "}),n(c.span,{style:{color:"#94E2D5"},children:"="}),n(c.span,{style:{color:"#CBA6F7"},children:" await"}),n(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" getTodos"}),n(c.span,{style:{color:"#CDD6F4"},children:"()"})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CBA6F7"},children:" return"}),n(c.span,{style:{color:"#CDD6F4"},children:" ("})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CDD6F4"},children:" <"}),n(c.span,{style:{color:"#F9E2AF",fontStyle:"italic"},children:"div"}),n(c.span,{style:{color:"#CDD6F4"},children:">"})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#9399B2"},children:" {"}),n(c.span,{style:{color:"#EBA0AC",fontStyle:"italic"},children:"todos"}),n(c.span,{style:{color:"#CDD6F4"},children:"."}),n(c.span,{style:{color:"#EBA0AC",fontStyle:"italic"},children:"map"}),n(c.span,{style:{color:"#CDD6F4"},children:"("}),n(c.span,{style:{color:"#EBA0AC",fontStyle:"italic"},children:"todo"}),n(c.span,{style:{color:"#94E2D5"},children:" =>"}),n(c.span,{style:{color:"#CDD6F4"},children:" ("})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#94E2D5"},children:" <"}),n(c.span,{style:{color:"#CDD6F4"},children:"div key"}),n(c.span,{style:{color:"#94E2D5"},children:"="}),n(c.span,{style:{color:"#9399B2"},children:"{"}),n(c.span,{style:{color:"#CDD6F4"},children:"todo.id"}),n(c.span,{style:{color:"#9399B2"},children:"}"}),n(c.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CDD6F4"},children:" <"}),n(c.span,{style:{color:"#F9E2AF",fontStyle:"italic"},children:"h3"}),n(c.span,{style:{color:"#CDD6F4"},children:">"}),n(c.span,{style:{color:"#9399B2"},children:"{"}),n(c.span,{style:{color:"#CDD6F4"},children:"todo.title"}),n(c.span,{style:{color:"#9399B2"},children:"}"}),n(c.span,{style:{color:"#94E2D5"},children:""})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CDD6F4"},children:" <"}),n(c.span,{style:{color:"#F9E2AF",fontStyle:"italic"},children:"p"}),n(c.span,{style:{color:"#CDD6F4"},children:">"}),n(c.span,{style:{color:"#9399B2"},children:"{"}),n(c.span,{style:{color:"#CDD6F4"},children:"todo.content"}),n(c.span,{style:{color:"#9399B2"},children:"}"}),n(c.span,{style:{color:"#94E2D5"},children:""})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CDD6F4"},children:" ))"}),n(c.span,{style:{color:"#9399B2"},children:"}"})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#CDD6F4"},children:" )"})}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#9399B2"},children:"}"})})]})})}),"\n",n(c.p,{children:"This approach:"}),"\n",l(c.ul,{children:["\n",n(c.li,{children:"Uses GET requests (implicit in server components)"}),"\n",n(c.li,{children:"Enables parallel request execution"}),"\n",n(c.li,{children:"Provides streaming with Suspense boundaries"}),"\n",n(c.li,{children:"Maintains proper separation between server and client code"}),"\n"]}),"\n",n(c.h4,{id:"the-security-problem-session-verification",children:n(c.a,{className:"subheading-anchor",href:"#the-security-problem-session-verification",children:"The Security Problem: Session Verification"})}),"\n",n(c.p,{children:"Now let's add authentication.\nA common mistake is verifying sessions only at the page level:"}),"\n",n(c.figure,{"data-rehype-pretty-code-figure":"",children:n(c.pre,{style:{backgroundColor:"#1e1e2e",color:"#cdd6f4"},tabIndex:"0","data-language":"typescript","data-theme":"catppuccin-mocha",children:l(c.code,{"data-language":"typescript","data-theme":"catppuccin-mocha",style:{display:"grid"},children:[n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#6C7086",fontStyle:"italic"},children:"// page.tsx"})}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CBA6F7"},children:"export"}),n(c.span,{style:{color:"#CBA6F7"},children:" default"}),n(c.span,{style:{color:"#CBA6F7"},children:" async"}),n(c.span,{style:{color:"#CBA6F7"},children:" function"}),n(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" Home"}),n(c.span,{style:{color:"#9399B2"},children:"()"}),n(c.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CBA6F7"},children:" const"}),n(c.span,{style:{color:"#9399B2"},children:" {"}),n(c.span,{style:{color:"#CDD6F4"},children:" getUser "}),n(c.span,{style:{color:"#9399B2"},children:"}"}),n(c.span,{style:{color:"#94E2D5"},children:" ="}),n(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" getServerSession"}),n(c.span,{style:{color:"#CDD6F4"},children:"()"})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CBA6F7"},children:" const"}),n(c.span,{style:{color:"#CDD6F4"},children:" user "}),n(c.span,{style:{color:"#94E2D5"},children:"="}),n(c.span,{style:{color:"#CBA6F7"},children:" await"}),n(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" getUser"}),n(c.span,{style:{color:"#CDD6F4"},children:"()"})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CBA6F7"},children:" if"}),n(c.span,{style:{color:"#CDD6F4"},children:" ("}),n(c.span,{style:{color:"#94E2D5"},children:"!"}),n(c.span,{style:{color:"#CDD6F4"},children:"user) "}),n(c.span,{style:{color:"#9399B2"},children:"{"})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" redirect"}),n(c.span,{style:{color:"#CDD6F4"},children:"("}),n(c.span,{style:{color:"#A6E3A1"},children:"'/api/auth/login'"}),n(c.span,{style:{color:"#CDD6F4"},children:")"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#9399B2"},children:" }"})}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CBA6F7"},children:" return"}),n(c.span,{style:{color:"#CDD6F4"},children:" ("})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#6C7086",fontStyle:"italic"},children:" // Component JSX"})}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#CDD6F4"},children:" )"})}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#9399B2"},children:"}"})})]})})}),"\n",l(c.p,{children:["This seems secure, but it creates a critical vulnerability.\nWhat happens when you extract the ",n(c.code,{children:"TodoList"})," component for reuse?\nSuppose you created a ",n(c.code,{children:"/test"})," route and imported the ",n(c.code,{children:"TodoList"})," component and forgot to do validation there or If another developer creates a new route and imports your component:"]}),"\n",n(c.figure,{"data-rehype-pretty-code-figure":"",children:n(c.pre,{style:{backgroundColor:"#1e1e2e",color:"#cdd6f4"},tabIndex:"0","data-language":"typescript","data-theme":"catppuccin-mocha",children:l(c.code,{"data-language":"typescript","data-theme":"catppuccin-mocha",style:{display:"grid"},children:[n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#6C7086",fontStyle:"italic"},children:"// app/test/page.tsx"})}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CBA6F7"},children:"import"}),n(c.span,{style:{color:"#CDD6F4"},children:" TodoList "}),n(c.span,{style:{color:"#CBA6F7"},children:"from"}),n(c.span,{style:{color:"#A6E3A1"},children:" '@/components/todo-list'"})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CBA6F7"},children:"export"}),n(c.span,{style:{color:"#CBA6F7"},children:" default"}),n(c.span,{style:{color:"#CBA6F7"},children:" function"}),n(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" TestPage"}),n(c.span,{style:{color:"#9399B2"},children:"()"}),n(c.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CBA6F7"},children:" return"}),n(c.span,{style:{color:"#CDD6F4"},children:" <"}),n(c.span,{style:{color:"#F9E2AF",fontStyle:"italic"},children:"TodoList"}),n(c.span,{style:{color:"#CDD6F4"},children:" /> "}),n(c.span,{style:{color:"#6C7086",fontStyle:"italic"},children:"// No session verification!"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#9399B2"},children:"}"})})]})})}),"\n",l(c.p,{children:["Visiting ",n(c.code,{children:"/test"})," in an incognito browser will display the todos without authentication.\nThe session check only exists at the page level, not where the data is actually fetched."]}),"\n",n(c.h4,{id:"solution-2-data-access-layer",children:n(c.a,{className:"subheading-anchor",href:"#solution-2-data-access-layer",children:"Solution 2: Data Access Layer"})}),"\n",l(c.p,{children:["The ",n(c.a,{href:"https://nextjs.org/docs/app/building-your-application/data-fetching/patterns#creating-a-data-access-layer",target:"_blank",rel:"nofollow",children:"Next.js documentation recommends"})," creating a data access layer to centralize data requests and authorization logic."]}),"\n",n(c.p,{children:"Here's the implementation:"}),"\n",n(c.figure,{"data-rehype-pretty-code-figure":"",children:n(c.pre,{style:{backgroundColor:"#1e1e2e",color:"#cdd6f4"},tabIndex:"0","data-language":"typescript","data-theme":"catppuccin-mocha",children:l(c.code,{"data-language":"typescript","data-theme":"catppuccin-mocha",style:{display:"grid"},children:[n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#6C7086",fontStyle:"italic"},children:"// app/data/user/require-user.ts"})}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CBA6F7"},children:"import"}),n(c.span,{style:{color:"#9399B2"},children:" {"}),n(c.span,{style:{color:"#CDD6F4"},children:" redirect "}),n(c.span,{style:{color:"#9399B2"},children:"}"}),n(c.span,{style:{color:"#CBA6F7"},children:" from"}),n(c.span,{style:{color:"#A6E3A1"},children:" 'next/navigation'"}),n(c.span,{style:{color:"#9399B2"},children:";"})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CBA6F7"},children:"import"}),n(c.span,{style:{color:"#9399B2"},children:" {"}),n(c.span,{style:{color:"#CDD6F4"},children:" cache "}),n(c.span,{style:{color:"#9399B2"},children:"}"}),n(c.span,{style:{color:"#CBA6F7"},children:" from"}),n(c.span,{style:{color:"#A6E3A1"},children:" 'react'"}),n(c.span,{style:{color:"#9399B2"},children:";"})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CBA6F7"},children:"import"}),n(c.span,{style:{color:"#A6E3A1"},children:" 'server-only'"}),n(c.span,{style:{color:"#9399B2"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CBA6F7"},children:"export"}),n(c.span,{style:{color:"#CBA6F7"},children:" const"}),n(c.span,{style:{color:"#CDD6F4"},children:" requireUser "}),n(c.span,{style:{color:"#94E2D5"},children:"="}),n(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" cache"}),n(c.span,{style:{color:"#CDD6F4"},children:"("}),n(c.span,{style:{color:"#CBA6F7"},children:"async"}),n(c.span,{style:{color:"#9399B2"},children:" ()"}),n(c.span,{style:{color:"#94E2D5"},children:" =>"}),n(c.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CBA6F7"},children:" const"}),n(c.span,{style:{color:"#9399B2"},children:" {"}),n(c.span,{style:{color:"#CDD6F4"},children:" getUser "}),n(c.span,{style:{color:"#9399B2"},children:"}"}),n(c.span,{style:{color:"#94E2D5"},children:" ="}),n(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" getServerSession"}),n(c.span,{style:{color:"#CDD6F4"},children:"()"}),n(c.span,{style:{color:"#9399B2"},children:";"})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CBA6F7"},children:" const"}),n(c.span,{style:{color:"#CDD6F4"},children:" user "}),n(c.span,{style:{color:"#94E2D5"},children:"="}),n(c.span,{style:{color:"#CBA6F7"},children:" await"}),n(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" getUser"}),n(c.span,{style:{color:"#CDD6F4"},children:"()"}),n(c.span,{style:{color:"#9399B2"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CBA6F7"},children:" if"}),n(c.span,{style:{color:"#CDD6F4"},children:" ("}),n(c.span,{style:{color:"#94E2D5"},children:"!"}),n(c.span,{style:{color:"#CDD6F4"},children:"user) "}),n(c.span,{style:{color:"#9399B2"},children:"{"})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" redirect"}),n(c.span,{style:{color:"#CDD6F4"},children:"("}),n(c.span,{style:{color:"#A6E3A1"},children:"'/api/auth/login'"}),n(c.span,{style:{color:"#CDD6F4"},children:")"}),n(c.span,{style:{color:"#9399B2"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#9399B2"},children:" }"})}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CBA6F7"},children:" return"}),n(c.span,{style:{color:"#CDD6F4"},children:" user"}),n(c.span,{style:{color:"#9399B2"},children:";"})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#9399B2"},children:"}"}),n(c.span,{style:{color:"#CDD6F4"},children:")"}),n(c.span,{style:{color:"#9399B2"},children:";"})]})]})})}),"\n",n(c.figure,{"data-rehype-pretty-code-figure":"",children:n(c.pre,{style:{backgroundColor:"#1e1e2e",color:"#cdd6f4"},tabIndex:"0","data-language":"typescript","data-theme":"catppuccin-mocha",children:l(c.code,{"data-language":"typescript","data-theme":"catppuccin-mocha",style:{display:"grid"},children:[n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#6C7086",fontStyle:"italic"},children:"// app/data/todo/get-todos.ts"})}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CBA6F7"},children:"import"}),n(c.span,{style:{color:"#CDD6F4"},children:" prisma "}),n(c.span,{style:{color:"#CBA6F7"},children:"from"}),n(c.span,{style:{color:"#A6E3A1"},children:" '@/lib/prisma'"}),n(c.span,{style:{color:"#9399B2"},children:";"})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CBA6F7"},children:"import"}),n(c.span,{style:{color:"#A6E3A1"},children:" 'server-only'"}),n(c.span,{style:{color:"#9399B2"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CBA6F7"},children:"import"}),n(c.span,{style:{color:"#9399B2"},children:" {"}),n(c.span,{style:{color:"#CDD6F4"},children:" requireUser "}),n(c.span,{style:{color:"#9399B2"},children:"}"}),n(c.span,{style:{color:"#CBA6F7"},children:" from"}),n(c.span,{style:{color:"#A6E3A1"},children:" '../user/require-user'"}),n(c.span,{style:{color:"#9399B2"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CBA6F7"},children:"export"}),n(c.span,{style:{color:"#CBA6F7"},children:" async"}),n(c.span,{style:{color:"#CBA6F7"},children:" function"}),n(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" getTodos"}),n(c.span,{style:{color:"#9399B2"},children:"()"}),n(c.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CBA6F7"},children:" await"}),n(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" requireUser"}),n(c.span,{style:{color:"#CDD6F4"},children:"()"}),n(c.span,{style:{color:"#9399B2"},children:";"}),n(c.span,{style:{color:"#6C7086",fontStyle:"italic"},children:" // Verify session before fetching data"})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CBA6F7"},children:" return"}),n(c.span,{style:{color:"#CBA6F7"},children:" await"}),n(c.span,{style:{color:"#CDD6F4"},children:" prisma"}),n(c.span,{style:{color:"#94E2D5"},children:"."}),n(c.span,{style:{color:"#CDD6F4"},children:"todo"}),n(c.span,{style:{color:"#94E2D5"},children:"."}),n(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"findMany"}),n(c.span,{style:{color:"#CDD6F4"},children:"()"}),n(c.span,{style:{color:"#9399B2"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#9399B2"},children:"}"})})]})})}),"\n",n(c.p,{children:"\\"}),"\n",n(c.figure,{"data-rehype-pretty-code-figure":"",children:n(c.pre,{style:{backgroundColor:"#1e1e2e",color:"#cdd6f4"},tabIndex:"0","data-language":"typescript","data-theme":"catppuccin-mocha",children:l(c.code,{"data-language":"typescript","data-theme":"catppuccin-mocha",style:{display:"grid"},children:[n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#6C7086",fontStyle:"italic"},children:"// components/todo-list.tsx"})}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CBA6F7"},children:"import"}),n(c.span,{style:{color:"#9399B2"},children:" {"}),n(c.span,{style:{color:"#CDD6F4"},children:" getTodos "}),n(c.span,{style:{color:"#9399B2"},children:"}"}),n(c.span,{style:{color:"#CBA6F7"},children:" from"}),n(c.span,{style:{color:"#A6E3A1"},children:" '@/app/data/todo/get-todos'"})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CBA6F7"},children:"export"}),n(c.span,{style:{color:"#CBA6F7"},children:" default"}),n(c.span,{style:{color:"#CBA6F7"},children:" async"}),n(c.span,{style:{color:"#CBA6F7"},children:" function"}),n(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" TodoList"}),n(c.span,{style:{color:"#9399B2"},children:"()"}),n(c.span,{style:{color:"#9399B2"},children:" {"})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CBA6F7"},children:" const"}),n(c.span,{style:{color:"#CDD6F4"},children:" todos "}),n(c.span,{style:{color:"#94E2D5"},children:"="}),n(c.span,{style:{color:"#CBA6F7"},children:" await"}),n(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" getTodos"}),n(c.span,{style:{color:"#CDD6F4"},children:"()"})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CBA6F7"},children:" return"}),n(c.span,{style:{color:"#CDD6F4"},children:" ("})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CDD6F4"},children:" <"}),n(c.span,{style:{color:"#F9E2AF",fontStyle:"italic"},children:"div"}),n(c.span,{style:{color:"#CDD6F4"},children:">"})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#9399B2"},children:" {"}),n(c.span,{style:{color:"#EBA0AC",fontStyle:"italic"},children:"todos"}),n(c.span,{style:{color:"#CDD6F4"},children:"."}),n(c.span,{style:{color:"#EBA0AC",fontStyle:"italic"},children:"map"}),n(c.span,{style:{color:"#CDD6F4"},children:"("}),n(c.span,{style:{color:"#EBA0AC",fontStyle:"italic"},children:"todo"}),n(c.span,{style:{color:"#94E2D5"},children:" =>"}),n(c.span,{style:{color:"#CDD6F4"},children:" ("})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#94E2D5"},children:" <"}),n(c.span,{style:{color:"#CDD6F4"},children:"div key"}),n(c.span,{style:{color:"#94E2D5"},children:"="}),n(c.span,{style:{color:"#9399B2"},children:"{"}),n(c.span,{style:{color:"#CDD6F4"},children:"todo.id"}),n(c.span,{style:{color:"#9399B2"},children:"}"}),n(c.span,{style:{color:"#94E2D5"},children:">"})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CDD6F4"},children:" <"}),n(c.span,{style:{color:"#F9E2AF",fontStyle:"italic"},children:"h3"}),n(c.span,{style:{color:"#CDD6F4"},children:">"}),n(c.span,{style:{color:"#9399B2"},children:"{"}),n(c.span,{style:{color:"#CDD6F4"},children:"todo.title"}),n(c.span,{style:{color:"#9399B2"},children:"}"}),n(c.span,{style:{color:"#94E2D5"},children:""})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CDD6F4"},children:" <"}),n(c.span,{style:{color:"#F9E2AF",fontStyle:"italic"},children:"p"}),n(c.span,{style:{color:"#CDD6F4"},children:">"}),n(c.span,{style:{color:"#9399B2"},children:"{"}),n(c.span,{style:{color:"#CDD6F4"},children:"todo.content"}),n(c.span,{style:{color:"#9399B2"},children:"}"}),n(c.span,{style:{color:"#94E2D5"},children:""})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CDD6F4"},children:" ))"}),n(c.span,{style:{color:"#9399B2"},children:"}"})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#94E2D5"},children:" "})]}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#CDD6F4"},children:" )"})}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#9399B2"},children:"}"})})]})})}),"\n",n(c.h3,{id:"benefits-of-the-data-access-layer",children:n(c.a,{className:"subheading-anchor",href:"#benefits-of-the-data-access-layer",children:"Benefits of the Data Access Layer"})}),"\n",l(c.ol,{children:["\n",l(c.li,{children:["\n",l(c.p,{children:[n(c.strong,{children:"Single Source of Truth"}),": All data-related code is centralized in one place, making updates and debugging easier."]}),"\n"]}),"\n",l(c.li,{children:["\n",l(c.p,{children:[n(c.strong,{children:"Natural Security Checkpoint"}),": Session verification happens where data is fetched, preventing accidental data leaks when components are reused."]}),"\n"]}),"\n",l(c.li,{children:["\n",l(c.p,{children:[n(c.strong,{children:"Organized Structure"}),": Create folders for different data types:"]}),"\n",n(c.figure,{"data-rehype-pretty-code-figure":"",children:n(c.pre,{style:{backgroundColor:"#1e1e2e",color:"#cdd6f4"},tabIndex:"0","data-language":"bash","data-theme":"catppuccin-mocha",children:l(c.code,{"data-language":"bash","data-theme":"catppuccin-mocha",style:{display:"grid"},children:[n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"app/data/"})}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"├──"}),n(c.span,{style:{color:"#A6E3A1"},children:" user/"})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"│"}),n(c.span,{style:{color:"#A6E3A1"},children:" ├──"}),n(c.span,{style:{color:"#A6E3A1"},children:" require-user.ts"})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"│"}),n(c.span,{style:{color:"#A6E3A1"},children:" ├──"}),n(c.span,{style:{color:"#A6E3A1"},children:" get-user.ts"})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"│"}),n(c.span,{style:{color:"#A6E3A1"},children:" └──"}),n(c.span,{style:{color:"#A6E3A1"},children:" get-all-users.ts"})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:"└──"}),n(c.span,{style:{color:"#A6E3A1"},children:" todo/"})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" ├──"}),n(c.span,{style:{color:"#A6E3A1"},children:" get-todos.ts"})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" ├──"}),n(c.span,{style:{color:"#A6E3A1"},children:" get-todo.ts"})]}),"\n",l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#89B4FA",fontStyle:"italic"},children:" └──"}),n(c.span,{style:{color:"#A6E3A1"},children:" get-admin-todos.ts"})]})]})})}),"\n"]}),"\n"]}),"\n",n(c.h4,{id:"performance-optimization-react-cache",children:n(c.a,{className:"subheading-anchor",href:"#performance-optimization-react-cache",children:"Performance Optimization: React Cache"})}),"\n",l(c.p,{children:["Notice the ",n(c.code,{children:"cache()"})," function wrapping our ",n(c.code,{children:"requireUser"})," function.\nThis is crucial for performance."]}),"\n",n(c.p,{children:"Imagine a dashboard that needs multiple data sources:"}),"\n",l(c.ul,{children:["\n",n(c.li,{children:"Get subscribers"}),"\n",n(c.li,{children:"Get total customers"}),"\n",n(c.li,{children:"Get revenue for last 30 days"}),"\n",n(c.li,{children:"Get recent orders"}),"\n",n(c.li,{children:"And 6 more data points"}),"\n"]}),"\n",l(c.p,{children:["Without caching, ",n(c.code,{children:"requireUser()"})," would run 10 times for a single page render. With React's ",n(c.code,{children:"cache()"})," function, it runs once and caches the result for that render pass."]}),"\n",n(c.p,{children:"The cache is scoped to a single server-side render and doesn't persist between page navigations, making it perfect for this use case."}),"\n",n(c.h4,{id:"security-enhancement-server-only",children:n(c.a,{className:"subheading-anchor",href:"#security-enhancement-server-only",children:"Security Enhancement: Server-Only"})}),"\n",l(c.p,{children:["Add the ",n(c.code,{children:"server-only"})," package to prevent accidental client-side usage:"]}),"\n",n(c.figure,{"data-rehype-pretty-code-figure":"",children:n(c.pre,{style:{backgroundColor:"#1e1e2e",color:"#cdd6f4"},tabIndex:"0","data-language":"typescript","data-theme":"catppuccin-mocha",children:l(c.code,{"data-language":"typescript","data-theme":"catppuccin-mocha",style:{display:"grid"},children:[l(c.span,{"data-line":"",children:[n(c.span,{style:{color:"#CBA6F7"},children:"import"}),n(c.span,{style:{color:"#A6E3A1"},children:" 'server-only'"}),n(c.span,{style:{color:"#9399B2"},children:";"})]}),"\n",n(c.span,{"data-line":"",children:" "}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#6C7086",fontStyle:"italic"},children:"// This import ensures the function only runs on the server"})}),"\n",n(c.span,{"data-line":"",children:n(c.span,{style:{color:"#6C7086",fontStyle:"italic"},children:"// and throws a build-time error if imported in client components"})})]})})}),"\n",l(c.p,{children:["This is different from the ",n(c.code,{children:"'use server'"})," directive:"]}),"\n",l(c.ul,{children:["\n",l(c.li,{children:[n(c.code,{children:"'use server'"}),": Creates server actions callable from both server and client"]}),"\n",l(c.li,{children:[n(c.code,{children:"'server-only'"}),": Ensures code only executes on the server, throws errors otherwise"]}),"\n"]}),"\n",n(c.h3,{id:"summary",children:n(c.a,{className:"subheading-anchor",href:"#summary",children:"Summary"})}),"\n",l(c.ol,{children:["\n",l(c.li,{children:[n(c.strong,{children:"Use Server Components"})," for data fetching to get proper GET requests and enable parallelism"]}),"\n",l(c.li,{children:[n(c.strong,{children:"Implement a Data Access Layer"})," to centralize data logic and security checks"]}),"\n",l(c.li,{children:[n(c.strong,{children:"Verify Sessions at the Data Layer"})," not just at page level to prevent security vulnerabilities"]}),"\n",l(c.li,{children:[n(c.strong,{children:"Use React's cache() Function"})," to optimize repeated authentication checks"]}),"\n",l(c.li,{children:[n(c.strong,{children:"Add server-only Imports"})," to prevent accidental client-side usage"]}),"\n",l(c.li,{children:[n(c.strong,{children:"Use Suspense Boundaries"})," for streaming and better user experience"]}),"\n"]})]})}return{default:function(e={}){const{wrapper:l}=e.components||{};return l?n(l,{...e,children:n(_createMdxContent,{...e})}):_createMdxContent(e)}};

Web security

Next.JS Data Fetching mistakes & Security vulnerabilities