1. CSR

• 클라이언트 서버 렌더링의 약자로, 클라이언트는 서버로부터 HTML, CSS, JS 파일들을 한번에 받아서 클라이언트 측에서 렌더링을 한다.
• 모든 파일을 서버로부터 한번에 받기 때문에 클라이언트에서의 첫 화면이 로딩되는 데 시간이 걸린다.
• 사이트의 특정 페이지로 이동해도 서버에게 그 페이지를 요청하는 것이 아닌, 처음에 서버로부터 받은 파일에 모든 페이지의 정보가 있기 때문에 사이트의 첫 화면 로딩 이후로는 서버와의 통신을 하지 않는다. ⇒ 부드러운 페이지 전환
• 구글과 같은 검색엔진에서 다른 사람들에게 우리의 사이트가 잘 검색되기 위해서는 검색엔진이 우리의 사이트의 meta 정보를 가져갈 수 있어야 하는데(크롤링), CSR로 만들어진 사이트는 meta 정보를 거의 가지고 있지 않기 때문에 (index.html은 거의 텅 비어 있다.) CSR의 사이트는 검색엔진에서 검색이 원활하게 되지 않는다는 단점이 있다.

2. SSR

• 서버 사이드 렌더링의 약자로, HTML, CSS, JS 파일들을 서버 측에서 모두 렌더링한 상태로 클라이언트 측에 전송한다.
• CSR와 다르게 사이트의 특정 페이지에 접근할 때, 클라이언트는 서버에게 특정 페이지의 렌더링된 화면을 요청한다. (서버와의 통신이 계속해서 존재함)
• 서버에서 이미 렌더링된 화면들은 클라이언트 측으로 전송되었을 때 사이트의 meta 정보를 가지고 있는 상태이므로 검색엔진이 이러한 meta 정보를 활용해서 사이트가 검색엔진에서 검색이 잘 될 수 있도록 만들어 준다.
• 페이지 전환할 때마다 새로고침이 된다.

NEXT.js

• 처음 로드하는 페이지만 SSR 방식
• 그 이후는 CSR 방식

** Open Graph **

<meta property="og:site_name" content="Movie App" />
<meta property="og:description" content="this is Movie App site.." />

• meta 정보는 Open Graph 라는 개념을 통해서 작성한다.
• Open Graph meta는 property 속성과 content 속성을 가진다.