항상 말로만 듣던 CSR, SSR, SSG 그래서 그게 뭐야?

CSR

Client Side Rendering으로, 클라이언트측에서 처음 웹페이지에 접근시 빈 HTML로 렌더링 된 후 다시 화면이 그려지는 것이다.

장점

• 처음에 모든 파일을 다운받기 때문에 페이지 전환이 MPA보다 빠를 수 있다.
• 자연스러운 페이지 이동과 사용자 경험(UX)을 제공할 수 있다.

단점

• 처음 페이지 접근시 빈 HTML이기 때문에 크롤러가 컨텐츠를 제대로 읽을 수 없어 SEO에 취약하다.
• 첫 페이지 렌더링시 페이지 로드에 필요한 모든 소스를 한번에 다운받기 때문에 성능적으로 문제가 될 수 있다.
• 모든 파일을 다운받고, 실행되기전까지 사용자는 빈페이지를 보게된다.

SSR

Server Side Rendering으로, 클라이언트측 브라우저에서 서버에 페이지 요청을 하면 서버측에서 뷰 구성에 필요한 HTML을 응답으로 반환하여 화면을 그린다.

장점

• 서버에서 모든 컨텐츠를 로드하여 응답으로 보내주기 때문에, SEO에 이점이 있다.
• 페이지 로드에 필요한 데이터를 다 불러왔기 때문에 첫 페이지 로딩이 빠를 수 있다.

단점

• 매번 서버에서 동적으로 페이지를 렌더링하기 때문에 서버 부하가 발생하거나, 비용이 많이 들 수 있다.
• 매번 페이지를 새로 전달받기 때문에 서버에서 페이지를 생성하는 시간이 소요된다.
• 초기 페이지 로드가 너무 무겁다면 오히려 사용자 경험을 해칠 수 있다.

SSG

Static Site Generation으로, 처음 웹페이지에 접근시 앱 빌드 과정등에서 사전에 준비된 HTML을 받아서 뷰로 보여준다.

장점

• 빌드 과정에서 준비된 HTML이기 때문에 SEO에 이점이 있다.

단점

• 수 많은 페이지를 정적 파일을 생성하는것은 무리가 있다.
• 수 없이 바뀌는 데이터가 있는 페이지라면 좋지 않은 선택이다.

📌 한 줄 회고

뜻 자체는 정말 이름 그대로 인 것 같고, Next.js에 대해서 공부해봐야겠다.