[NextJs] : App Router ? Server Component?

https://nextjs.org/blog/next-13-4

 

다시 시작하는 프로젝트에서는 Next.js 13 버전에서 사용하는 App Router 방식을 사용한다고 한다... (권고사항이라고 해서 사용한다고 함)

사실 많은 자료나 참고할만한 레퍼런스가 부족해서 아직까지 걱정이 되긴 한다. 기존의 Page Router 방식이 더 익숙해서 그런 걸까?..

 

13 버전에서는 일단 Page 폴더 안에서 원하는 ____. tsx를 만들어서 라우팅 했다면 App Router는 폴더를 만들고 그 안에 page.tsx를 만들어야지 경로가 생긴다고 한다. 

 

 

App Router - page.js

 

사실 라우팅정도야 금방 익숙해지니깐....

그리고 개별 폴더마다 아래 이미지처럼 File Convention이 존재했다. (공식문서 참고!!)

https://nextjs.org/docs/app/api-reference/file-conventions

직접 간단하게 구현해서 해보건 layout, loading, error, page 정도 구현해 봤다. 

 

layout 개별 컴포넌트 안에 고정적으로 계속 유지되는 컴포넌트를 보여주고 그 하위로 page에서 작성한 컴포넌트들이 나왔다.

 

그리고 예를 들어 search라는 폴더 내에 하위 폴더로 [searchParam]이라고 작성하고 이 폴더 내에 똑같이 page, loading 파일을 만들고 해당 page안에서 비동기처리 통신을 하니깐 loading이 자동으로 나왔다. ( 이전에는 react-query를 사용했다면 isLoading을 사용했을 텐데) 

 

아무튼 신기!  

 

* 간단한 구현은 공식문서를 보고 하나씩 따라 해 보면 좀 더 이해가 편할 것 같다. 

 

 

여기까지는 그럭저럭 할 만!

---

Server Component라는 것을 보고 너무 헷갈렸다. ( 찾다 보니 React18 버전 자료를 보는 것도 나쁘지 않았다. ) 

우리가 기존에 사용하던 컴포넌트가 Client component라고 생각하고 비교하면 이해가 좀 더 편했다. 

 

 

간단하게 Client component를 살펴보면 

• onClick과 같은 상호작용 
• React  lifecycle hooks를 사용 (useEffect, useState...) 
• 최상단에 'use client'를 선언 ( 클라이언트 컴포넌트로 사용하려면 선언해줘야 함!)

이렇게 사용되는 컴포넌트를 Client Component라고 생각하면 된다.

 

---

 

Sever Componet는 상호작용이 없고 , 단순하게 텍스트를 보여주는 페이지 같은 컴포넌트를 의미한다.

서버 클라이언트를 사용하면 클라이언트와 서버 간에 전달해야 하는 데이터 양을 줄일 수 있어서 성능이 올라가고 로딩속도도 빨라진다고 한다. 

 

그리고 예시코드를 보면 조회하는 api를 통해서 데이터를 받아서 그 데이터를 보여주는 정도의 코드로만 구성되어 있었다. 

(아무튼 이렇게 사용할 페이지는 없어서... 이해정도만 하고 넘겼다.)

 

Server Componet Vs Client Componet

 

 

Sever Componet를 언제 사용해야 할지 확실하게 감이 잡히지는 않는다. 내가 하는 대부분의 컴포넌트는 Client Compoent로 밖에 사용할 수 없다고 생각된다... 대부분 상호작용을 하고, 라이프 사이클 훅도 사용하기 때문이다. 

 

 

---

 

 

지금은 빠르게 이해한 부분만 쓴 거라서 이후에 프로젝트를 하면서 이해한 바를 다시 한번 정리해야겠다. 

 

어렵다🥲

 

 

 

참고링크

https://nextjs.org/blog/next-13-4

Next.js 13.4