Fetch
웹 페이지를 구성하기 위해서는 다양한 서버에 요청을 보내고 데이터를 받아온다.
이러한 작업을 Fetch라고 부르는데, 보통 웹 사이트는 Restful하게 작성되었기 때문에 Fetch 작업에서 불필요한 동작이 발생할 수 있다.
Over-Fetching
Over-Fetching이란, 필요한 데이터 이상으로 서버에서 데이터를 받아오는 것을 의미한다.
예를 들어, 인스타그램에서 친구 추천 페이지를 사용자에게 보여준다고 생각해보자.
유저의 정보에는 팔로워/팔로잉, 프로필 주소, 게시글 수 등의 여러 정보가 있다.
하지만, 친구 추천 페이지에서는 이 모든 정보가 필요한 것은 아니다.
{
users : [
{
// 필요한 정보
name : "zzzz",
url : "instagram.com/zzzz",
follower : ["aaaa", "bbbb", "cccc"],
// 필요없는 정보
following : ["dddd", "eeee", "ffff"],
posts : 20,
},
{
// 필요한 정보
name : "qwer",
url : "instagram.com/qwer",
follower : ["asdf", "zxcv", "qaz"],
// 필요없는 정보
following : ["mnbv", "ljjh", "iuu"],
posts : 10,
}
]
이와 같이 필요없는 데이터까지 받아와 서버와 자원이 낭비되는 것을 Over-Fetching이라고 한다.
Under-Fetching
Under-Fetching이란, 한 번의 요청으로 필요한 데이터를 모두 받아오지 못해 여러 번의 요청을 수행하는 것을 의미한다.
예를 들어, 인스타그램의 메인 페이지에서는 다른 유저의 스토리, 게시글, 친구 추천 등 여러 화면이 한 곳에 나타나게 된다.
이러한 정보들은 GET /users/{id}/story, GET /users/{id}/posts처럼 여러 번의 요청이 필요하다.
이로 인해 네트워크의 지연이 발생할 수 있고, 사용자는 느린 로딩 속도로 인해 불편함을 겪을 수 있다.
참조
🔔