NodeBird 시작

김민석·2021년 3월 20일
0

NodeBird 클론코딩

목록 보기
1/10

SSR(Server Side Rendering) 방식

장점

렌더링에 필요한 부분만 가져오기 때문에 로딩의 전체적인 시간이 빠르다.

단점

렌더링을 할 때, 서버(and 데이터베이스)까지 요청을 보내서 하나의 완성된 페이지를 렌더링하기 때문에 화면에 무언가 뜨는 시간까지가 오래걸린다.


CSR(Client Side Rendering) 방식

SPA. 즉, Singple Page Application 형태로 구현

장점

렌더링을 할 때, 프론트 서버에서 바로 UI를 요청하기 때문에 화면에 무언가 표시되는 속도가 빠르다.

단점

  • Single Page이므로 첫 로딩에 추후 사용될 모든 UI를 가져와 한다. 따라서 느려질 수 있다.
  • 검색엔진에서 데이터가 없기 때문에 로딩창만 있는 페이지로 인식할 수 있다고 한다. 이렇게 되면 엔진에 노출이 안될 가능성이 있다.

하나의 html 파일과 JS, CSS를 이용해서
화면이 넘어가는 것처럼 보이나 그 안에 구성 요소만 바꿔주는 것으로 화면 전환 효과를 냄
허나 이후 사용 해야할 화면에 해당하는 부분을 한번에 가져와야하기 때문에 전체적인 속도는 느림.
그러나 데이터를 제외하고 우선 렌더링이 실시되기 때문에 사용자가 느끼기에는 바로 화면이 뜨는 것으로 보인다.


CSR의 단점을 보완한 기술들 (NEXT를 사용하여 보완할 수 있음)

코드스플리팅 :

CSR 방식으로 진행하되,
모든 페에지에 대한 정보를 다 보내는 게 아니라, 방문할 것으로 예상되는 페이지에 대한 정보만 보내게 만드는 것.

서버사이드 렌더링 :

첫 방문만 서버사이드 렌더링을 해주고 이후 방문에서는 나머지는 리액트 방식을 사용.

0개의 댓글