CSR은 뭐고 SSR은 뭘까?

CSR(Client Side Rendering)

• 클라이언트에서 렌더링 하는 방식
• SPA(Single Page Application)와 세트

작동 방식

1. 브라우저에서 서비스에 접속하면, 서버에 요청을 한다.
2. 서버에서 비어있는 html에 js를 포함시켜서 보내준다.
3. 비어있는 html을 받았기 때문에 여전히 빈페이지이고, js링크를 확인후, 다시 서버에 js를 요청한다.
4. 서버에서 js, 라이브러리, 모듈등 모든파일을 번들링한 파일을 브라우저로 전해준다.
5. 유저는 이제 브라우저에서 화면이 보이게 된다. (바로 동적으로 작동)

👉 장점

1. 페이지 렌더링 속도가 빠르다.
   ⇒ 어떤 페이지를 불러오거나 부분적인 리렌더링이 필요할 때, 그 부분만 렌더링 되기 때문에 SSR보다 빠르다.
2. 화면 깜박임이 없다.
   ⇒ 요청마다 html을 받아오는 것이 아니기 때문이다.
3. 필요한 정보만 JSON으로 불러오기 때문에 서버 요청을 줄이면서 비용을 아낄 수 있다.
4. 페이지가 띄워지면 바로 동적인 페이지가 된다.

👉 단점

1. SEO에 좋지 않다.
   ⇒ 비어있는 html파일을 전달하기 때문에 검색봇이 읽을 내용이 없다
   ⇒ 구글에서는 개선이 되었다고 하지만, 믿을만 하지는 못하다고 한다.

2. 첫 로딩이 느리다.
   ⇒ 번들링 된 큰 파일을 한번에 로드하기 때문이다.

SSR(Sever Side Rendering)

• 서버에서 렌더링 하는 방식
• 데이터를 포함한 완성된 html 파일을 요청 마다 보내준다.
• MPA(Multiple Page Application)와 세트

작동 방식

1. 브라우저에서 서비스에 접속하면, 서버에 요청을 한다.
2. 서버에서 데이터까지 포함 되어있는 완성된 html파일에 js를 포함시켜서 보내준다.
3. 유저는 바로 브라우저에 띄워진 화면을 볼 수 있고,(아직 기능 작동은 안됌) js링크를 확인후 다시 서버에 js를 요청한다.
4. js를 받아오면서 유저는 동적인 페이지를 사용할 수 있게 된다.

👉 장점

1. 초기 로딩 속도가 빨라짐
2. 서버따로 클라이언트 따로 작성하던 코드가 하나로 합쳐짐
3. SEO에 좋다
   ⇒ 모든 컨텐츠가 html에 담겨져 있어서 검색봇이 읽을게 많다.

👉 단점

1. 화면 깜박임이 있다.
   ⇒ 서버에서 파일을 다시 받아오기 때문이다
2. 사용자가 많을 경우 서버에 과부하가 걸리기 쉽다.
   ⇒ 클릭마다 페이지를 서버에서 가져와야하기 때문이다.
3. 페이지에서 기능이 작동하지 않을 수 있다.
   ⇒ 빠르게 페이지를 띄워주지만, js를 다운받지 못해서 처음에 기능들이 잘 작동하지 않을 수 있다.

SSR, CSR 어떤 방식을 사용해야할까?

양쪽의 장점만 모아 놓은 것을 isomorphic App이라고 한다.

그 예제가 Next.js이다. React에서 SSR방식을 사용하기 위해서는 별도의 셋팅이 필요한데 러닝커브가 높기 때문에 이것을 자동화 시켜주는 Next.js를 많이 사용한다.

Next.js 사용시 첫요청을 하면 SSR를 통해 html파일을 보여주고, 그 뒤로는 CSR방식으로 작동되기 때문에 CSR의 단점인 SEO와 첫 로딩속도가 느린 부분을 보완할 수 있게 된다.