SSR(server side rendering)이란 무엇일까
SSR(Server Side Rendering)은, 사용자가 웹사이트에 접속하면 브라우저가 서버에 페이지를 요청하고, 서버는 필요한 데이터를 가져와 HTML과 JavaScript 코드를 렌더링하여 브라우저에 전달하는 방식을 말합니다. 이 방식의 장점은 초기 렌더링 속도가 빠르고 SEO에 유리하다는 점입니다. 하지만 단점으로는 JavaScript 파일이 완전히 로딩되기 전까지는 사용자의 입력에 응답할 수 없어 상호작용에 딜레이가 발생하며, 새로운 컨텐츠를 불러올 때마다 새로고침이 필요하고 이로 인해 화면 깜박임이 발생할 수 있습니다.
CSR(client side rendering)란 무엇일까
CSR(Client Side Rendering)은, 초기에 웹 어플리케이션에 필요한 정적 리소스를 모두 다운로드하고, 이후에는 새로운 페이지 요청이 있을 때 필요한 데이터만 받아와 필요한 부분만 갱신하는 방식입니다. 이 방식의 장점은 화면의 필요한 부분만 데이터를 받아서 렌더링해주기 때문에 효율적이고 속도가 빠르며, 사용자에게 더 나은 사용성을 제공한다는 점입니다. 하지만 단점으로는 화면을 처음 로딩할 때 모든 정보를 서버에 요청해야 하기 때문에 로딩 속도가 다소 걸릴 수 있으며, SEO에 불리하고 DOM 조작이 빈번하게 일어나기 때문에 브라우저 성능이 느려질 수 있습니다.
하지만 코드분할을 하거나,프리로딩,프리페칭을 통해 CSR방식에서도 초기 로딩속도를 개선할수는 있다. 하지만 최적화기법은 프로젝트의 복잡성이 높아지기때문에 요구에 따라 적절히 선택해야한다.
어떤 렌더링 방식을 선택할지는 프로젝트의 특성에 따라 달라집니다. 데이터가 자주 바뀌지 않고 단순한 정보를 제공하는 페이지라면 CSR 방식을, 데이터가 빈번하게 바뀌는 경우에는 SSR 방식이 유리합니다. 최근에는 Next.js와 같은 프레임워크를 통해 CSR과 SSR을 혼합하여 사용할 수 있는 방법도 인기를 얻고 있습니다.
