개발자

[Next.js] api라우터에 대한 질문입니다.

2023년 12월 23일조회 117

갑자기 의미없을 거 같은 단순 궁금증이 생겼습니다. (클라이언트 - app) & (서버 - app) (클라이언트 - app) & (서버 - page) 클라이언트와 서버 모두 app 디렉터리에서 구현하는 것과 클라이언트는 app, 서버는 page 디렉터리에서 하는 것이 성능 차이가 있을까요?

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

답변 1

개발자님의 프로필 사진

무슨 말씀인지를 모르겠어요. Next.js 애플리케이션을 2개 만드는 데, 하나는 클라이언트 애플리케이션이고 하나는 서버 애플리케이션을 만든다는 가정인가요? 그랬을 때 클라이언트 애플리케이션은 app router 기반이고 서버 애플리케이션은 app 또는 pages router 기반인데 이때 두 가지 가능한 상황에서의 성능 차이가 있는가? 이런 말씀인가요? 제목에 쓰신 API 라우터는 또 어떤 의미인가요? Next.js 서버 측 프록시 역할을 하는 API Routes 기능을 말씀하시는 건가요? 전체적으로 맥락이 안 잡힙니다.

김태우님의 프로필 사진

김태우

작성자

zzambbong developer2023년 12월 23일

아니요. 애플리케이션은 하나인데 두개가 차이가 있는지 궁금한 겁니다! 클라이언트는 앱디렉터리에서 하고 서버를 app디렉터리에서 api라우터로 구현할 때와 page 디렉터리에서 api라우트를 구현할 때와 성능적인 차이가 있는 것인지 의문입니다.

김태우님의 프로필 사진

김태우

작성자

zzambbong developer2023년 12월 23일

여기서 얘기한 서버는 서버리스를 말씀드리는 겁니다.

김태우님의 프로필 사진

김태우

작성자

zzambbong developer2023년 12월 23일

Api라우트는 단순 프록시 역할만 하는 것이 아니라 웬만한 서버 기능을 모두 서버리스로 구현할 수 있는 것으로 알고 있습니다.

개발자님의 프로필 사진

개발자

개발자2023년 12월 23일

네네네 어떤 말씀인지는 이해를 했습니다. 다만 성능 차이랄 것이 있을까 싶기는 해요. 공식 문서 https://nextjs.org/docs/app/building-your-application/routing/route-handlers 참고하면, Route Handlers are only available inside the app directory. They are the equivalent of API Routes inside the pages directory meaning you do not need to use API Routes and Route Handlers together. 이런 내용이 있고, 여기서 They are the equivalent of API Routes inside the pages directory 이런 얘기를 하는 거 보니 그냥 동일한 기능을 동일한 성능으로 제공하지 않을까 싶긴 한데, 저도 테스트를 안 해봐서 성능에 대한 확언은 어렵겠네요.

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

AI 답변
커리어리 AI 봇 프로필 이미지

커리어리 AI 봇

GPT가 달아주는 답변입니다.

2023년 12월 23일

Next.js의 성능에는 여러 요인이 영향을 미치지만, 코드 구조나 디렉터리 구성은 직접적으로 성능에 큰 영향을 미치지 않습니다. Next.js는 서버 사이드 렌더링(SSR), 정적 사이트 생성(Static Site Generation), 클라이언트 사이드 렌더링(Client Side Rendering) 등 다양한 방법을 통해 성능 최적화를 할 수 있습니다. 'app' 디렉터리와 'pages' 디렉터리의 차이가 궁금하신 것 같은데, Next.js에서 'app' 디렉터리는 주로 전체 어플리케이션의 공통 부분(layout, header, footer 등)을 관리하는 장소로 사용됩니다. 반면 'pages' 디렉터리는 각각의 페이지별 로직과 뷰를 담당합니다. API 라우팅은 Next.js 프로젝트의 'pages/api' 디렉터리에서 관리되며 이것은 API 엔드포인트를 생성하는 용도로 사용됩니다. 따라서 클라이언트와 서버 간의 통신 로직을 구현하는 장소입니다. 따라서 'app' 이나 'pages', 그래서 어디에 코드를 작성하느냐보다는 어떻게 코드를 작성하고, 어떤 렌더링 전략을 사용하느냐 등이 성능에 더 큰 영향을 미칠 것입니다. 동일한 기능에 대해 적절한 방법과 최적화된 코드로 구현하는 것이 중요합니다.

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!