230803 Next.js: 기본개념 및 랜더링 기법

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영).

---

0. 개념.

Next.js는 Vercel에서 만든 웹 애플리케이션을 만들기 위한 빌딩 블록을 제공하는 React 기반 프레임워크로, UI를 구축하기 위한 자바스크립트 라이브러리인 React와 헷갈리면 안된다(역할이 조금 다르다!). 

Next.js는 React 기반 프레임워크
React는 자바스크립트 라이브러리

프레임워크와 라이브러리 관련글 첨부!

230130 컴퓨터지식: 프레임워크와 라이브러리 차이

 

애플리케이션 구축 시 고려해야하는 6가지

• 사용자 인터페이스(User Interface) - 사용자가 애플리케이션을 소비하고 상호 작용하는 방식으로, 복잡하게 설정하지 않고 프레임워크를 사용하기 쉽도록 하는 것
• 라우팅(Routing) - 사용자가 애플리케이션의 여러 부분을 탐색하는 방법.
• 데이터 가져오기(Data Fetching) - 데이터의 위치 및 가져오는 것이 가능하도록 하는 것.
• 렌더링(Rendering) - 정적 또는 동적 콘텐츠를 렌더링하는 시기와 위치를 따로 설정하지 않아도 서버랜더링과, 사용자가 사용 중인 코드만 보내지는 것(code-splitting)이 가능하도록.
• 통합(Integrations) - 사용하는 타사 서비스(CMS, 인증, 결제 등) 및 해당 서비스에 연결하는 방법.
• 인프라(Infrastructure) - 애플리케이션 코드를 배포, 저장 및 실행하는 위치(서버리스, CDN, 엣지 등).
• 성능(Performence) - 최종 사용자를 위해 애플리케이션을 최적화하는 방법.
• 확장성(Scalability) - 팀, 데이터, 트래픽이 증가함에 따라 애플리케이션을 조정하는 방법.
• 개발자 경험(Developer Experience) - 배포를 쉽게 해 팀의 애플리케이션 구축 및 유지 관리 경험에 용이하도록

---

1.  렌더링?

리액트에서 작성한 코드를 해당 UI에 대한 HTML문서로 변환시키기 위한 프로세스를 렌더링이라고한다.
이는 서버 또는 클라이언트(브라우저)에서 발생할 수 있는데, 빌드시간에 미리 발생하거거나 또는 런타임 시 모든 요청에 의해 발생가능하다.

SSR과 SSG는 결과가 클라이언트로 전송되기전, 외부에서 데이터를 가져온 후 리액트 컴포넌트를 HTML문서로 변환하기 때문에 Pre-Rendering이라고도 말한다.

1 - 1. 렌더링 방식: CSR, SSR, SSG, ISR

	개념	특징	장점	단점
CSR (Client Side Rendering)	클라이언트 (브라우저)가 렌더링	- 브라우저는 서버로부터 빈 HTML과 UI 페이지 로딩 후, 클라이언트 측에서 JavaScript를 사용하여 데이터를 가져와 렌더링 - 주로 인터랙티브한 페이지에 유용	- 빠른 초기 로딩 - 인터랙티브한 사용자 경험 가능	- 검색 최적화(SEO) 어려움 - 초기 로딩 속도 느릴 수 있음
SSR (Server Side Rendering)	서버가 렌더링, 요청 시 서버에서 렌더링	- 서버에서 페이지를 렌더링한 후, HTML로 전송 - 주로 동적 데이터가 필요한 페이지에 유용 - getServerSideProps 또는 getInitialProps 함수를 사용하여 데이터를 가져오고 페이지 렌더링	- 검색 엔진 최적화(SEO) 용이 - 초기 로딩 빠름	- 서버 부하 증가 - 렌더링 지연 가능
SSG (Static Site Generation)	서버가 첫 빌드시 렌더링	- 빌드 시, 페이지를 미리 렌더링하여 정적인 HTML 파일 생성	- 빠른 초기 로딩 - SEO 용이 - 서버 부하 감소	- 동적 데이터 업데이트 어려움 - 실시간 업데이트 어려움
ISR (Incremental Static Regeneration)	서버가 렌더링, 주기적으로 렌더링 가능	- 정적 사이트 생성의 확장으로, 일부 페이지를 사전 렌더링 후, 일부 페이지만 다시 생성	- 빠른 초기 로딩 - SEO 용이 - 주기적 업데이트 시 유용	- 복잡한 데이터 로직 구현이 어려울 수 있음 - 다소 복잡한 설정 필요

 

 

---

참고

https://nextjs.org/learn/foundations/about-nextjs

https://velog.io/@surim014/how-next.js-works