정의
서버에서 페이지를 그려 클라이언트(브라우저)로 보낸 후 화면에 표시하는 기법. SSR
장점
- 검색 엔진 최적화
- CSR은 페이지 생성 시점에 데이터가 없으므로 검색 엔진이 잘 수집하지 못한다.
- 최근에는 검색 엔진이 발전하여 수집하는 경우도 있다.
- SNS 공유를 통해 데이터를 미리 보여주고 싶을 때 사용하기도 한다.
- 더 빠른 초기 로딩 속도
- CSR은 첫 렌더링 후 데이터를 가져오기 위한 네트워크 로직이 수행된다. 그러므로 느리다.
- SSR은 html에 초기 데이터를 넘겨주므로 더 빠르다.
- 첫 렌더링 뒤엔 CSR을 사용하면 된다.
단점 (기존)
Server-Side와 Client-Side에서 렌더링을 위한 코드를 각각 만들어야 한다.
Isomorphic(Universal) 방식으로 일부 해결되었다.
같은 코드로 Server와 Client에서 동일하게 실행되는 환경을 의미한다.
그러나 JavaScript 코드에 제약이 생긴다는 단점이 있다.
예를 들어, Server-Side에서는 window 객체를 사용할 수 없으므로 예외 처리를 해야 한다.
Next.js
- SSR을 Isomorphic 방식으로 제공하는 프레임워크
- 리액트 기반으로 동작한다. (리액트 개발과 크게 다르지 않다)
- 기본적으로 라우팅이 지원된다.
사용
- api 폴더를 프록시처럼 사용할 수 있다.
- Head 컴포넌트와 Image 컴포넌트를 제공한다.
- Link 컴포넌트: CSR 방식으로 링크를 이동한다.
- herf, as - 템플릿 리터럴을 사용하려면 as를 사용한다.
- passHref: 하위 컴포넌트로 href 속성을 전달해준다.
- Link 컴포넌트 안에 텍스트만 넣어도 <a> 태그가 자동으로 생성된다.
- prefetch: Link에 사용한 href의 주소를 읽어서 해당 페이지 리소스를 미리 받아온다.
- getServerSidProps 함수를 통해 Api를 요청한다.
- App 컴포넌트에서는 getServerSidProps를 사용할 수 없다. 대신 getInitialProps를 사용한다.
전역 props로 사용할 수 있다.