Next.js의 역할

5o_hyun·2023년 5월 25일
0
post-thumbnail

SSR(Server Side Rendering) 방식

장점

렌더링에 필요한 부분만 가져오기 때문에 로딩의 시간이 빠름

단점

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

CSR(Client Side Rendering) 방식

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

장점

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

단점

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

하나의 페이지에 JS, CSS를 이용해서 화면이 넘어가는 것처럼 보이게해서 화면 전환 효과를 냄

허나 이후 사용 해야할 화면에 해당하는 부분을 한번에 가져와야하기 때문에 전체적인 속도는 느림.
그러나 데이터를 제외하고 우선 렌더링이 실시되기 때문에 사용자가 느끼기에는 바로 화면이 뜨는 것으로 보인다.

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

코드스플리팅

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

서버사이드 렌더링

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

=> 어드민페이지는 검색엔진이 필요없고 좀늦게떠도 관리자에서 실행하는거니까 next말고 걍 리액트로 만들어주곤하지만, 대부분은 이 방식으로 만들어줌

결론 : 검색엔진이 필요하고(구글,네이버검색시나오고) 사용자가 사용해야할때 필요함

profile
학생 점심 좀 차려

0개의 댓글