Next js (1) 기초지식

서론

SSR을 사용하기 위해서 왜 사용해야 하고 그럼 현재 우리 서비스는 어떻게 구성되어 있는지 알아가는게 중요하다고 생각해서 정리 시작

---

본론

개념 정리

• csr
• ssr
• 웹서버
• CloudFront
• CDN

CSR

• client side rendering
• 프론트 서버에서 한번에 번들되어 있는 js 파일을 다운받아서 진행된다. 해당 js는 브라우저에서 돌아가서 화면에 보여준다.
• 다운로드 때문에 SSR에 비해 초기 진입속도가 느리다 ⇒ code splitting 으로 해결 가능

SSR

---

• server side rendering
• 서버에서 데이터까지 모두 포함하여 페이지를 구성한 후 브라우저에 전달

SSR의 단점 : 불필요한 부분까지 렌더링이 된다.

CSR의 단점 : 초기 진입 속도가 느리다. SEO에 취약하다.

1. 브라우저에서 JavaScript를 다운로드하고 React를 실행함.
2. 사용자, 페이지가 서로 상호작용하여 다른 페이지로 이동할 땐, Server가 아닌 CSR방식으로 브라우저에서 처리함.

위 두가지 단점을 해결하면서 두 방식의 장점을 살리고자..

Next.js라는 프레임워크가 생겼다. Next.js를 사용하여 첫페이지는 백엔드 서버에서 렌더링하여 빈 html이 아닌 데이터가 채워진 html을 받아 검색최적화 문제를 해결하고 그 다음 페이지부턴 CSR방식을 적용하여 필요한 데이터 부분만 갱신해 서버의 부하도 줄이게 한 것이다.

웹서버

---

1. 명칭 정리

• Web server: 하드웨어 ( web 서버가 설치되어 있는 컴퓨터 ) 소프트 웨어 ( 웹 브라우저 클라이언트로 부터 http 요청을 받아 정적인 컨텐츠( .html, jpeg, css 등) 을 제공하는 컴퓨터 프로그램
• WAS: DB 조회나 다양한 로직 처리를 요구하는 동적인 컨텐츠를 제공하기 이해 만들어진 web application server

3.웹 서버를 구성하기 위해서는 webserver 와 was 가 필요합니다.

클라이언트에서 요청 사항 있으면 webServer에서 해당 서버로 보내줍니다.

예를 들어 80포트 api/name 으로 요청 하면

web server 에서 해당 서버로 보내줍니다.

web Server 80

node 3000

flash 4000

web server로 들어오면 정적인 파일을 요청하면 그 파일을 주고 다른 동적인 파일을 원하면 해당 파일을 던져주면 됩니다. 80 포트로만 들어오기 때문에 해당 부분만 보안 처리를 해두면 됩니다.

nginx 가 interface역할을 해줄수 있습니다.

현재 우리 회사 같은 경우는 이러한 작업들은 clouldfront 와 로드 벨런스가 대신 해주고 있습니다.

정적인 파일들은 cloudFront 가 해주고 있고

특정 url api는 로드벨런스가 잡아주고 있다고 생각하면 됩니다.

Clould Front

---

• Clould Front는 aws 서비스 중에서 제공하는 CDN 서비스 입니다. 캐싱을 통해 사용자에게 좀 더 빠른 전송 속도를 제공함을 목적으로 합니다. 전 세계 이곳 저곳에 Edge Server(Location)을 두고 Client 에 가장 가까운 Edge Server를 찾아 지연시간를 최소화 시켜 빠른 데이터를 제공합니다.

CDN

---

• CDN이란 ( Content Delivery Network 의 약자 ) 지리적 제약 없이 전 세계 사용자에게 빠르고 안전하게 콘텐츠를 전송할 수 있는 콘테츠 전송 기술을 의미합니다. 서버와 사용자 사이의 물리적인 거리를 줄여 콘텐츠 로딩에 소요되는 시간을 최소화 합니다. CDN은 각 지역에 캐시 서버를 분산 배치해 근접한 사용자의 요청에 원본 서버가 아닌 캐시 서버가 콘텐츠를 전달합니다.