var Component=(()=>{var p=Object.create;var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var o=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var u=(n,s)=>()=>(s||n((s={exports:{}}).exports,s),s.exports),g=(n,s)=>{for(var e in s)c(n,e,{get:s[e],enumerable:!0})},h=(n,s,e,r)=>{if(s&&typeof s=="object"||typeof s=="function")for(let l of o(s))!j.call(n,l)&&l!==e&&c(n,l,{get:()=>s[l],enumerable:!(r=m(s,l))||r.enumerable});return n};var f=(n,s,e)=>(e=n!=null?p(N(n)):{},h(s||!n||!n.__esModule?c(e,"default",{value:n,enumerable:!0}):e,n)),w=n=>h(c({},"__esModule",{value:!0}),n);var t=u((b,i)=>{i.exports=_jsx_runtime});var x={};g(x,{default:()=>S,frontmatter:()=>y});var a=f(t()),y={title:"Next.js\uC758 data-feching",date:new Date(16726176e5),summary:"\uBC14\uB2D0\uB77C \uB9AC\uC561\uD2B8\uAC00 \uC81C\uACF5\uD558\uB294 CSR\uACFC Next.js\uAC00 \uC9C0\uC6D0\uD558\uB294 pre-rendering\uC5D0 \uC0AC\uC6A9\uD558\uB294 \uBC29\uC2DD\uC778 SSR, SSG(+ISR)\uB4E4\uC744 \uC54C\uC544\uBCF4\uC790.",tags:["next.js","\uB80C\uB354\uB9C1","data fetching"]};function d(n){let s=Object.assign({h1:"h1",a:"a",span:"span",p:"p",strong:"strong",code:"code",h2:"h2",pre:"pre",ul:"ul",li:"li"},n.components);return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(s.h1,{id:"pre-rendering",children:[(0,a.jsx)(s.a,{className:"anchor",href:"#pre-rendering",children:(0,a.jsx)(s.span,{className:"icon icon-link"})}),"Pre-rendering"]}),` `,(0,a.jsxs)(s.p,{children:[(0,a.jsx)(s.strong,{children:"\uAE30\uBCF8\uC801\uC73C\uB85C Next.js\uB294 \uBAA8\uB4E0 \uD398\uC774\uC9C0\uB97C pre-render\uD55C\uB2E4."})," \uAC01\uAC01\uC758 \uD398\uC774\uC9C0\uAC00 \uD074\uB77C\uC774\uC5B8\uD2B8 \uC0AC\uC774\uB4DC\uC5D0\uC11C \uB80C\uB354\uB9C1 \uB418\uAE30\uC804 \uBBF8\uB9AC \uB370\uC774\uD130 \uD398\uCE6D\uC744 \uD55C\uB2E4\uB294 \uB73B\uC774\uB2E4. Next.js\uB294 \uC815\uC801 \uC0DD\uC131\uC744 \uAE30\uBCF8\uC801\uC73C\uB85C \uC0AC\uC6A9\uD558\uC9C0\uB9CC \uD398\uC774\uC9C0\uC5D0 \uB370\uC774\uD130 \uD398\uCE6D \uBC29\uBC95\uC744 \uC120\uD0DD\uD560 \uC218 \uC788\uB2E4."]}),` `,(0,a.jsxs)(s.p,{children:["\uAE30\uBCF8\uC801\uC73C\uB85C \uBC14\uB2D0\uB77C \uB9AC\uC561\uD2B8\uAC00 \uC81C\uACF5\uD558\uB294 ",(0,a.jsx)(s.code,{children:"CSR"}),"\uACFC Next.js\uAC00 \uC9C0\uC6D0\uD558\uB294 pre-rendering\uC5D0 \uC0AC\uC6A9\uD558\uB294 \uBC29\uC2DD\uC778 ",(0,a.jsx)(s.code,{children:"SSR"}),", ",(0,a.jsx)(s.code,{children:"SSG(+ISR)"})," \uB4E4\uC744 \uC54C\uC544\uBCF4\uC790."]}),` `,(0,a.jsxs)(s.h1,{id:"csr",children:[(0,a.jsx)(s.a,{className:"anchor",href:"#csr",children:(0,a.jsx)(s.span,{className:"icon icon-link"})}),"CSR"]}),` `,(0,a.jsx)(s.p,{children:"\uD074\uB77C\uC774\uC5B8\uD2B8 \uCE21 \uB370\uC774\uD130 \uAC00\uC838\uC624\uAE30\uB294 \uD398\uC774\uC9C0\uC5D0 SEO \uC778\uB371\uC2F1\uC774 \uD544\uC694\uD558\uC9C0 \uC54A\uAC70\uB098, \uB370\uC774\uD130\uB97C \uC0AC\uC804 \uB80C\uB354\uB9C1\uD560 \uD544\uC694\uAC00 \uC5C6\uAC70\uB098, \uD398\uC774\uC9C0 \uCF58\uD150\uCE20\uB97C \uC790\uC8FC \uC5C5\uB370\uC774\uD2B8\uD574\uC57C \uD558\uB294 \uACBD\uC6B0\uC5D0 \uC720\uC6A9\uD558\uB2E4."}),` `,(0,a.jsx)(s.p,{children:"\uD558\uC9C0\uB9CC \uD074\uB77C\uC774\uC5B8\uD2B8\uC5D0\uC11C \uB370\uC774\uD130\uB97C \uAC00\uC838\uC62C\uC2DC \uC560\uD50C\uB9AC\uCF00\uC774\uC158\uC758 \uC131\uB2A5\uACFC \uD398\uC774\uC9C0\uC758 \uB85C\uB4DC \uC18D\uB3C4\uC5D0 \uC601\uD5A5\uC744 \uBBF8\uCE60 \uC218 \uC788\uB2E4. \uC774\uB294 \uD398\uC774\uC9C0\uAC00 \uB9C8\uC6B4\uD2B8\uB420 \uB54C \uB370\uC774\uD130\uB97C \uAC00\uC838\uC624\uACE0 \uADF8 \uB370\uC774\uD130\uAC00 \uCE90\uC2DC\uB418\uC9C0 \uC54A\uAE30 \uB54C\uBB38\uC774\uB2E4."}),` `,(0,a.jsxs)(s.h2,{id:"useeffect\uB97C-\uC0AC\uC6A9\uD558\uC5EC-\uAC00\uC838\uC624\uAE30",children:[(0,a.jsx)(s.a,{className:"anchor",href:"#useeffect\uB97C-\uC0AC\uC6A9\uD558\uC5EC-\uAC00\uC838\uC624\uAE30",children:(0,a.jsx)(s.span,{className:"icon icon-link"})}),"useEffect\uB97C \uC0AC\uC6A9\uD558\uC5EC \uAC00\uC838\uC624\uAE30"]}),` `,(0,a.jsx)(s.pre,{children:(0,a.jsxs)(s.code,{className:"hljs language-jsx",children:[(0,a.jsx)(s.span,{className:"hljs-keyword",children:"function"})," ",(0,a.jsx)(s.span,{className:"hljs-title function_",children:"Profile"}),"(",(0,a.jsx)(s.span,{className:"hljs-params"}),`) { `,(0,a.jsx)(s.span,{className:"hljs-keyword",children:"const"})," [data, setData] = ",(0,a.jsx)(s.span,{className:"hljs-title function_",children:"useState"}),"(",(0,a.jsx)(s.span,{className:"hljs-literal",children:"null"}),`); `,(0,a.jsx)(s.span,{className:"hljs-keyword",children:"const"})," [isLoading, setLoading] = ",(0,a.jsx)(s.span,{className:"hljs-title function_",children:"useState"}),"(",(0,a.jsx)(s.span,{className:"hljs-literal",children:"false"}),`); `,(0,a.jsx)(s.span,{className:"hljs-title function_",children:"useEffect"}),"(",(0,a.jsx)(s.span,{className:"hljs-function",children:"() =>"}),` { `,(0,a.jsx)(s.span,{className:"hljs-title function_",children:"setLoading"}),"(",(0,a.jsx)(s.span,{className:"hljs-literal",children:"true"}),`); `,(0,a.jsx)(s.span,{className:"hljs-title function_",children:"fetch"}),"(",(0,a.jsx)(s.span,{className:"hljs-string",children:"'/api/profile-data'"}),`) .`,(0,a.jsx)(s.span,{className:"hljs-title function_",children:"then"}),"(",(0,a.jsxs)(s.span,{className:"hljs-function",children:["(",(0,a.jsx)(s.span,{className:"hljs-params",children:"res"}),") =>"]})," res.",(0,a.jsx)(s.span,{className:"hljs-title function_",children:"json"}),`()) .`,(0,a.jsx)(s.span,{className:"hljs-title function_",children:"then"}),"(",(0,a.jsxs)(s.span,{className:"hljs-function",children:["(",(0,a.jsx)(s.span,{className:"hljs-params",children:"data"}),") =>"]}),` { `,(0,a.jsx)(s.span,{className:"hljs-title function_",children:"setData"}),`(data); `,(0,a.jsx)(s.span,{className:"hljs-title function_",children:"setLoading"}),"(",(0,a.jsx)(s.span,{className:"hljs-literal",children:"false"}),`); }); }, []); `,(0,a.jsx)(s.span,{className:"hljs-keyword",children:"if"})," (isLoading) ",(0,a.jsx)(s.span,{className:"hljs-keyword",children:"return"})," ",(0,a.jsxs)(s.span,{className:"xml",children:[(0,a.jsxs)(s.span,{className:"hljs-tag",children:["<",(0,a.jsx)(s.span,{className:"hljs-name",children:"p"}),">"]}),"Loading...",(0,a.jsxs)(s.span,{className:"hljs-tag",children:[""]})]}),`; `,(0,a.jsx)(s.span,{className:"hljs-keyword",children:"if"})," (!data) ",(0,a.jsx)(s.span,{className:"hljs-keyword",children:"return"})," ",(0,a.jsxs)(s.span,{className:"xml",children:[(0,a.jsxs)(s.span,{className:"hljs-tag",children:["<",(0,a.jsx)(s.span,{className:"hljs-name",children:"p"}),">"]}),"No profile data",(0,a.jsxs)(s.span,{className:"hljs-tag",children:[""]})]}),`; `,(0,a.jsx)(s.span,{className:"hljs-keyword",children:"return"}),` ( `,(0,a.jsxs)(s.span,{className:"xml",children:[(0,a.jsxs)(s.span,{className:"hljs-tag",children:["<",(0,a.jsx)(s.span,{className:"hljs-name",children:"div"}),">"]}),` `,(0,a.jsxs)(s.span,{className:"hljs-tag",children:["<",(0,a.jsx)(s.span,{className:"hljs-name",children:"h1"}),">"]}),"{data.name}",(0,a.jsxs)(s.span,{className:"hljs-tag",children:[""]}),` `,(0,a.jsxs)(s.span,{className:"hljs-tag",children:["<",(0,a.jsx)(s.span,{className:"hljs-name",children:"p"}),">"]}),"{data.bio}",(0,a.jsxs)(s.span,{className:"hljs-tag",children:[""]}),` `,(0,a.jsxs)(s.span,{className:"hljs-tag",children:[""]})]}),` ); } `]})}),` `,(0,a.jsxs)(s.h1,{id:"ssr",children:[(0,a.jsx)(s.a,{className:"anchor",href:"#ssr",children:(0,a.jsx)(s.span,{className:"icon icon-link"})}),"SSR"]}),` `,(0,a.jsxs)(s.p,{children:["\uD398\uC774\uC9C0 \uD30C\uC77C\uC5D0\uC11C ",(0,a.jsx)(s.code,{children:"getServerSideProps"})," \uB77C\uB294 \uD568\uC218\uB97C \uB0B4\uBCF4\uB0B4\uBA74 Next.js\uB294 \uBC18\uD658\uB41C \uB370\uC774\uD130\uB97C \uC0AC\uC6A9\uD558\uC5EC \uAC01 \uC694\uCCAD\uC5D0\uC11C \uD398\uC774\uC9C0\uB97C \uBBF8\uB9AC \uB80C\uB354\uB9C1\uD55C\uB2E4."]}),` `,(0,a.jsx)(s.pre,{children:(0,a.jsxs)(s.code,{className:"hljs language-jsx",children:[(0,a.jsx)(s.span,{className:"hljs-keyword",children:"function"})," ",(0,a.jsx)(s.span,{className:"hljs-title function_",children:"Page"}),"(",(0,a.jsx)(s.span,{className:"hljs-params",children:"{ data }"}),`) { `,(0,a.jsx)(s.span,{className:"hljs-comment",children:"// Render data..."}),` } `,(0,a.jsx)(s.span,{className:"hljs-comment",children:"// This gets called on every request"}),` `,(0,a.jsx)(s.span,{className:"hljs-keyword",children:"export"})," ",(0,a.jsx)(s.span,{className:"hljs-keyword",children:"async"})," ",(0,a.jsx)(s.span,{className:"hljs-keyword",children:"function"})," ",(0,a.jsx)(s.span,{className:"hljs-title function_",children:"getServerSideProps"}),"(",(0,a.jsx)(s.span,{className:"hljs-params"}),`) { `,(0,a.jsx)(s.span,{className:"hljs-comment",children:"// Fetch data from external API"}),` `,(0,a.jsx)(s.span,{className:"hljs-keyword",children:"const"})," res = ",(0,a.jsx)(s.span,{className:"hljs-keyword",children:"await"})," ",(0,a.jsx)(s.span,{className:"hljs-title function_",children:"fetch"}),"(",(0,a.jsx)(s.span,{className:"hljs-string",children:"`https://.../data`"}),`); `,(0,a.jsx)(s.span,{className:"hljs-keyword",children:"const"})," data = ",(0,a.jsx)(s.span,{className:"hljs-keyword",children:"await"})," res.",(0,a.jsx)(s.span,{className:"hljs-title function_",children:"json"}),`(); `,(0,a.jsx)(s.span,{className:"hljs-comment",children:"// Pass data to the page via props"}),` `,(0,a.jsx)(s.span,{className:"hljs-keyword",children:"return"})," { ",(0,a.jsx)(s.span,{className:"hljs-attr",children:"props"}),`: { data } }; } `,(0,a.jsx)(s.span,{className:"hljs-keyword",children:"export"})," ",(0,a.jsx)(s.span,{className:"hljs-keyword",children:"default"})," ",(0,a.jsx)(s.span,{className:"hljs-title class_",children:"Page"}),`; `]})}),` `,(0,a.jsxs)(s.h2,{id:"getserversideprops\uC758-\uD2B9\uC9D5",children:[(0,a.jsx)(s.a,{className:"anchor",href:"#getserversideprops\uC758-\uD2B9\uC9D5",children:(0,a.jsx)(s.span,{className:"icon icon-link"})}),"getServerSideProps\uC758 \uD2B9\uC9D5"]}),` `,(0,a.jsxs)(s.ul,{children:[` `,(0,a.jsxs)(s.li,{children:[` `,(0,a.jsx)(s.p,{children:"\uC11C\uBC84 \uCE21\uC5D0\uC11C\uB9CC \uC2E4\uD589\uB418\uACE0 \uBE0C\uB77C\uC6B0\uC800\uC5D0\uC11C\uB294 \uC2E4\uD589\uB418\uC9C0 \uC54A\uB294\uB2E4."}),` `]}),` `,(0,a.jsxs)(s.li,{children:[` `,(0,a.jsx)(s.p,{children:"\uC624\uB85C\uC9C0 \uD398\uC774\uC9C0 \uD30C\uC77C\uC5D0\uC11C\uB9CC \uB0B4\uBCF4\uB0BC \uC218 \uC788\uB2E4."}),` `]}),` `,(0,a.jsxs)(s.li,{children:[` `,(0,a.jsx)(s.p,{children:"\uCE90\uC2DC \uC81C\uC5B4 \uD5E4\uB354\uAC00 \uAD6C\uC131\uB41C \uACBD\uC6B0\uC5D0\uB9CC \uCE90\uC2DC\uAC00 \uAC00\uB2A5\uD558\uB2E4."}),` `,(0,a.jsx)(s.pre,{children:(0,a.jsxs)(s.code,{className:"hljs language-jsx",children:[(0,a.jsx)(s.span,{className:"hljs-keyword",children:"export"})," ",(0,a.jsx)(s.span,{className:"hljs-keyword",children:"async"})," ",(0,a.jsx)(s.span,{className:"hljs-keyword",children:"function"})," ",(0,a.jsx)(s.span,{className:"hljs-title function_",children:"getServerSideProps"}),"(",(0,a.jsx)(s.span,{className:"hljs-params",children:"{ req, res }"}),`) { res.`,(0,a.jsx)(s.span,{className:"hljs-title function_",children:"setHeader"}),"(",(0,a.jsx)(s.span,{className:"hljs-string",children:"'Cache-Control'"}),", ",(0,a.jsx)(s.span,{className:"hljs-string",children:"'public, s-maxage=10, stale-while-revalidate=59'"}),`); `,(0,a.jsx)(s.span,{className:"hljs-keyword",children:"return"}),` { `,(0,a.jsx)(s.span,{className:"hljs-attr",children:"props"}),`: {}, }; } `]})}),` `]}),` `]}),` `,(0,a.jsxs)(s.h1,{id:"ssg",children:[(0,a.jsx)(s.a,{className:"anchor",href:"#ssg",children:(0,a.jsx)(s.span,{className:"icon icon-link"})}),"SSG"]}),` `,(0,a.jsxs)(s.p,{children:["\uC815\uC801 \uC0DD\uC131\uB41C \uD398\uC774\uC9C0\uB85C ",(0,a.jsx)(s.code,{children:"getStaticProps"})," \uB77C\uB294 \uD568\uC218\uB97C \uC0AC\uC6A9\uD55C\uB2E4."]}),` `,(0,a.jsx)(s.pre,{children:(0,a.jsxs)(s.code,{className:"hljs language-jsx",children:[(0,a.jsx)(s.span,{className:"hljs-keyword",children:"function"})," ",(0,a.jsx)(s.span,{className:"hljs-title function_",children:"Blog"}),"(",(0,a.jsx)(s.span,{className:"hljs-params",children:"{ posts }"}),`) { `,(0,a.jsx)(s.span,{className:"hljs-keyword",children:"return"}),` ( `,(0,a.jsxs)(s.span,{className:"xml",children:[(0,a.jsxs)(s.span,{className:"hljs-tag",children:["<",(0,a.jsx)(s.span,{className:"hljs-name",children:"ul"}),">"]}),` {posts.map((post) => ( `,(0,a.jsxs)(s.span,{className:"hljs-tag",children:["<",(0,a.jsx)(s.span,{className:"hljs-name",children:"li"}),">"]}),"{post.title}",(0,a.jsxs)(s.span,{className:"hljs-tag",children:[""]}),` ))} `,(0,a.jsxs)(s.span,{className:"hljs-tag",children:[""]})]}),` ); } `,(0,a.jsx)(s.span,{className:"hljs-comment",children:"// This function gets called at build time on server-side."}),` `,(0,a.jsx)(s.span,{className:"hljs-comment",children:"// It won't be called on client-side, so you can even do"}),` `,(0,a.jsx)(s.span,{className:"hljs-comment",children:"// direct database queries."}),` `,(0,a.jsx)(s.span,{className:"hljs-keyword",children:"export"})," ",(0,a.jsx)(s.span,{className:"hljs-keyword",children:"async"})," ",(0,a.jsx)(s.span,{className:"hljs-keyword",children:"function"})," ",(0,a.jsx)(s.span,{className:"hljs-title function_",children:"getStaticProps"}),"(",(0,a.jsx)(s.span,{className:"hljs-params"}),`) { `,(0,a.jsx)(s.span,{className:"hljs-keyword",children:"const"})," res = ",(0,a.jsx)(s.span,{className:"hljs-keyword",children:"await"})," ",(0,a.jsx)(s.span,{className:"hljs-title function_",children:"fetch"}),"(",(0,a.jsx)(s.span,{className:"hljs-string",children:"'https://.../posts'"}),`); `,(0,a.jsx)(s.span,{className:"hljs-keyword",children:"const"})," posts = ",(0,a.jsx)(s.span,{className:"hljs-keyword",children:"await"})," res.",(0,a.jsx)(s.span,{className:"hljs-title function_",children:"json"}),`(); `,(0,a.jsx)(s.span,{className:"hljs-comment",children:"// By returning { props: { posts } }, the Blog component"}),` `,(0,a.jsx)(s.span,{className:"hljs-comment",children:"// will receive `posts` as a prop at build time"}),` `,(0,a.jsx)(s.span,{className:"hljs-keyword",children:"return"}),` { `,(0,a.jsx)(s.span,{className:"hljs-attr",children:"props"}),`: { posts, }, }; } `,(0,a.jsx)(s.span,{className:"hljs-keyword",children:"export"})," ",(0,a.jsx)(s.span,{className:"hljs-keyword",children:"default"})," ",(0,a.jsx)(s.span,{className:"hljs-title class_",children:"Blog"}),`; `]})}),` `,(0,a.jsxs)(s.h2,{id:"getstaticprops\uC758-\uD2B9\uC9D5",children:[(0,a.jsx)(s.a,{className:"anchor",href:"#getstaticprops\uC758-\uD2B9\uC9D5",children:(0,a.jsx)(s.span,{className:"icon icon-link"})}),"getStaticProps\uC758 \uD2B9\uC9D5"]}),` `,(0,a.jsxs)(s.ul,{children:[` `,(0,a.jsx)(s.li,{children:"\uD398\uC774\uC9C0\uB97C \uB80C\uB354\uB9C1\uD558\uB294 \uB370 \uD544\uC694\uD55C \uB370\uC774\uD130\uB294 \uC0AC\uC6A9\uC790 \uC694\uCCAD\uBCF4\uB2E4 \uC55E\uC11C \uBE4C\uB4DC \uC2DC\uAC04\uC5D0 \uC0AC\uC6A9\uD560 \uC218 \uC788\uB2E4."}),` `,(0,a.jsx)(s.li,{children:"\uB370\uC774\uD130\uB294 \uACF5\uAC1C\uC801\uC73C\uB85C \uCE90\uC2DC\uB41C\uB2E4.(\uC0AC\uC6A9\uC790\uBCC4\uC774 \uC544\uB2C8\uB2E4.)"}),` `,(0,a.jsx)(s.li,{children:"\uD56D\uC0C1 \uC11C\uBC84\uC5D0\uC11C \uC2E4\uD589\uB418\uACE0 \uD074\uB77C\uC774\uC5B8\uD2B8\uC5D0\uC11C\uB294 \uC2E4\uD589\uB418\uC9C0 \uC54A\uB294\uB2E4."}),` `,(0,a.jsx)(s.li,{children:"\uAC1C\uBC1C \uD658\uACBD\uC5D0\uC11C\uB294 \uBAA8\uB4E0 \uC694\uCCAD\uC5D0\uC11C \uD638\uCD9C\uB418\uBBC0\uB85C build \uC774\uD6C4\uC5D0 \uC81C\uB300\uB85C \uC791\uB3D9\uD558\uB294\uC9C0 \uD14C\uC2A4\uD2B8 \uD574\uBCF8\uB2E4."}),` `]}),` `,(0,a.jsxs)(s.h2,{id:"getstaticpath\uB780",children:[(0,a.jsx)(s.a,{className:"anchor",href:"#getstaticpath\uB780",children:(0,a.jsx)(s.span,{className:"icon icon-link"})}),"getStaticPath\uB780?"]}),` `,(0,a.jsxs)(s.p,{children:["\uD398\uC774\uC9C0\uC5D0 \uB3D9\uC801 \uACBD\uB85C\uAC00 \uC788\uACE0 ",(0,a.jsx)(s.code,{children:"getStaticProps"}),"\uB97C \uC0AC\uC6A9\uD558\uB294 \uACBD\uC6B0\uC5D0\uB294 \uC815\uC801\uC73C\uB85C \uC0DD\uC131\uD560 \uACBD\uB85C \uBAA9\uB85D\uC744 \uC815\uC758\uD574\uC57C \uD55C\uB2E4."]}),` `,(0,a.jsx)(s.pre,{children:(0,a.jsxs)(s.code,{className:"hljs language-jsx",children:[(0,a.jsx)(s.span,{className:"hljs-comment",children:"// pages/posts/[id].js"}),` `,(0,a.jsx)(s.span,{className:"hljs-comment",children:"// Generates `/posts/1` and `/posts/2`"}),` `,(0,a.jsx)(s.span,{className:"hljs-keyword",children:"export"})," ",(0,a.jsx)(s.span,{className:"hljs-keyword",children:"async"})," ",(0,a.jsx)(s.span,{className:"hljs-keyword",children:"function"})," ",(0,a.jsx)(s.span,{className:"hljs-title function_",children:"getStaticPaths"}),"(",(0,a.jsx)(s.span,{className:"hljs-params"}),`) { `,(0,a.jsx)(s.span,{className:"hljs-keyword",children:"return"}),` { `,(0,a.jsx)(s.span,{className:"hljs-attr",children:"paths"}),": [{ ",(0,a.jsx)(s.span,{className:"hljs-attr",children:"params"}),": { ",(0,a.jsx)(s.span,{className:"hljs-attr",children:"id"}),": ",(0,a.jsx)(s.span,{className:"hljs-string",children:"'1'"})," } }, { ",(0,a.jsx)(s.span,{className:"hljs-attr",children:"params"}),": { ",(0,a.jsx)(s.span,{className:"hljs-attr",children:"id"}),": ",(0,a.jsx)(s.span,{className:"hljs-string",children:"'2'"}),` } }], `,(0,a.jsx)(s.span,{className:"hljs-attr",children:"fallback"}),": ",(0,a.jsx)(s.span,{className:"hljs-literal",children:"false"}),", ",(0,a.jsx)(s.span,{className:"hljs-comment",children:"// can also be true or 'blocking'"}),` }; } `,(0,a.jsx)(s.span,{className:"hljs-comment",children:"// `getStaticPaths` requires using `getStaticProps`"}),` `,(0,a.jsx)(s.span,{className:"hljs-keyword",children:"export"})," ",(0,a.jsx)(s.span,{className:"hljs-keyword",children:"async"})," ",(0,a.jsx)(s.span,{className:"hljs-keyword",children:"function"})," ",(0,a.jsx)(s.span,{className:"hljs-title function_",children:"getStaticProps"}),"(",(0,a.jsx)(s.span,{className:"hljs-params",children:"context"}),`) { `,(0,a.jsx)(s.span,{className:"hljs-keyword",children:"return"}),` { `,(0,a.jsx)(s.span,{className:"hljs-comment",children:"// Passed to the page component as props"}),` `,(0,a.jsx)(s.span,{className:"hljs-attr",children:"props"}),": { ",(0,a.jsx)(s.span,{className:"hljs-attr",children:"post"}),`: {} }, }; } `,(0,a.jsx)(s.span,{className:"hljs-keyword",children:"export"})," ",(0,a.jsx)(s.span,{className:"hljs-keyword",children:"default"})," ",(0,a.jsx)(s.span,{className:"hljs-keyword",children:"function"})," ",(0,a.jsx)(s.span,{className:"hljs-title function_",children:"Post"}),"(",(0,a.jsx)(s.span,{className:"hljs-params",children:"{ post }"}),`) { `,(0,a.jsx)(s.span,{className:"hljs-comment",children:"// Render post..."}),` } `]})}),` `,(0,a.jsxs)(s.ul,{children:[` `,(0,a.jsx)(s.li,{children:"getStaticProps\uC640 \uD568\uAED8 \uC0AC\uC6A9\uD574\uC57C \uD55C\uB2E4."}),` `]}),` `,(0,a.jsxs)(s.h1,{id:"isr",children:[(0,a.jsx)(s.a,{className:"anchor",href:"#isr",children:(0,a.jsx)(s.span,{className:"icon icon-link"})}),"ISR"]}),` `,(0,a.jsx)(s.p,{children:"ISR\uC744 \uC0AC\uC6A9\uD558\uBA74 \uC804\uCCB4 \uC0AC\uC774\uD2B8\uB97C \uC7AC\uAD6C\uCD95\uD560 \uD544\uC694 \uC5C6\uC774 \uD398\uC774\uC9C0\uBCC4\uB85C \uC815\uC801 \uC0DD\uC131\uC744 \uC0AC\uC6A9\uD560 \uC218 \uC788\uB2E4. ISR\uC744 \uC0AC\uC6A9\uD558\uBA74 \uC815\uC801\uC758 \uC774\uC810\uC744 \uC720\uC9C0\uD558\uBA74\uC11C \uC218\uBC31\uB9CC \uD398\uC774\uC9C0\uB85C \uD655\uC7A5\uD560 \uC218 \uC788\uB2E4."}),` `,(0,a.jsxs)(s.p,{children:["ISR\uC744 \uC0AC\uC6A9\uD558\uAE30 \uC704\uD574\uC11C\uB294 ",(0,a.jsx)(s.code,{children:"getStaticProps"}),"\uC758 \uC124\uC815\uC5D0 ",(0,a.jsx)(s.code,{children:"revalidate"})," \uC124\uC815\uC744 \uCD94\uAC00\uD55C\uB2E4."]}),` `,(0,a.jsx)(s.pre,{children:(0,a.jsxs)(s.code,{className:"hljs language-jsx",children:[(0,a.jsx)(s.span,{className:"hljs-keyword",children:"function"})," ",(0,a.jsx)(s.span,{className:"hljs-title function_",children:"Blog"}),"(",(0,a.jsx)(s.span,{className:"hljs-params",children:"{ posts }"}),`) { `,(0,a.jsx)(s.span,{className:"hljs-keyword",children:"return"}),` ( `,(0,a.jsxs)(s.span,{className:"xml",children:[(0,a.jsxs)(s.span,{className:"hljs-tag",children:["<",(0,a.jsx)(s.span,{className:"hljs-name",children:"ul"}),">"]}),` {posts.map((post) => ( `,(0,a.jsxs)(s.span,{className:"hljs-tag",children:["<",(0,a.jsx)(s.span,{className:"hljs-name",children:"li"})," ",(0,a.jsx)(s.span,{className:"hljs-attr",children:"key"}),"=",(0,a.jsx)(s.span,{className:"hljs-string",children:"{post.id}"}),">"]}),"{post.title}",(0,a.jsxs)(s.span,{className:"hljs-tag",children:[""]}),` ))} `,(0,a.jsxs)(s.span,{className:"hljs-tag",children:[""]})]}),` ); } `,(0,a.jsx)(s.span,{className:"hljs-comment",children:"// This function gets called at build time on server-side."}),` `,(0,a.jsx)(s.span,{className:"hljs-comment",children:"// It may be called again, on a serverless function, if"}),` `,(0,a.jsx)(s.span,{className:"hljs-comment",children:"// revalidation is enabled and a new request comes in"}),` `,(0,a.jsx)(s.span,{className:"hljs-keyword",children:"export"})," ",(0,a.jsx)(s.span,{className:"hljs-keyword",children:"async"})," ",(0,a.jsx)(s.span,{className:"hljs-keyword",children:"function"})," ",(0,a.jsx)(s.span,{className:"hljs-title function_",children:"getStaticProps"}),"(",(0,a.jsx)(s.span,{className:"hljs-params"}),`) { `,(0,a.jsx)(s.span,{className:"hljs-keyword",children:"const"})," res = ",(0,a.jsx)(s.span,{className:"hljs-keyword",children:"await"})," ",(0,a.jsx)(s.span,{className:"hljs-title function_",children:"fetch"}),"(",(0,a.jsx)(s.span,{className:"hljs-string",children:"'https://.../posts'"}),`); `,(0,a.jsx)(s.span,{className:"hljs-keyword",children:"const"})," posts = ",(0,a.jsx)(s.span,{className:"hljs-keyword",children:"await"})," res.",(0,a.jsx)(s.span,{className:"hljs-title function_",children:"json"}),`(); `,(0,a.jsx)(s.span,{className:"hljs-keyword",children:"return"}),` { `,(0,a.jsx)(s.span,{className:"hljs-attr",children:"props"}),`: { posts, }, `,(0,a.jsx)(s.span,{className:"hljs-comment",children:"// Next.js will attempt to re-generate the page:"}),` `,(0,a.jsx)(s.span,{className:"hljs-comment",children:"// - When a request comes in"}),` `,(0,a.jsx)(s.span,{className:"hljs-comment",children:"// - At most once every 10 seconds"}),` `,(0,a.jsx)(s.span,{className:"hljs-attr",children:"revalidate"}),": ",(0,a.jsx)(s.span,{className:"hljs-number",children:"10"}),", ",(0,a.jsx)(s.span,{className:"hljs-comment",children:"// In seconds"}),` }; } `,(0,a.jsx)(s.span,{className:"hljs-comment",children:"// This function gets called at build time on server-side."}),` `,(0,a.jsx)(s.span,{className:"hljs-comment",children:"// It may be called again, on a serverless function, if"}),` `,(0,a.jsx)(s.span,{className:"hljs-comment",children:"// the path has not been generated."}),` `,(0,a.jsx)(s.span,{className:"hljs-keyword",children:"export"})," ",(0,a.jsx)(s.span,{className:"hljs-keyword",children:"async"})," ",(0,a.jsx)(s.span,{className:"hljs-keyword",children:"function"})," ",(0,a.jsx)(s.span,{className:"hljs-title function_",children:"getStaticPaths"}),"(",(0,a.jsx)(s.span,{className:"hljs-params"}),`) { `,(0,a.jsx)(s.span,{className:"hljs-keyword",children:"const"})," res = ",(0,a.jsx)(s.span,{className:"hljs-keyword",children:"await"})," ",(0,a.jsx)(s.span,{className:"hljs-title function_",children:"fetch"}),"(",(0,a.jsx)(s.span,{className:"hljs-string",children:"'https://.../posts'"}),`); `,(0,a.jsx)(s.span,{className:"hljs-keyword",children:"const"})," posts = ",(0,a.jsx)(s.span,{className:"hljs-keyword",children:"await"})," res.",(0,a.jsx)(s.span,{className:"hljs-title function_",children:"json"}),`(); `,(0,a.jsx)(s.span,{className:"hljs-comment",children:"// Get the paths we want to pre-render based on posts"}),` `,(0,a.jsx)(s.span,{className:"hljs-keyword",children:"const"})," paths = posts.",(0,a.jsx)(s.span,{className:"hljs-title function_",children:"map"}),"(",(0,a.jsxs)(s.span,{className:"hljs-function",children:["(",(0,a.jsx)(s.span,{className:"hljs-params",children:"post"}),") =>"]}),` ({ `,(0,a.jsx)(s.span,{className:"hljs-attr",children:"params"}),": { ",(0,a.jsx)(s.span,{className:"hljs-attr",children:"id"}),": post.",(0,a.jsx)(s.span,{className:"hljs-property",children:"id"}),` }, })); `,(0,a.jsx)(s.span,{className:"hljs-comment",children:"// We'll pre-render only these paths at build time."}),` `,(0,a.jsx)(s.span,{className:"hljs-comment",children:"// { fallback: blocking } will server-render pages"}),` `,(0,a.jsx)(s.span,{className:"hljs-comment",children:"// on-demand if the path doesn't exist."}),` `,(0,a.jsx)(s.span,{className:"hljs-keyword",children:"return"})," { paths, ",(0,a.jsx)(s.span,{className:"hljs-attr",children:"fallback"}),": ",(0,a.jsx)(s.span,{className:"hljs-string",children:"'blocking'"}),` }; } `,(0,a.jsx)(s.span,{className:"hljs-keyword",children:"export"})," ",(0,a.jsx)(s.span,{className:"hljs-keyword",children:"default"})," ",(0,a.jsx)(s.span,{className:"hljs-title class_",children:"Blog"}),`; `]})})]})}function k(n={}){let{wrapper:s}=n.components||{};return s?(0,a.jsx)(s,Object.assign({},n,{children:(0,a.jsx)(d,n)})):d(n)}var S=k;return w(x);})(); ;return Component;

렌더링

Next.js의 data-feching

리액트에서의 렌더링에 대한 이해