서버 사이드 렌더링 왜 필요한가?

개발 공부를 하다 보면 클라이언트 사이드 렌더링과 서버 사이드 렌더링에 대해서 심심찮게 듣게 된다. 클라이언트 사이드 렌더링의 문제점으로 Isomorphic App이 등장한다. 그게 바로 Next.js
클라이언트 사이드 렌더링이라함은 버추얼 돔을 통해서 렌더링을 하는 방식이다. (흔히 우리가 알고 있는 리액트, 앵귤러, 뷰의 방식)
업데이트되는 부분만 렌더링하면 되기 때문에 효율적이고 속도가 빠르다.
하지만 다음과 같은 문제점을 가지고 있다.

• 첫 로딩이 느리다
• 페이지 캐싱이 어렵다(JS 파일 의존성)
• SEO(검색 엔진 최적화)가 힘들다

서버 사이드 렌더링의 장점

• SSG(Static Side Generation)을 통한 캐싱으로 로딩 시간을 줄일 수 있다
• SEO를 해결할 수 있다 (서버로부터 페이지의 HTML 파일을 받아오기때문에)

CSR + SSR = Next

Next는 CSR의 장점과 SSR의 장점을 살린 리액트 프레임워크이다.

Next의 작업 흐름

첫 요청 => SSR => Link => CSR
첫 요청에서는 SSR로 작동하고 다음 요청부터는 CSR로 작동하기 때문에 양쪽의 장점을 모두 사용할 수 있다.