** 매우 주관적인 의견임. 이 사람은 이렇게 생각했구나~ 하고 넘어가줫으면 좋겠음 **
드디어 미루고미루고미루고미루고미루고 미루던 마이그레이션 작업을 해봤는데
아직 마이그레이션 20% 정두 했는데 그동안 좋은점이 많았지만 나쁜점도 몇개 느꼇어서 간단하게 적어볼려구 함
허접 초보라서 틀린 정보가 있을수두 있어요 훈수환영
## 장점
> Client Component와 Server Component가 구분된게 좋았음
기본적으로 Server Component로 동작하지만, 'use client'를 최 상단에 선언해 주면 해당 파일은 Client Component로 사용할 수 있음.
Server Component로 필수 데이터를 받고 만든 뒤 클라이언트에 전송 ->
그 후 Client Component로 사용자 브라우저에서 useEffect등으로 후작업 진행
저는 JWT 인증을 Server Component / Client Component 응용해서 구현했어요
파일 관리를 잘 하지 못해서 프로젝트가 쉽게 난잡해졌었는데
이 기능으로 인해서 Server Component와 Client Component를 분리하여 저장해서
파일 관리도 수월해짐
(+추가) Server Actions (up Next.JS 13.4)
이 기능이 매우 좋다고 생각함
'use server'를 선언 해 주면 해당 함수는 유저에게 노출되지 않고 서버에서 동작하는 API가 됨
이미 FastAPI로 된 백엔드가 있지만 왜 사용하냐?
1. 꼼수긴 한데 CORS를 케이크 자르듯이 우회할 수 있음
브라우저에서 요청하는게 아닌 서버단에서 요청하고, 데이터를 클라이언트에 보내주기 때문에 CORS가 원천적으로 뜰일이 없음.
2. 유저에게 보이면 좋지 않은 로직을 쉽게 처리할 수 있음
전 로그인, 업로드 등등의 로직에 적용해서 선처리를 하고 백엔드 서버로 보내는데 사용하고 있음
단, 아직 실험적 기능이라서 몇몇 버그가 있음.
쿠키를 설정할 수 있다고 되어있는데, 정확한 조건은 모르겠지만 어떤 함수는 되고 어떤 함수는 쿠키를 설정할 수 없어서
안 되는 함수는 쿠키로 설정할 값을 return 해준 뒤, Client Components에 prop으로 넘겨줘서 처리해야 하는 등등의 버그가 있음..
내가 issue 하려고 갔는데 누군가 4일전에 해놨더라. 고쳐지겠지?
> 레이아웃 관리가 편하다. (up Next.JS v13)
app 디렉토리로 바뀌면서 파일 기반 라우팅에서 폴더 기반 라우팅으로 바뀌게 되었는데, layout.ts 에서 레이아웃이 될 css와 컴포넌트를 삽입하고
children으로 page에 있는 내용물을 불러올 수 있음.
리액트에선 레이아웃 관리하려면 똥꼬쇼해야 했었는데 Next에선 layout.ts 을 사용 하면 레이아웃을 쉽게 설정할 수 있어서 좋았음.
추가로 loading.js와 error.js등의 파일도 생성할 수 있는데, 이걸 이용하면 쉽게 로딩 중 상태와 에러 상태를 핸들링 할 수 있음
> SEO 최적화에 용이하다.
내 사이트는 SEO가 매우 중요한 사이트인데, 기존 React를 사용할 땐 SEO 최적화가 쉽지 않아 SEO 최적화를 하지 못했었음.
하지만 Next에선 layout.ts 에서 metadata를 만들어주면 정말 쉽게 정적 SEO를 만들 수 있음.
만약 동적 라우팅 페이지라면?
metadata를 지우고 generateMetadata를 사용 해주면 동적 SEO도 쉽게 만들 수 있음
이것 말고도 많은 장점이 있는데 크게 느낀 장점만 적어봤음.
그럼 이제 단점
## 단점
> React의 SPA방식이 아닌 우선 HTML을 서버에서 생성하고 Hydration하는 방식이라 반응형 디자인 짜기 귀찮다 (요건 좀 애매)
hydration 중일땐 skeleton을 띄우고 useEffect로 클라이언트에게 갔을 때
mediaQuery등을 사용하여 처리하는게 그냥 하면 되는 React에 비해 귀찮았음
> 파일 구조가 더러워진다 (파일 기반 라우팅 단점)
React는 react-router로 한 파일에서 라우팅을 처리할 수 있기 때문에 프로젝트 파일 구조를 깔끔하게 유지할 수 있었지만
Next는 파일 기반 라우팅인지라 생성해야할 폴더, 파일이 많아서 아직 컴포넌트, 페이지가 몇개 없음에도 벌써 프로젝트 파일이 많아져서 정신없어지기 시작함
> 이상한 잔 오류가 많다
제일 치명적인건 이건 내가 13.4 실험기능 Server Actions을 써서 그런진 모르겠는데
Module Aliases가 이유 없이 죽어버리는 현상이 있음;
검색도 해보고 별 짓 다해봤는데 프로젝트 새로 만들고 옮기는거 밖에 해결이 안되더라. 내 능력 부족일지도 모르겠지만
그래서 눈물 머금고 Absolute Imports 쓰고 있음 ㅠㅠㅠㅠ
