Next.js 간략한 정리..

이번에 Next.js로 과제를 진행을 했었는데, 과제를 진행하면서 굉장히 신기했다. 지식으로만 알고 있던 SSR과 CSR의 차이점을 몸소 느낀 부분들이 많았다. 일단 아래 SSR과 CSR의 차이점을 정리한 부분이다.

 

SSR(Server Side Rendering) 과 CSR(Client Side Rendering)

1. SSR이란?

서버 ⇒ 클라이언트

서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식.

즉, 서버에서 이미 ‘렌더 가능한' 상태로 클라이언트에 전달되기 때문에, JS가 다운로드 되는 동안 사용자는 무언가를 보고 있을 수 있다.

특정 기능을 실행하기 위해 사이트 전체가 다시 로딩되는 문제가 발생한다.

• 검색 엔진 최적화
  • 구글, 네이버와 같은 검색 사이트에서 검색했을 때 결과가 많이 노출될 수 있도록 최적화 하는 기법. 특히, SNS에서 링크를 공유했을 때 해당 웹 사이트의 정보를 이미지와 설명으로 표시해주는 OG(Open Graph) Tag를 페이지 별로 적용하기 위해서는 서버 사이드 렌저링이 효율적
• 빠른페이지렌더링
  • 서버에서 미리 그려서 브라우저로 보내주기 때문에 페이지를 그리는 시간을 단축 할 수 있다.
• 정적인 사이트에 좋음

단점

• Node.js에 대해 알아야 한다.
• 서버쪽 환경 구성과 함께 클라이언트, 서버 빌드에 대한 이해 필요
• 잦은 서버 요청
• 모든 페이지를 리로딩
• 전체적으로 느린 페이지 렌더링

2. CSR이란?

브라우저의 자바스크립트를 통해 상호작용하는 방식.

클라이언트 사이드 렌더링은 초기 로딩 이후 서버 사이드 렌더링에 비해 빠르다는 장점이 있다. 웹페이지 일부만 불러온다.

• 서버에서 처리 없이 클라이언트로 보내주기 때문에 자바스크립트가 모두 다운로드 되고 실행이 끝나기 전까지 사용자는 볼 수 있는게 없다.

장점

• 사이트 상호작용 활발
• 초기 로딩 이후 빠른 웹사이트 렌더링
• 웹 애플리케이션에 좋음
• 자바스크립트 라이브러리 활용
• 동적인것에 좋다.

단점

• 제대로 구현하지 않을 경우 검색엔진최적화가 취약함
• 초기 로딩에 더 많은 시간이 걸림
• 대부분의 경우 추가적인 라이브러리를 필요로 함
• SSR과는 다르게 하나의 HTML파일로 모든 페이지를 구성하기 때문에 meta 태그 정의에 약점이 있다.

 

 

이런 차이를 알았는데, Next.js에 대해 찾아보면서 프로젝트를 진행하다보니, 더 색다르게 다가왔다. title부분을 각 페이지마다 바꿔주는 부분이나, pre-rendering 되는 부분, 정적으로 데이터를 받아오는 부분들 등 CSR과 확연히 달랐다. 각 페이지마다 메소드를 적절히 활용해주면, SEO에 특히 친화적이다. 아래는 Next.js에 대한 간략한 정리글이다.

 

NEXT.js란?

Next의 모든 페이지는 사전 렌더링(Pre-rendering)을 원칙으로 하고 있다.

사전 렌더링에는 두 가지 형태가 있다.

1. 정적 생성
2. SSR

두 형태를 구분하는 기준은 언제 html파일을 생성하는가? 에 있다.

정적 생성이란?

1. 프로젝트가 빌드하는 시점에 html파일들이 생성됨
2. 모든 요청에 빌드 파일을 재사용 (즉, 만들어 두고 요청이 들어 올때마다 재사용함)
3. Next의 경우 정적 생성을 퍼포먼스의 이유로 권고하고 있다.
4. 정적 생성된 페이지들은 CDN의 캐시가 된다.
5. 만약 미리 만들어 놔도 상관없는 페이지의 구성인 경우, getStaticProps, getStaticPaths 사용해서 정적 생성

getStaticProps: 빌드시 고정되는 값으로, 빌드 이후에는 변경이 불가능하다

SSR이란?

1. SSR은 매 요청이 들어올때 마다 html을 생성함
2. 항상 최신 상태를 유지함
3. 요청에 다이나믹한 구조가 필요한 경우, getServerSideProps 사용

getServerSideProps : 빌드와 상관없이, 매 요청마다 데이터를 서버로부터 가져온다.