🔗 Next.js

React SSR(server side rendering)을 쉽게 구현할 수 있게 도와주는 간단한 프레임워크

🔗 CSR (Client Side Rendering)

리액트로 개발할때 SPA을 이용하며 CSR(client side rendering)을 하기때문에 좋은 점도 있지만 단점도 있는데 그 부분이 바로 검색엔진 최적화(SEO)부분이다.
Client side rendering은 렌더링을 하는 주체가 클라이언트이며, 첫 페이지에서 빈 HTML을 가져오고 js파일을 해석하여 실행이 되면 렌더링이 일어난다. 이렇게 화면을 구성하기때문에 크롤러(검색bot)는 빈 사이트로 인식을 해서 포털 검색에 거의 노출 될 일이 없으며 첫 진입 시 로딩 속도가 SSR에 비해 오래 걸린다. (최근엔 SPA도 검색엔진에 색인 되게끔 처리해주고 있다고 함..) 하지만 SSR은 요청 시마다 서버가 응답하면서 페이지를 생성하므로 부하가 크지만, CSR은 클라이언트에서 렌더링을 하기 때문에 서버 부하는 상대적으로 적을 수 있다.

🔗 SSR (Server Side Rendering)

클라이언트 대신 서버에서 페이지를 준비하는 원리이다.
next.js에서는 서버사이드렌더링을 이용하므로 사용자와 검색 엔진 크롤러에게 바로 렌더링 된 페이지를 전달할 수 있어서 검색엔진 최적화에 좋은 영향을 주며 초기 페이지 로딩 시간도 빠르다. 하지만 매 요청마다 서버에서 새로 HTML을 생성하기 때문에 초기 진입은 CSR보다 빨라도 전체적인 네비게이션 속도가 느려질 수 있다.

🔗 SSG (Static Site Generation)

클라이언트에서 필요한 페이지들을 빌드 시점에 미리 정적으로 생성해두고 요청이 오면 이미 완성된 파일을 전달하기 때문에 페이지 로딩 속도가 매우 빠르다. SSR은 서버에 요청할 때 즉시 만든다면 SSG는 미리 만들어 놓는 것이다. 그렇기때문에 캐싱을 통해 자주 업데이트가 필요 없는 페이지에 적합하다.

pre-rendering

Next.js에서 Pre-renderg은 빌드 시점에 HTML을 생성하여 클라이언트에 제공한다는 의미로, 사용자가 요청하기 전에 HTML을 미리 생성하여 서버 또는 클라이언트 측에 전달하는 방법이다. 이렇게하기 때문에 SEO(검색엔진 최적화)가 좋아진다.

🔗 Server & Client Component

Next.js 13버전 이후 도입된 Server Component와 Client Component는 CSR과 SSR을 동시에 사용할 수 있도록 만든 개념이다. 서버컴포넌트를 통해 전체 어플리케이션을 클라이언트에서 렌더링하는 것이 아닌 의도에 따라 정적인 컴포넌트는 서버 컴포넌트로, 동적인 컴포넌트는 클라이언트 컴포넌트로, 어디에서 렌더링할지 정할 수 있다. 하지만 App Router에서는 모든 컴포넌트가 기본적으로 Server Component이다.
Server Component는 데이터 fetching을 서버에서 처리하여 클라이언트로 전달하기 때문에 성능이 향상되고 보안적인 측면에서도 유리하다.
Client Component는 컴포넌트 파일 최상단에 "use client" 를 선언해주면 되고 해당 파일 안에 있는 다른 모듈과 자식 컴포넌트는 Client번들에 포함된다.