
CSR(client-side rendering)
=> 브라우저에서 html을 실시간으로 만드는 방법
React, Vue.js는 이에 해당함.
장점:
1. 페이지 전환이 부드러움
2. 이쁜 사이트를 만들 수 있음.
단점:
1. 구글 검색 노출이 낮음
2. 페이지 로딩속도가 낮음
=> 투자대비 수입지표가 낮아짐
SSR(server-side rendering)
=> 서버에서 html을 미리 만들어서 보내주는 방법
Next.js, nuxt, sveltekit, remix 등이 해당함.
장점:
1. 조금 가벼운 편
2. 구글 검색 노출이 잘 됨.
3. 일부 선택적인 CSR이 가능
4. 최적화된 HTML 랜더링
단점:
1. 폴더 기반 라우팅으로 인해 예약파일이 많아져 복잡함.
2. 리액트의 미완성 기능을 도입해서 불편한 점이 생김.
3. 클라이언트 컴포넌트와 서버 컴포넌트를 나누어서 개발해야 함.
역사?
PHP, JSP, ASP 위 세 개의 서버페이지들은 당시 웹 서비스를 군림했었다.
하지만 하드웨어가 발달하면서 일반 사용자들도 성능이 좋은 페이지를 랜더링 할 수 있게 되어서
개발자들은 서버비용을 줄이고 최적화를 하는 방향으로 SSR => CSR으로 방향을 전환하게 되었다.
결론
SSR은 역사 속에 묻혔다가 다시 자리 잡은 느낌?
- 하지만,
SSR을 사용하게 되면 여태 공부해 왔던
=> useState, useEffect, react-query, redux, ajax, react-router, props 등
모든 것들이 필요 없어진다. ㅠㅠ
그리고 Next.js는 풀스택 프레임워크로
=> 서버+프론트 두 가지 맛을 한 번에 즐길 수 있다!
Next.js는 React 업그레이드 버전이라고 들었는데, 아쉽게도 SSR을 사용하면
React에서 배웠던 문법들 반 이상이 날아간 느낌..?
차차 배워봐야 알겠지만, 솔직히 나온 지 오래된 게 아니라 신뢰가 안 가는 부분도 조금 있다.
이번에 백엔드 지인이랑 Spring + Next.js 사이드 프로젝트를 계획 중이라 열심히 공부에 임할 생각이다.
취업을 향해 한 걸음씩. 아자아자 파이팅!!😆
'Next.js' 카테고리의 다른 글
Next.js + MongoDB 연동 (0) | 2023.07.05 |
---|---|
client/server component (0) | 2023.07.05 |
최적화된 이미지 넣는 법 (0) | 2023.07.05 |
라우팅 - 여러페이지 만들기 (0) | 2023.07.05 |
Next.js 설치 및 개발환경 셋팅법 (0) | 2023.07.04 |

CSR(client-side rendering)
=> 브라우저에서 html을 실시간으로 만드는 방법
React, Vue.js는 이에 해당함.
장점:
1. 페이지 전환이 부드러움
2. 이쁜 사이트를 만들 수 있음.
단점:
1. 구글 검색 노출이 낮음
2. 페이지 로딩속도가 낮음
=> 투자대비 수입지표가 낮아짐
SSR(server-side rendering)
=> 서버에서 html을 미리 만들어서 보내주는 방법
Next.js, nuxt, sveltekit, remix 등이 해당함.
장점:
1. 조금 가벼운 편
2. 구글 검색 노출이 잘 됨.
3. 일부 선택적인 CSR이 가능
4. 최적화된 HTML 랜더링
단점:
1. 폴더 기반 라우팅으로 인해 예약파일이 많아져 복잡함.
2. 리액트의 미완성 기능을 도입해서 불편한 점이 생김.
3. 클라이언트 컴포넌트와 서버 컴포넌트를 나누어서 개발해야 함.
역사?
PHP, JSP, ASP 위 세 개의 서버페이지들은 당시 웹 서비스를 군림했었다.
하지만 하드웨어가 발달하면서 일반 사용자들도 성능이 좋은 페이지를 랜더링 할 수 있게 되어서
개발자들은 서버비용을 줄이고 최적화를 하는 방향으로 SSR => CSR으로 방향을 전환하게 되었다.
결론
SSR은 역사 속에 묻혔다가 다시 자리 잡은 느낌?
- 하지만,
SSR을 사용하게 되면 여태 공부해 왔던
=> useState, useEffect, react-query, redux, ajax, react-router, props 등
모든 것들이 필요 없어진다. ㅠㅠ
그리고 Next.js는 풀스택 프레임워크로
=> 서버+프론트 두 가지 맛을 한 번에 즐길 수 있다!
Next.js는 React 업그레이드 버전이라고 들었는데, 아쉽게도 SSR을 사용하면
React에서 배웠던 문법들 반 이상이 날아간 느낌..?
차차 배워봐야 알겠지만, 솔직히 나온 지 오래된 게 아니라 신뢰가 안 가는 부분도 조금 있다.
이번에 백엔드 지인이랑 Spring + Next.js 사이드 프로젝트를 계획 중이라 열심히 공부에 임할 생각이다.
취업을 향해 한 걸음씩. 아자아자 파이팅!!😆
'Next.js' 카테고리의 다른 글
Next.js + MongoDB 연동 (0) | 2023.07.05 |
---|---|
client/server component (0) | 2023.07.05 |
최적화된 이미지 넣는 법 (0) | 2023.07.05 |
라우팅 - 여러페이지 만들기 (0) | 2023.07.05 |
Next.js 설치 및 개발환경 셋팅법 (0) | 2023.07.04 |