Next.js의 SSR, CSR 기본개념알아보기

SSR

유저가 페이지에 접속하면,

1. 서버는 렌더링 할 HTML 응답을 브라우저로 보낸다.

2. 브라우저는 페이지를 렌더링하고 이제 볼 수 있게 된다.

3. 브라우저가 자바스크립트 파일을 다운로드한다.

4. 브라우저가 리액트를 실행한다.

5. 페이지를 상호작용할 수 있다.

 

장점

• 사용자가 웹 페이지에 접속했을 때 바로 볼 수 있다.
• 검색엔진이 이미 만들어진 HTML 파일을 SEO 최적화가 쉽다.

 

단점

• 페이지를 이동할 대마다 서버에서 페이지를 다운로드하여 보여줌으로 빈 화면이 보인다(깜빡임 현상)
• 상대적으로 서버 부하가 많다.

 

CSR

유저가 페이지에 접속하면,

1. 서버는 브라우저에 응답을 보낸다.

2. 브라우저는 자바스크립트 파일을 다운로드한다.

3. 브라우저가 리액트를 실행한다.

4. 페이지는 이제 보이고 상호작용할 수  있다.

 

장점

• 초기에 로딩이 되고 나면 페이지 간 전환이 빠르고 깜빡임 현상이 없다.
• 컴포넌트 단위의 정의와 재사용이 쉽고 필요한 데이터만 요청해서 서버 부하가 적다.

 

단점

• 처음 로딩 시 빈 페이지를 보게 됨으로써 사용자 경험이 좋지 않다.
• SEO 최적화가 쉽지 않다.

 

Naver D2
CSR은 SSR에 비해서 초기에 전송되는 페이지(비어있음)의 로딩 속도는 빠르지만 서비스에서 필요한 데이터를 Client(브라우저)에서 추가로 요청하여 재구성해야 하기 때문에 전제적인 페이지 완료 시점은 SSR보다 느려집니다.

 

---

 

SPA(Single Page Application)

SSR과 CSR을 이해하기 위해선 SPA를 알 필요가 있다.

 

과거에 브라우저는 무언가를 클릭할 때마다 서버에서 새 페이지가 로드되므로 시간이 많이 걸렸다. 그러나 SPA 방식의 경우 정적 리소스를 최조에 한번 다운로드한 뒤에는 사용자가 요청한 데이터만 로드하므로 프로세스가 더 빨라지는 장점을 가지게 된다. 이렇게 SPA는 CSR 방식으로 정보를 렌더링 한다.

 

그렇다면 SPA에서 SSR을 할 수는 없을까?

Next.js는 SSR을 지원하는 React 프레임워크이다. SSR을 기반으로 하지만, 페이지가 로드된 이후에는 React의 CSR을 이용하는 방식을 차용한다.

 

Next.js의 작동방식

1. 유저가 페이지 접속을하면 SSR방식으로 렌더링 될 HTML을 보낸다.

Next.js는 자동으로 해당 페이지에 필요한 부분만 페이지가 렌더링 될 때 로드하여 빠르게 보여진다.(code splitting)

2. 브라우저에서 자바스크립트를 다운로드 받고 React를 실행한다.

React를 로딩하는 동안 사용자는 pre-rendering된 페이지를 보게되고, React가 로딩되면 pre-rendering된 페이지와 연결되어 일반적인 React app 처럼 작동한다.(hydration)

3. 브라우저가 페이지와 상호작용하며, 내부의 동적인 데이터 fetch나 페이지 전환 시 CSR방식으로 브라우저에서 처리한다.(SEO 안걸림)

 

페이지와 함께 fetch해야하는 상황이라면(pre-rendering) Next.js가 제공하는 getInitialProps, getStaticProps, getStaticPath, getServerSideProps를 사용한다.

 

Next.js의 server-side life cycle

1. Next Server가 GET 요청을 받는다.

2. 요청에 맞는 page를 찾는다.

3. _app.tsx의 getInitialProps가 있다면 실행한다.

4. Page Component의 getInitialProps가 있다면 실행한다. pageProps들을 받아온다.

5. document.tsx의 getInitialProps가 있다면 실행한다. pageProps들을 받아온다.

6. 모든 props들을 구성하고, _app.js > page Component 순서로 렌더링 한다.

7. 모든 Content를 구성하고, _document.js를 실행하여 html 형태로 출력한다.

 

 

 

참고:

https://www.excellentwebworld.com/what-is-a-single-page-application/

https://kyounghwan01.github.io/blog/React/next/basic/#dynamic-component-import

https://velog.io/@skypedanny/NextJS-%EA%B7%B8%EA%B2%8C-%EB%AD%94%EB%8D%B0