본문 바로가기

SSR

(2)
CSR? SSR? SSG? ISR ? NextJS 에서 구현해 보자 SSG [ Static Stie Generation ] 빌드시에 HTML 에 데이터를 담아서 미리 파일을 만들고 유저에게 보여줍니다. 장점 : 이미 만들어진 페이지를 보여주는 형식이여서 서버 부담이 적고 응답 속도가 빠릅니다. 활용 : 보통 마케팅 페이지나 블로그 글 등 변화가 거의 없는 사이트에 적합합니다. 단점 : 데이터가 바뀐다면 빌드와 배포 과정을 다시 해야합니다. DB에서 데이터가 바뀐다해도 다시 빌드과정을 거치지 않는다면 이미 만들어진 페이지에는 변화를 줄 수 없습니다. 그래서 동적 컨텐츠를 포함한다면 SSG 를 사용하지 않습니다. 그렇다면 동적 컨텐츠를 만들 때 어떤 방식을 사용해야 될까요? CSR , SSR , ISR 를 사용하면 됩니다. 하지만 이 세가지 방법에도 차이점이 있습니다. CS..
SSR(서버사이드랜더링) vs CSR(클라이언트사이드랜더링) [ 렌더링이란 ? ] 현재 페이지를 그리기전 DOM tree + CSSOM을 결합해 만들어진 렌더링 트리를 이용해 레이아웃단계를 거쳐 페인팅(화면에 그려주는 것)되는 과정을 말한다. 브라우저 동작 과정 에 렌더링 관한걸 적어두었다 참고하면 좋을꺼같다 ㅎㅎ 렌더링 방식에는 2가지가 있다. 1. SSR - Server Side Rendering - Client에서 요청시마다 페이지가 새로고침되며, 화면이 어떻게 보여질지 Server에서 해석하여 Client에게 보내주는 방식 - 웹의 초기부터 SPA에 대한 구현체들이 나오기 전까지는 전통적인 웹사이트들은 모두 MPA 형태로 서비스해 왔다. MPA는 페이지를 이동할 때마다 새로운 페이지를 요청한다. 모든 템플릿은 서버 연산을 통해서 렌더링하고 완성된 페이지 형..