SSR 2

SSR(Server Side Rendering)과 CSR(Client Side Rendering)

CSR(Client-side Rendering) CSR은 웹 애플리케이션의 렌더링 방식 중 하나입니다. CSR은 클라이언트 측에서 서버에 초기 HTML을 요청하면 서버는 빈 HTML을 주고, 그다음 브라우저에서 JavaScript와 같은 언어를 사용해서 웹 페이지를 동적으로 생성하고 렌더링 해줍니다. CSR의 장점 사용자 경험 향상 : CSR은 웹 페이지를 로드한 이후 클라이언트 측에서 동적으로 콘텐츠를 생성하고 업데이트하기 때문에 사용자와의 상호작용에 따라 필요한 부분만 서버에 요청하고 렌더링 하기 때문에 페이지 업데이트가 빠르고 반응성이 높습니다. 서버 부하 감소 : 브라우저에서 렌더링 작업을 처리하므로 서버 부하가 상대적으로 적습니다. 서버와 클라이언트 분리 쉬움 : 서버는 API역할을 수행하거나 ..

TIL 2023.07.07

server component와 client component

NEXT.JS의 Component next.js의 일반적으로 작성하는 것들은 server component이다. html안에 javascript를 넣을 수 없다. hook도 사용 불가능. onClick 이벤트 같은 것도 노노 자바스크립트가 없으니 페이지를 로드할 때 속도가 빠르다. 자바스크립트를 넣고 싶으면 컴포넌트 맨 위에 'use client' 코드를 넣으면 됨 이 코드 아래 모든 컴포넌트는 client component가 된다. 하지만 자바스크립트를 넣으므로써 용량이 커지고 페이지 로딩속도가 느려진다는 단점이 발생한다. client component를 로드하려면 hydration이라는 과정을 거쳐야 하는데 그것 때문에 속도가 더 느려진다. hydration?? => SSR(server-side Re..

Next.js 2023.06.28
728x90