SSR CSR

SSR

SSR 은 Server Side Rendering 의 줄임말입니다

웹페이지를 브라우저에서 렌더링하는 대신에 서버에서 렌더링합니다

브라우저가 서버의 URI로 GET 요청을 보내면 서버는 정해진 웹페이지 파일을 브라우저로 전송합니다

그리고 서버의 웹페이지가 브라우저에 도착하면 완전히 렌더링됩니다

브라우저가 다른 경로로 이동할때마다 서버는 이 작업을 다시 수행합니다

CSR

CSR 은 Client Side Rendering 을 의미합니다

일반적으로 CSR은 SSR의 반대로 여겨집니다

웹페이지를 브라우저(클라이언트)에서 렌더링합니다

브라우저의 요청을 서버로 보내면

서버는 웹페이지의 골격이 될 단일 페이지와 JavsScript파일을 클라이언트에 보냅니다

클라이언트가 웹페이지를 받으면 브라우저에서 완전히 렌더링된 페이지로 바꿉니다

브라우저가 다른 경로로 이동하면 브라우저가 요청한 경로에 따라 페이지를 다시 렌더링합니다

차이점

CSR과 SSR의 주요 차이점은 페이지가 렌더링되는 위치입니다. SSR은 서버에서 페이지를 렌더링하고, CSR은 브라우저(클라이언트)에서 페이지를 렌더링합니다. 브라우저는 사용자가 다른 경로를 요청할 때마다 페이지를 새로고침 하지 않고, 동적으로 라우팅을 관리합니다.

Use SSR

• SEO(Search Engine Optimization) 가 우선순위인 경우, 일반적으로 SSR(Server Side Rendering) 을 사용합니다.
• 웹 페이지의 첫 화면 렌더링이 빠르게 필요한 경우에도, 단일 파일의 용량이 작은 SSR 이 적합합니다.
• 웹 페이지가 사용자와 상호작용이 적은 경우, SSR 을 활용할 수 있습니다.

Use CSR

• SEO 가 우선순위가 아닌 경우, CSR을 이용할 수 있습니다.
• 사이트에 풍부한 상호 작용이 있는 경우, CSR 은 빠른 라우팅으로 강력한 사용자 경험을 제공합니다.
• 웹 애플리케이션을 제작하는 경우, CSR을 이용해 더 나은 사용자 경험(빠른 동적 렌더링 등)을 제공할 수 있습니다.