Next.js

• React의 SSR(Server Side Rendering)을 쉽게 구현할 수 있게 도와주는 프레임워크
• Next.js → Pre-Rendering을 통해 페이지를 미리 렌더링 하며 완성된 HTML을 가져오기 때문에 사용자와 검색 엔진 크롤러에게 바로 렌더링 된 페이지를 전달할 수 있게 된다.

SSR(Server Side Rendering)

• 클라이언트 대신 서버에서 페이지를 준비하는 원리
• React → SPA(Single Page Application), CSR(Client Side Rendering)방식으로 서버에 영향을 미치지 않고, 서버에서 클라이언트로 응답해서 보낸 html도 거의 비어있다.
  • 단점
    1. 서버에서 데이터를 가져올 때 지연 시간 발생으로 UX 측면에서 좋지 않다.
    2. 검색 엔진에 검색 시 웹크롤링이 동작할 때 내용을 제대로 가져와 읽을 수 없기에 검색엔진 최적화에 문제가 된다.

Pre-Rendering

Next.js는 모든 페이지를 pre-rendering한다.

pre-render 한다는 것은 모든 페이지를 위한 HTML을 Client Side에서 자바스크립트로 처리하기 전, 사전에 생성한다는 것이다.

-> SEO 검색엔진 최적화가 좋아진다.

CSR / SSR

CSR을 사용해야 경우

• SEO가 중요하지 않을 때 (사용자별 비공개 페이지)
• 처음 화면을 보여줄 때의 로딩 시간 빼고는 사용 중 빠른 사용자 경험 인터렉션이 더 중요할 때

SSR을 사용해야 경우

• SEO가 중요할 때
• 처음 화면을 빠르게 보여주는 것이 중요할 때