요즘 next.js를 공부 해보고 싶어서 드디어 시작하게 됩니다.

우선 간단하게 SSR과 CSR가 무엇인지 그 차이점과, next.js를 왜 사용해야 하는지에 대해 말씀 드려보겠습니다.

1.CSR (Client-Server-Rendering)

CSR은 react, vue와 같은 라이브러리를 사용해서 웹페이지를 서버가 아닌 유저 브라우저에서 실시간으로 만들어 주는 것을 말 한다.

-장점

• 새로고침이 발생 하지 않는다.
• 네이티브 앱과 비슷한 빠른 인터렉션을 구현 할 수 있다.

단점

• 첫 페이지를 로드 하는 시간이 느리다. (SSR에 비해)
• SEO가 취약하기 때문에 구글 검색 등 노출이 잘 되지 않는다.
  수익성에 악 영향을 끼친다.

2.SSR (Sever-Side-Rendering)

SSR은 html 웹페이지를 서버에서 미리 만들어 보여주는 개념이다.

-장점

• 첫 페이지를 로드 하는 시간이 빠르다.
• 유저에게 많은 javascript 코드를 보낼 필요가 없어서 가볍다.
• SEO에 친화적이다. 즉 검색 결과 노출이 잘 된다.
• 일부 페이지에서 부분적으로 CSR을 선택적으로 사용 가능하다.

단점

처음에 페이지가 로드 되는 시간은 빠르지만 그 이후 페이지 이동 간 페이지 로드 되는 시간이 느리다. CSR과 다르게 페이지 이동을 하면 클라이언트에서 이동한 페이지의 데이터 요청시 서버에서 데이터를 응답 하기 때문이다.

next.js를 사용 해야 하는 이유

next.js는 우리가 자주 사용했던 react로 프론트 개발을 함과 동시에 백에서 개발도 가능한 풀스택 프레임 워크이다.

• 가장 큰 장점으로는 SEO가 친화적인 것이 크다.
  어쨋든 웹 페이지를 만드는 대부분의 이유는 수익을 창출 하기 위해서이니까.

• 하지만 단점 또한 있기 마련이다.
  페이지 이동시 깜빡임이 사용자 경험에서 적응 되지 않을 수 있고,
  폴더 기반 라우팅이 많기 때문에 큰 프로젝트에서 조금 복잡하다.
  또 클라이언트 컴포넌트와 서버 컴포넌트를 구분해서 코르를 짜야 하기 때문에 까다롭다.

어떤 프로젝트를 하느냐에 따라서 적절히 선택해서 사용하면 좋을 것 같다.