{"id":255,"date":"2025-11-12T14:30:00","date_gmt":"2025-11-12T05:30:00","guid":{"rendered":"https:\/\/hed-g.me\/?p=255"},"modified":"2025-10-28T15:00:56","modified_gmt":"2025-10-28T06:00:56","slug":"swr-vs-fetch","status":"publish","type":"post","link":"https:\/\/hed-g.me\/?p=255","title":{"rendered":"SWR vs Fetch"},"content":{"rendered":"\n<p><\/p>\n\n\n\n<p>\ub2e8\uc21c \ub370\uc774\ud130 \uc694\uccad\uc744 \ub118\uc5b4\uc11c, \u2018\ub370\uc774\ud130 \uc0c1\ud0dc\u2019\ub97c \uad00\ub9ac\ud558\ub294 \uae30\uc220.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Fetch, \ube0c\ub77c\uc6b0\uc800\uac00 \uc81c\uacf5\ud558\ub294 \uac00\uc7a5 \uae30\ubcf8\uc801\uc778 API<\/h2>\n\n\n\n<p>fetch()\ub294 \ub124\ud2b8\uc6cc\ud06c \uc694\uccad\uc744 \uc218\ud589\ud558\ub294 <strong>\uc6f9 \ud45c\uc900 \ub0b4\uc7a5 \ud568\uc218<\/strong>\ub2e4.<\/p>\n\n\n\n<p>\ub2e8\uc21c\ud788 \u201c\uc11c\ubc84\uc5d0\uc11c \ub370\uc774\ud130\ub97c \uac00\uc838\uc624\ub294\u201d \uae30\ub2a5\uc5d0 \ucd08\uc810\uc774 \ub9de\ucdb0\uc838 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>async function getUser() {\n  const res = await fetch('\/api\/user');\n  const data = await res.json();\n  return data;\n}\n<\/code><\/pre>\n\n\n\n<p>\uc774 \ubc29\uc2dd\uc740 \uac04\ub2e8\ud558\uace0 \uc9c1\uad00\uc801\uc774\uc9c0\ub9cc, <strong>\ub370\uc774\ud130 \uc694\uccad \uc774\ud6c4\uc758 \ubb38\uc81c\ub4e4<\/strong>\uc744 \uc9c1\uc811 \ud574\uacb0\ud574\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Fetch \ub2e8\ub3c5 \uc0ac\uc6a9 \uc2dc \ucc98\ub9ac\ud574\uc57c \ud558\ub294 \ud56d\ubaa9<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ub85c\ub529 \uc0c1\ud0dc \uad00\ub9ac(isLoading)<\/li>\n\n\n\n<li>\uc5d0\ub7ec \ucc98\ub9ac(try \/ catch)<\/li>\n\n\n\n<li>\uce90\uc2f1 \ubc0f \uc7ac\uac80\uc99d(\ub370\uc774\ud130\ub97c \ub2e4\uc2dc \uac00\uc838\uc640\uc57c \ud560 \uc2dc\uc810 \uc81c\uc5b4)<\/li>\n\n\n\n<li>\uc911\ubcf5 \uc694\uccad \ubc29\uc9c0<\/li>\n\n\n\n<li>\ud3ec\ucee4\uc2a4 \ubcf5\uadc0 \uc2dc \ub370\uc774\ud130 \uac31\uc2e0<\/li>\n<\/ul>\n\n\n\n<p>\uc989, fetch\ub294 \uc694\uccad-\uc751\ub2f5 \ub2e8\uc704\uc758 \ub3c4\uad6c\uc77c \ubfd0, \ub370\uc774\ud130 \uc0dd\uba85\uc8fc\uae30(Data Lifecycle)\uc5d0 \ub300\ud55c \uac1c\ub150\uc740 \uc5c6\ub2e4.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">SWR: Data Fetching + Caching Layer<\/h2>\n\n\n\n<p>SWR\uc740 Vercel\uc5d0\uc11c \ub9cc\ub4e0 React\uc6a9 \ub370\uc774\ud130 \ud328\uce6d \ub77c\uc774\ube0c\ub7ec\ub9ac\ub2e4.<\/p>\n\n\n\n<p>\uc774\ub984\uc758 \uc758\ubbf8\ubd80\ud130\uac00 <strong>Stale-While-Revalidate<\/strong> \uc804\ub7b5\uc744 \uc758\ubbf8\ud55c\ub2e4.<\/p>\n\n\n\n<p><strong>(\uc624\ub798\ub41c \ub370\uc774\ud130\ub97c \uba3c\uc800 \ubcf4\uc5ec\uc8fc\uace0, \ubc31\uadf8\ub77c\uc6b4\ub4dc\uc5d0\uc11c \ucd5c\uc2e0\ud654)<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import useSWR from 'swr';\n\nconst { data, error, isLoading } = useSWR('\/api\/user', fetcher);\n<\/code><\/pre>\n\n\n\n<p>SWR\uc758 \ud575\uc2ec\uc740 <strong>\ub370\uc774\ud130\ub97c \ud55c \ubc88 \uac00\uc838\uc628 \uc774\ud6c4\uc758 \uc0c1\ud0dc\ub97c \uc790\ub3d9\uc73c\ub85c \uad00\ub9ac<\/strong>\ud558\ub294 \ub370 \uc788\ub2e4.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">SWR\uc774 \uc81c\uacf5\ud558\ub294 \ud575\uc2ec \uae30\ub2a5<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\uae30\ub2a5<\/th><th>\uc124\uba85<\/th><th>fetch\uc640\uc758 \ucc28\uc774<\/th><\/tr><\/thead><tbody><tr><td>\uc790\ub3d9 \uce90\uc2f1<\/td><td>\ub3d9\uc77c key \uc694\uccad\uc740 \uacb0\uacfc\ub97c \uc800\uc7a5\ud574 \uc7ac\uc0ac\uc6a9.<\/td><td>fetch\ub294 \ub9e4\ubc88 \uc0c8\uc694\uccad<\/td><\/tr><tr><td>Stale-While-Revalidate<\/td><td>\uce90\uc2dc \ub370\uc774\ud130\ub97c \uc989\uc2dc \ubcf4\uc5ec\uc8fc\uace0, \ubc31\uadf8\ub77c\uc6b4\ub4dc\uc5d0\uc11c \ucd5c\uc2e0 \ub370\uc774\ud130\ub85c \uac31\uc2e0<\/td><td>fetch\ub294 \uc989\uc2dc\uc131 \uc5c6\uc74c<\/td><\/tr><tr><td>\uc911\ubcf5 \uc694\uccad \ubc29\uc9c0(Deduplication)<\/td><td>\ub3d9\uc77c \uc694\uccad\uc744 \ud558\ub098\ub85c \ud569\uce68<\/td><td>fetch\ub294 \ubcd1\ub839 \uc694\uccad \uc2dc \uc911\ubcf5 \ubc1c\uc0dd<\/td><\/tr><tr><td>\ud3ec\ucee4\uc2a4 \uc2dc \uc7ac\uac80\uc99d<\/td><td>\ud0ed \ubcf5\uadc0 \uc2dc \ucd5c\uc2e0 \ub370\uc774\ud130 \uc791\ub3d9 \uac31\uc2e0<\/td><td>fetch\ub294 \uc218\ub3d9 \uac31\uc2e0 \ud544\uc694<\/td><\/tr><tr><td>\uc624\ud504\ub77c\uc778 \ubcf5\uad6c<\/td><td>\ub124\ud2b8\uc6cc\ud06c \ub04a\uae40 \ud6c4 \uc7ac\uc5f0\uacb0 \uc2dc \uc790\ub3d9 \uc7ac\uc694\uccad<\/td><td>fetch\ub294 \uc218\ub3d9 \uc7ac\uc2dc\ub3c4 \ud544\uc694<\/td><\/tr><tr><td>\ub85c\ub529\/\uc5d0\ub7ec \uc0c1\ud0dc \uc790\ub3d9\uad00\ub9ac<\/td><td>Hook \ubc18\ud658\uac12\uc73c\ub85c \ubc14\ub85c \uc81c\uacf5<\/td><td>fetch\ub294 \uc0c1\ud0dc \uad00\ub9ac \uc218\ub3d9 \uad6c\ud604<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Stale-While-Revalidation \uc804\ub7b5\uc774 \uc65c \uc911\uc694\ud560\uae4c<\/h3>\n\n\n\n<p>\uc0ac\uc6a9\uc790\ub294 \ub370\uc774\ud130\ub97c \ubcfc \ub54c \uc2e4\uc2dc\uac04\uc131\ubcf4\ub2e4 <strong>\uc989\uc2dc\uc131<\/strong>\uc744 \uba3c\uc800 \uae30\ub300\ud55c\ub2e4.<\/p>\n\n\n\n<p>\uc989, \ud654\uba74\uc774 \uc989\uc2dc \ub728\uace0 \ub098\uc911\uc5d0 \ubc31\uadf8\ub77c\uc6b4\ub4dc\uc5d0\uc11c \ucd5c\uc2e0 \ub370\uc774\ud130\ub85c \uac31\uc2e0\ub418\ub294 \uac83\uc774 \ub354 \uc790\uc5f0\uc2a4\ub7fd\ub2e4.<\/p>\n\n\n\n<p>SWR\uc740 \uc774\ub97c \uc790\ub3d9\uc73c\ub85c \uad6c\ud604\ud55c\ub2e4.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\uce90\uc2dc\uc5d0 \ub370\uc774\ud130\uac00 \uc788\uc73c\uba74 \uc989\uc2dc \ubc18\ud658<\/li>\n\n\n\n<li>\ub3d9\uc2dc\uc5d0 API \uc7ac\uc694\uccad(revalidate)<\/li>\n\n\n\n<li>\uc0c8\ub85c\uc6b4 \ub370\uc774\ud130\ub85c \uac31\uc2e0 \ud6c4 \uc790\ub3d9 \ub9ac\ub80c\ub354\ub9c1.<\/li>\n<\/ol>\n\n\n\n<p>\uc774 \uc811\uadfc \ubc29\uc2dd\uc740 UX \uce21\uba74\uc5d0\uc11c <strong>\ub85c\ub529 \uc2a4\ud53c\ub108\ubcf4\ub2e4 \ud6e8\uc52c \ubd80\ub4dc\ub7fd\uace0 \ube60\ub978 \uccb4\uac10<\/strong>\uc744 \uc900\ub2e4.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">SWR\uc758 \ub0b4\ubd80\uad6c\uc870<\/h3>\n\n\n\n<p>SWR\uc758 \ub370\uc774\ud130 \ud750\ub984\uc740 \ub2e4\uc74c\uacfc \uac19\ub2e4:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\uc694\uccad: useSWR(key, fetcher) \ud638\ucd9c<\/li>\n\n\n\n<li>\uce90\uc2dc \ud655\uc778: key\uc5d0 \ud574\ub2f9\ud558\ub294 \ub370\uc774\ud130\uac00 \uc788\uc73c\uba74 \uc989\uc2dc \ubc18\ud658<\/li>\n\n\n\n<li>Revalidate: \ube44\ub3d9\uae30\ub85c fetcher \uc2e4\ud589 \u2192 \ucd5c\uc2e0 \ub370\uc774\ud130 \uac00\uc838\uc624\uae30<\/li>\n\n\n\n<li>Mutate: \uacb0\uacfc\ub97c \uce90\uc2dc\uc5d0 \uc800\uc7a5\ud558\uace0 \uad6c\ub3c5 \uc911\uc778 \ucef4\ud3ec\ub10c\ud2b8 \uc790\ub3d9 \uc5c5\ub370\uc774\ud2b8<\/li>\n<\/ol>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\uc2e4\ubb34\uc5d0\uc11c\uc758 Fetch\uc640 SWR<\/h2>\n\n\n\n<p>Fetch\ub294 \uc694\uccad 1\ud68c\uc131\uc5d0 \uac15\ud558\uace0, SWR\uc740 <strong>\ub370\uc774\ud130 \uc720\uc9c0\/\uac31\uc2e0<\/strong>\uc5d0 \uac15\ud558\ub2e4.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\uc5b8\uc81c Fetch\ub9cc \uc368\ub3c4 \uad1c\ucc2e\uc744\uae4c<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ub2e8\uc77c \uc694\uccad (\ub85c\uadf8\uc778, \ub85c\uadf8\uc544\uc6c3, POST \ud3fc \uc804\uc1a1 \ub4f1)<\/li>\n\n\n\n<li>\ub370\uc774\ud130\uac00 \uc790\uc8fc \ubc14\ub00c\uc9c0 \uc54a\ub294 \ud398\uc774\uc9c0<\/li>\n\n\n\n<li>\ubcc4\ub3c4 \uce90\uc2f1\uc774 \ud544\uc694 \uc5c6\ub294 \uc784\uc2dc \uc694\uccad<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\uc5b8\uc81c SWR\uc774 Fetch\ubcf4\ub2e4 \uc720\ub9ac\ud560\uae4c<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ub2e4\uc218\uc758 \ucef4\ud3ec\ub10c\ud2b8\uac00 \uac19\uc740 \ub370\uc774\ud130\ub97c \ucc38\uc870\ud560 \ub54c<\/li>\n\n\n\n<li>\ud398\uc774\uc9c0 \uc804\ud658\uc774 \uc7a6\uace0 \ub370\uc774\ud130 \uce90\uc2dc\uac00 \ud544\uc694\ud560 \ub54c<\/li>\n\n\n\n<li>\uc624\ud504\ub77c\uc778\/\ud3ec\ucee4\uc2a4 \ubcf5\uadc0 \ud6c4 \uc790\ub3d9 \uac31\uc2e0\uc774 \ud544\uc694\ud560 \ub54c<\/li>\n\n\n\n<li>Optimistic Update, Infinite Scroll \ub4f1 UI \uc77c\uad00\uc131\uc774 \uc911\uc694\ud55c \uacf3<\/li>\n<\/ul>\n\n\n\n<p>\uacb0\uad6d SWR\uc740 \ub2e8\uc21c \ub370\uc774\ud130 \uc694\uccad \ub3c4\uad6c\uac00 \uc544\ub2c8\ub77c, <strong>\ub370\uc774\ud130 \uc0c1\ud0dc \uad00\ub9ac \ub77c\uc774\ube0c\ub7ec\ub9ac<\/strong>\uc5d0 \uac00\uae5d\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\ub2e8\uc21c \ub370\uc774\ud130 \uc694\uccad\uc744 \ub118\uc5b4\uc11c, \u2018\ub370\uc774\ud130 \uc0c1\ud0dc\u2019\ub97c \uad00\ub9ac\ud558\ub294 \uae30\uc220. Fetch, \ube0c\ub77c\uc6b0\uc800\uac00 \uc81c\uacf5\ud558\ub294 \uac00\uc7a5 \uae30\ubcf8\uc801\uc778 API fetch()\ub294 \ub124\ud2b8\uc6cc\ud06c \uc694\uccad\uc744 \uc218\ud589\ud558\ub294 \uc6f9 \ud45c\uc900 \ub0b4\uc7a5 \ud568\uc218\ub2e4. \ub2e8\uc21c\ud788 \u201c\uc11c\ubc84\uc5d0\uc11c \ub370\uc774\ud130\ub97c \uac00\uc838\uc624\ub294\u201d \uae30\ub2a5\uc5d0 \ucd08\uc810\uc774 \ub9de\ucdb0\uc838 \uc788\ub2e4. \uc774 \ubc29\uc2dd\uc740 \uac04\ub2e8\ud558\uace0 \uc9c1\uad00\uc801\uc774\uc9c0\ub9cc, \ub370\uc774\ud130 \uc694\uccad \uc774\ud6c4\uc758 \ubb38\uc81c\ub4e4\uc744 \uc9c1\uc811 \ud574\uacb0\ud574\uc57c \ud55c\ub2e4. Fetch \ub2e8\ub3c5 \uc0ac\uc6a9 \uc2dc \ucc98\ub9ac\ud574\uc57c \ud558\ub294 \ud56d\ubaa9 \uc989, fetch\ub294 \uc694\uccad-\uc751\ub2f5 \ub2e8\uc704\uc758 \ub3c4\uad6c\uc77c \ubfd0, \ub370\uc774\ud130 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[44],"tags":[184,152,100,102,183,173,127],"class_list":["post-255","post","type-post","status-publish","format-standard","hentry","category-frontend","tag-fetch","tag-next-js","tag-react","tag-react-js","tag-swr","tag-173","tag-127"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/255","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=255"}],"version-history":[{"count":1,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/255\/revisions"}],"predecessor-version":[{"id":256,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/255\/revisions\/256"}],"wp:attachment":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=255"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=255"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=255"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}