Route Handler & Server Action 제대로 이해하기

 

Route Handlers

☛ 간단하게 말하자면 next 에서 백엔드 만들기!!

Route Handlers 는 프론트가 쓰기 좋은 형태(ex. 배열 안 객체)로 데이터를 가공하는 것이 주 포인트

* 데이터 정제를 위한 비즈니스 로직을 route handlers 에 담는 것인데 만약 정제를 안하고 담았다? → 의미없는 절차만 추가된 것

 

❓프론트 개발자들이 백엔드 api 를 만들고 싶어하는 욕구가 든 이유 ?

😫 백엔드에서 만들어준 데이터 형태가 맘에안들어! 구조가 한눈에 안들어와! 가독성 떨어져! 우리가 정제할수있게 기능 만들어줘!!

😫 프론트 자체에서 raw 데이터를 가져와서 형태를 바꾸고, 화면단 코드에서 어떤 구조인지 한눈에 보이도록 코딩을 하고 싶어!

 

⚫️ Next.js : Route Handlers 만들었으니 원하는대로 가져가서 써!

 

(과제 활용)

과제에서 호출하는 롤 api 는 api 제공자인 Riot Developer Portal 에서 백엔드에서 호출하는 api 라고 가정하고 만든 api 로

데이터 형태가 해시테이블 형태였다. 이 데이터를 프론트에서 바로 호출해서 바로 사용하기엔 가공이 필요했다.

→ Route Handlers 로 가공하고 컴포넌트에서는 "/api/rotation" 엔드포인트를 호출한 값을 사용해서 화면에 출력하였다.

* 해시테이블 (키(key)와 값(value)으로 데이터를 저장하는 비선형 자료 구조, 백엔드가 진짜 db에 넣기 좋도록 데이터형태가 맞춰져 있음 )

 

---

 

 

Server Actions

서버에서 실행되는 비동기 함수로 서버 컴포넌트와 클라이언트 컴포넌트 모두에서 사용할 수 있음

파일 상단에 "use server" 지시어를 넣어주면 server action 으로 사용할 수 있음

 

👍 장점

* 브라우저에서는 접근할 수 없는 안전한 환경에서 실행되므로 보안에 유의해야 하는 정보를 은닉할 수 있다.

* 코드스플리팅으로 최적화를 해준다.

(코드 스플리팅(Lazy-Loading) : 하나로 번들된 코드를 여러 코드로 나눠 당장 필요한 코드가 아니면 나중에 불러옴)

 

(hydration : 인터렉션에 필요한 모든 파일을 다운로드 받는 과정)

hydration 하기 전 사용자와 상호작용하는 부분을 제외 한 껍데기인 html만 먼저 브라우저에게 제공하는데,

이때, 함수를 컴포넌트 단에 그냥 써버리면 코드도 처음에 같이 보내진다. 이때의 코드는 기능이 안됨(호출X)

❓ 껍데기만 보여주는 건데 굳이 이 호출 함수까지 포함해서 보낼 필요가 있을까? (코드도 지저분해지고..)

 

⚫️ Next.js : Server Action 으로 함수 만들어서 사용하면 처음에 프리렌더링에 포함 안시키고 코드가 html로 만들어 지도록 해줄게, 그리고 보안도 지켜주고 편하게 splitting 하게 해줄게!

 

server action이 리액트에서 Api.js에 다 모아놓고 쓰는거랑 비슷하다고 보면 되는데,

next.js 에서는 파일 상단에 "use server" 만 써주면 보안, 코드스플리팅 최적화까지 포함해서 해주므로 이득이다!!

 

* 만일 "use server" 가 없이 그냥 썼다? → 컴포넌트에서 쓰는거랑 똑같은 것 (그냥 코드 분리만 한 것임)

 

 

- server action → 해당 함수 호출

- route handlers → fetch 해서 path에 요청가능

 

결론

리액트에서 코드로 구구절절 하는걸 넥스트는 한큐에 하는 메서드들이 있어서 애플리케이션 자체의 구조설계나 비즈니스 로직 구현에 좀 더 집중할 수 있다!