5b:I[665605,["/_next/static/chunks/cba5371af0a0e3c7.js","/_next/static/chunks/33f24b7135e5d981.js","/_next/static/chunks/9b8464a629951745.js","/_next/static/chunks/de44ad344e8310d7.js","/_next/static/chunks/95dbf5836b7deb31.js","/_next/static/chunks/52e43efbaa9ec428.js","/_next/static/chunks/e3dcee8b49cca7ae.js","/_next/static/chunks/b3401757a62151c5.js","/_next/static/chunks/171b741b95db0439.js","/_next/static/chunks/b02c4b97bbee5da5.js","/_next/static/chunks/fb849bbadd253ef9.js","/_next/static/chunks/90216186efc0da8c.js"],"default"] 5f:I[265904,["/_next/static/chunks/cba5371af0a0e3c7.js","/_next/static/chunks/33f24b7135e5d981.js","/_next/static/chunks/9b8464a629951745.js","/_next/static/chunks/de44ad344e8310d7.js","/_next/static/chunks/95dbf5836b7deb31.js","/_next/static/chunks/52e43efbaa9ec428.js","/_next/static/chunks/e3dcee8b49cca7ae.js","/_next/static/chunks/b3401757a62151c5.js","/_next/static/chunks/171b741b95db0439.js","/_next/static/chunks/b02c4b97bbee5da5.js","/_next/static/chunks/fb849bbadd253ef9.js","/_next/static/chunks/90216186efc0da8c.js"],"ArticleVoteButtons"] 30:["$","hr","20",{"children":"$undefined"}] 31:["$","h2","22",{"children":"How do you create a Client Component?"}] 32:["$","p","24",{"children":["Add ",["$","code","1",{"children":"'use client'"}]," directive at the top of the file."]}] 33:["$","pre","26",{"children":["$","code",null,{"className":"language-tsx","children":"'use client';\n\nimport { useState } from 'react';\n\nfunction Counter() {\n const [count, setCount] = useState(0);\n\n return (\n \n );\n}\n"}]}] 34:["$","hr","28",{"children":"$undefined"}] 35:["$","h2","30",{"children":"When should you use Server vs Client Components?"}] 36:["$","p","32",{"children":["$","strong",null,{"children":"Use Server Components for:"}]}] 37:["$","ul","34",{"children":["\n",["$","li","1",{"children":"Data fetching"}],"\n",["$","li","3",{"children":"Accessing backend resources"}],"\n",["$","li","5",{"children":"Keeping sensitive information on server"}],"\n",["$","li","7",{"children":"Large dependencies that don't need interactivity"}],"\n"]}] 38:["$","p","36",{"children":["$","strong",null,{"children":"Use Client Components for:"}]}] 39:["$","ul","38",{"children":["\n",["$","li","1",{"children":"Interactivity (onClick, onChange)"}],"\n",["$","li","3",{"children":"Hooks (useState, useEffect, useContext)"}],"\n",["$","li","5",{"children":"Browser APIs (localStorage, geolocation)"}],"\n",["$","li","7",{"children":"Custom event listeners"}],"\n"]}] 3a:["$","hr","40",{"children":"$undefined"}] 3b:["$","h2","42",{"children":"Can Server Components contain Client Components?"}] 3c:["$","p","44",{"children":"Yes. Server Components can import and render Client Components, passing data as props."}] 3d:["$","pre","46",{"children":["$","code",null,{"className":"language-tsx","children":"// ServerComponent.tsx (default - no directive needed)\nimport ClientButton from './ClientButton';\n\nasync function ServerComponent() {\n const data = await fetchData();\n\n return (\n

{data.title}

\n \n

\n );\n}\n"}]}] 3e:["$","pre","48",{"children":["$","code",null,{"className":"language-tsx","children":"// ClientButton.tsx\n'use client';\n\nfunction ClientButton({ label }) {\n return ;\n}\n"}]}] 3f:["$","hr","50",{"children":"$undefined"}] 40:["$","h2","52",{"children":"Can Client Components contain Server Components?"}] 41:["$","p","54",{"children":"Not directly. But you can pass Server Components as children."}] 42:["$","pre","56",{"children":["$","code",null,{"className":"language-tsx","children":"// This works\n\n \n\n\n// ClientWrapper.tsx\n'use client';\nfunction ClientWrapper({ children }) {\n return

{children}

;\n}\n"}]}] 43:["$","hr","58",{"children":"$undefined"}] 44:["$","h2","60",{"children":"How do you fetch data in