Next.js 란 무엇일까?

Next.js란?

React로 만드는 SSR(Server Side Rendering) 프레임 워크이다.

• Next.js 공식 홈페이지

동작 원리 - React와 Next.js 사용 기준

1. 클라이언트가 서버에게 페이지를 요청한다.
2. Next.js 서버는 첫 페이지 요청 시 pre-rendering된 HTML파일, css파일, 번들링된 JS 파일들을 전달한다.
3. 브라우저는 HTML을 해석하고, JS 파일을 Hydration 해서 페이지를 렌더링한다.
   • (Hydration = 간단하게 말해 HTML과 JS 파일을 합치는 과정)
4. 첫 페이지 렌더링 이후, 사용자가 다른 페이지로 이동시에는 CSR 방식으로 이동한다.

---

이 때, pre-renderinig이란, 첫번째로 요청하는 페이지에서 선언한 Data-fetching 함수의 종류에 따라 동작이 달라지는데

• SSG (Static-side generation) : getStaticProps 함수가 있으면 빌드 타임에서 HTML 파일을 생성한다. 이후 두번째 페이지부터는 이 함수가 있더라도 빌드타임이 아니기 때문에 실행하지 않고, 미리 계산된 데이터만 내려주게 된다.
• SSR (Server-side rendering) : getServerSideProps 함수가 있으면 페이지 요청 시마다 HTML을 생성한다. 이 함수로 서버와 통신하거나 임의의 데이터를 페이지에 props 형태로 넘길 수 있다.

---

첫 페이지 요청 시에 CSR은 아예 안 일어나나?

• SSG 또는 SSR 방식으로 전달받은 첫 페이지의 HTML과 JS파일의 Hydration 이 끝난 후 CSR을 일으키는 코드가 있으면 CSR 또한 일어난다.
• ex) useEffect에서 data-fetcing 함수가 실행되어 상태값이 업데이트 되면 화면이 리렌더링 되는데, 이런 경우가 해당되며 SSG + CSR 또는 SSR + CSR 방식도 가능하다고 할 수 있다.
• 궁금했던 정보를 이해하는 데 도움이 되었던 참고 자료 : https://cheolsker.tistory.com/45

SSR 방식으로 얻는 이점

• 초기 페이지 렌더링이 빨라 사용자의 기다림을 줄일 수 있다. 서버에서 JS를 로딩하기에 클라이언트 측에서 JS를 로딩하는 시간이 줄어든다.
• SEO (검색 엔진) 최적화 : 서버 사이드에서 미리 페이지를 만들어 브라우저에 띄우기 때문에 검색엔진에 게시글이 걸리게 된다. 또한, meta 태그를 자유롭게 추가함으로 SEO를 용이하게 할수도 있다.

Next.js + React 사용 이점

Next.js 와 React를 함께 사용할 경우, CSR + SSR 방식을 섞어 사용할 수 있다. 이는 CSR 방식의 장점인 다른 페이지로 이동 시 로딩이 빠르다는 점, SSR 방식의 초기 화면 로딩이 빠른 점, 검색 엔진 최적화 등을 최대한 챙길 수 있도록 하는 것 같다.

Next.js로 개발하며 느끼는 장점

• hot reloading(개발 중 저장되는 코드가 자동으로 새로고침(=반영) 된다.)
• automatic routing(폴더를 만드는 경로대로 routing 된다.)
  -> Next.js 13의 경우, app/home/page.tsx 로 파일 경로를 설정하면, 실제 접근 경로는 localhost:3000/home 이 된다.)
• Dynamic route : [] 문법으로 동적인 라우팅이 가능하다.
  -> ex) [id] 폴더 아래 page.tsx파일을 만들었을 경우, 해당 페이지에서 router.query.id 로 접근한 페이지 url의 id 값을 가져올 수 있다.
• Typescript 설정 및 사용이 편리하다.
• Styled Component나, scss 사용 설정이 편리하다.

Next.js로 개발하며 느끼는 단점

• 단점이라 하기엔 어려울 수 있지만... SSR 방식인 Next.js를 처음 사용할 땐 관련 지식이 부족해 적응이 어려웠다. 제대로 알고 사용하려면 클라이언트는 물론, 서버, 백엔드, 웹 동작 방식에 대한 자세한 이해 등의 지식이 필요할 것 같다는 생각이 들어 공부중이다.
• 잘 사용하면 CSR과 SSR의 단점을 모두 챙겨갈 수 있지만, 적절히 사용하지 못하면 오히려 더 느려지는 경우가 생기는 것 같다.
• Next.js 12에서 13으로 넘어가며 버전 초기의 오류나, 해결 방법을 잘 모르겠는 오류(data fetching 중복 요청 오류, 캐싱 문제 등)를 많이 겪었다.

참고

Next.js 기본 개념 알아보기
서버 사이드 렌더링이란?
헷갈렸던 Next.js 동작 원리