DEV Community

Composite
Composite

Posted on

1

CSR? SSR? 그냥 적재적소에 써라!

자, CSR과 SSR 이 있다. 이 둘의 차이점은 기본적으로 알고 있을 거라 믿고 시작하겠다.
몰라? 화면 표현을 클라이언트에게 모두 전가하느냐, 아니면 서버가 어느정도 개입하느냐 그 차이잖아.

둘의 장단점이 있다면,

  • CSR 장점
    • 정적 파일만 제공하는 웹 서버 게시가 가능해져 더 다양한 게시 제공자(특히 Github Pages)에 서비스가 가능하다.
    • 클라이언트와 서버의 경계가 명확해 확실한 업무분리가 가능하다.
  • CSR 단점
    • 트래픽 유발이 많아진다 (그래서 캐시관리가 중요하지)
    • 클라이언트 환경에 따라 차이가 크다 (흔히 말하는 누군 되고 안되고)
  • SSR 장점
    • 서버의 트래픽을 절약할 수 있다. (필요한 정보만 뿌리면 되니까)
    • SEO에 유리하다
  • SSR 단점

    • 클라이언트와 서버의 경계가 모호하다 (거의 풀스택이 요구된다)
    • 정적 파일만 게시 가능한 제공자에 서비스가 불가능하다.
  • CSR에 유리한 분야

    • 관리 패널같이 주제가 명확한 프로그램 (즉, 레이아웃이 거기서 거기라면 유리)
    • 모바일 웹앱과 같이 적은 리소스, 적은 템플릿으로 특정 장치에 동적 컨텐츠 제공하는 서비스
  • SSR에 유리한 분야

    • 쇼핑몰, 뉴스 같이 컨텐츠 중심의 동적 페이지 기반 서비스
    • 검색 및 소셜 네트워크와 연동이 잦고 이들의 입지가 중요한 서비스

누가 CSR이 좋냐, SSR이 좋다 이딴 식으로 편애하는 글이 있으면 모두 다 씹고 내 제안 따라라. 모든 디자인 패턴은 각기 장단점이 있기 때문에 목적에 맞게 적재적소에 쓰는 것이 옳다. 세상에 완벽한 디자인 패턴은 존재하지 않는다는 것만 기억하라.

SI인 경우 팁(?)

  • 만약 관리 프로그램(ERP 등)에 SSR 한다는 아키 있다면 죽빵 갈기거나, 그 프로젝트를 나가는 게 정신건강에 좋다. 너에게 모든 걸 떠넘기겠다는 뜻이다. (node.js 로 mybatis 만들 자신 있다면 말리지 않겠다!?)
  • 만약 대국민 서비스(포털 등)에 CSR 한다는 아키 있다면 싸다구 날리거나 프로젝트 튀는 게 니 미래에 좋다. 너를 시험하겠다는 뜻이다. (node.js와 css 자바 오라클까지 다 니꺼?!)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (3)

Collapse
 
kakadais profile image
kakadais

ㅋㅋ 문제는, 'IE는 반드시 되야 하는디요' 라는 말은 논리로 대화 할 수 없는 경지라는 거? (2021년 현재 공공 플젝 실화. 심지어 여러개).
CSR/SSR과는 다른 문제라고 생각하고 싶어도 IE 이야기를 아직까지 한다고 생각해 보시면. 골때립니다. ㅋ
작년까지는 어쩌다 엮여서 했었고, 올해 넘어오는 와중에는 드랍 했습니다.
아름다운 대한민국입니다.

Collapse
 
composite profile image
Composite • Edited

펄~럭~
저는 대기업 프로젝트 근무중인데 크롬 강제해서 편하긴 한데... 일단 대부분 대기업들은 죄다 크롬 쓰는데 공기관은... 어쩔 수가 없어요. 크롬 쓰는데 예산 산정해야 할 겁니다. 누가 나서겠나요. 그냥 IE 요구하는 게 더 싸죠...ㅋㅋ...에휴... 공무원 대가리 쪼개고 싶네요...
공기관에서 반디집도 함부로 못 씁니다.

Collapse
 
darrenkwondev profile image
DarrenKwon

글 재밌게 잘 쓰시네요. 잘 읽었습니다 ㅋㅋㅋ

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay