[드림코딩엘리] Next.js 주요개념 (2강)

개념정리 

Next.js와 React 의 차이점

라이브러리와 프레임워크의 차이라고 볼 수있다

프레임워크는 큰 단위의 솔루션을 제공해준다. 골격이 정해져있다 반면에 라이브러리는 큰 골격이 정해져 있지는 않지만 여러기능에 따라서 사용자가 원하는대로 사용하면 된다는 느낌

프레임워크인 Next.js는 리액트로 웹앱을 개발하는데 리액트 만으로는 힘든 정말 많은 것들을 가능하게 해주기 때문에 필요성이 강조된다. 

프레임 워크의 이점 : 서버사이드 랜더링(+하이브리드 랜더링), 풀스택 파일을 베이스로 한 라우팅, seo솔루션 제공

 

Next.js의 철학과 잡고가야 할 포인트 

버셀에서 2016년 최초공개

pass(cloud flatform as at service) :  클라우드에서 서비스를 배포하려면 알아야 할 갖은 기능들이 있는데 이것을 수동적으로 설정하지 않고 필요한 기능들을 알아서 관리해주는 (배포 관리가 쉽다) 

리액트 기반 오픈소스 웹 프레임워크 서버사이드 + 스태틱사이드 제너레이션 등등 다양한 랜더링 기능이 있다

 

리액트의 부족한점은 무엇일까? 왜 Next.js가 나왔을까??

Next.js의 6가지의 중요한 원칙을 알아보자

1. 복잡한 설정을 하지 않아도 프레임워크를 사용하기 쉬울 것
2. 자바스크립트만으로 풀스택으로 개발을 할 수 있다
3. 개발자들이 설정을 하지 않아도 코드스플리팅과 랜더링을 진행할게
4. 데이터 페칭을 설정가능하게 만들겠다
5. 요청사항을 예상가능하게 만들겠다
6. 배포를 손쉽게 만들겠다 풀스택은 까다로운점이 많지만 최대한 쉽게 만들어주겠다.

version.13에서는 굉장히 많은 것이 추가되었다

코드스플리팅 :  사용자가 보고 있는 현재 페이지에 대한 코드만 조금씩 보내줌으로써 굉장히 빨라진다

 

 

CSR SSG ISR SSR 4가지의 랜더링 방식과 장단점을 알아보자

1. csr

클라이언트(브라우저)가 주체자가 되서 랜더링을 한다

클라이언트는 처음 요청에 대해서 텅빈 html파일을 받는다 (사용자는 빈페이지를 보게 됨) 나중에 하이드레이션 가면 이거랑 좀 비슷하지만 가장 큰 차이점인것 같은 부분 

이후 js및 react 소스코드를 받아서 3개를 합셔서 리액트 소스코드의 컴포넌트를 돔요소로 바꾸고 이것을 돔 트리로 변환 된 것을 브라우저에 페인팅 해줘야 사용자가 볼 수 있음

클라이언트가 모든 소스코드를 다운 받아서 자기가 알아서 하는 것임

장점: 한번만 로딩이 되면 빠른 UI를 제공한다. 버튼 클릭 페이지 클릭에 대해서 부분적으로 필요한 부분을 부분적으로 서버에 요청을 해서 부분적으로 업데이트를 하면 된다.    서버의 부하가 작게 걸린다(처음제외 부분적으로만 데이터를 가져옴)

단점 : ttv가 오래 걸린다 페이지로딩시간이 길다. 처음으로 받아 온 빈 html에 대해서 다른 코드들을 다운 받아서 적용하고 페인팅하니깐

자바스크립트 활성화가 필수임 사용자가 브라우저에서 자바스크립트를 비활성화 한다면 볼 수가 없다

seo 최적화가 힘들다 얘네들이 돌아다니면서 확인을 하는데 빈페이지가 들어있는 것을 확인하게 되니깐 seo 최적화가 힘듦

보안에 취약하다 클라이언트에서 모든 것을 실행하기때문에 클라이언트가 많은 정보를 가지게 된다

cdn에 캐시가 안된다

cdn이란(컨텐트 딜리버리 네트워크): ??? 무엇인가?? 컨텐트 딜리버리 네트워크 중간에서 중간다리 역할을 해줌 매번 미국에 있는 서버에서 정보를 받아 오는 것이 아닌 사용자에 가까운 싱가폴에서 캐시 된 데이터를 가져온다. cdn에 안된다는 게 또 빈 html을 보여줘서인가? 아마 그럴 것 같음

 

2. ssg

랜더링하는 주체자가 서버인데 언제 렌더링되는지에 따라서 ssg인지 ssr인지 구분된다

ssg는 어플리케이션을 서버에 배포해서 처음 빌드할 때 랜더링 된다. 우리가 작성한 코드를 서버에서 실행하면서 리액트 코드를 html로 변환을 해주고 이것이 빌드할 때 렌더링 하는 것(그냥 요청왔을때 랜더링하는 게 아니라 미리 서버가 가지고 있다는 느낌)

장점: 페이지로딩시간이 빠르다 ttv 자바스크립트가 활성화가 안되어있어도 됨 seo최적화가 좋다 보안이 뛰어나다 cdn에 캐시가 된다

단점 : 빌드할 때 랜더링을 하므로 문제점이 생긴다 데이터가 정적이다.. 사용자별 정보제공이 어렵다 사실상 공식문서홈페이지에만 사용될 것 같네 이거는 이러한 문제점을 해결하기 위해 나온게 isr ssr임

 

3. isr

스태틱사이트를 만들지만 주기적으로 다시만드는 방식임

우리가 설정한 주기만큼 페이지를 다시 만들어준다.

장점: ssg의 장점 + 주기적인 업데이트

단점: 주기적이긴 하지만 실시간데이터는 절대 아님 , 사용자별 정보제공이 어려움 그냥 이것도 공식문서홈페이지겠네

 

4. ssr

요청시 렌더링이 된다 미리 랜더링해두는 것 아님 ! 

장점: ttv가 빠르고 자바스크립트 피ㅣㄹ요없고 seo최적화 좋고 보안이 뛰어나고 실시간 데이터를 사용할 수 있다 요청할 때 마다 데이터를 제공하기에 사용자별 필요한 데이터를 제공할 수 있다

단점: 요청시마다 서버에서 랜더링을 해서 보내기때문에 ssg isr에 비해서 느릴 수 있다 + 과부하가 걸릴 수 있다.(overhead가 높아진다) cdn에 캐시가 안됨 ssg / isr에 대한 보완은 될 수 있지만 전체적으로 봤을 때는 아직도 문제점이 있다 홈페이지 전체를 ssr로 할 수는 없다

 

하이브리드 웹앱은 무엇인가?

혼합 : 특정 목적을 달성하기 위해 두개 이상의 기능이나 요소를 결합한 것 (성능좋은 강력한 웹앱을 만들기 위해서 각기 다른 랜더링 방식을 혼합해서 만들어보자)

페이지 특징별로 랜더링방식을 달리하고 페이지 내에서도 부분별로 랜더링방식을 섞어서 만들어보자

하이브리드가 가능하기 위해서는 넥스트에서 하이드레이션이라는 컨셉을 사용하니깐 이게 뭔지 알아야 각기 다른 랜더링을 하는 넥스트의 방식을 좀 더 잘 이해할 수 있겠네

 

 

하이드레이션 컨셉 (구현특징)

하이브리드를 가능하게 한 하이드레이션 (수화시키다, 물로 가득채우다) 리액트로 가득채우다

클라이언트가 요청을 하면 넥스트는 프리랜더링 된 정직인 html페이지를 보여준다. 근데 여기는 아직 js코드가 포함되지 않았기 때문에 클릭해도 이벤트가 일어나지 않는다 이후 리액트라이브러리와 js코드를 보내주게 되고 그러면 정적인 페이지에 리액트로 가득채우게 된다 컴포넌트로 랜더링을 하게 된다 이후에는 액션에 대해서 이벤트가 발생하게 되는 형태로 바뀐다. 페이지가 깜빡이면서 바뀌는 것은 잘못만들어놓은것이네 정적인것에서 컴포넌트 랜더링 될 때 잘못 일어나는 반응이라고 보면 되니깐 이부분에 주의해서 만들어야겠네

 

 

 

웹만들 떄 키포인트

ttv 사용자가 우리 컨텐츠를 보는데 오랜 시간이 걸리지 않도록 하자

pre rendering이 되는 방식에서 정말 중요한 것은 tti 

csr와 ssr의 차이점은 처음에 html을 주는 형식인 것 같은데 csr은 빈것 ssr은 정적인 웹페이지를 전달해주네 이게 다르네 어짜피 둘 다 액션에 대해서 이벤트를 줄 순 없지만 ssr은 사용자가 볼 수 있는 것이 있네(정적인 html)

그러니깐 ssr은 정적인것에서 사용자가 사용할 수 있는 페이지로 변환하는 게 빨라지는게 중요하군

걍 시간을 줄이자

 

랜더링방식을 언제 어느 곳에서 사용하는지 알아보자

정답이 아닌 참고용으로 사용하면 되는 규칙임

사용자의 로그인이 필요한지를 생각하자 (사용자별로 달라지는 데이터인지 아닌지를 생각해야 함) 

얼마나 자주 변경이 되는지를 생각하자 

사용자로그인 필요없고 데이터가 변경 안되면 ssg임 쥰내 정적인 것

사용자로그인 필요없고  데이터가 변경이 되지만 자주 변경 안되면? isr 사용하면 됨

사용자로그인 필요없고  데이터가 변경이 자주된다면? ssr / 하이브리드 골격은 isr ssg로 만들고 필요한 부분만 ssr로 만들어보자

사용자로그인 필요함 csr ssr 하이브리드 세개 중 사용하면 됨

 

 

 

 

2.5강

랜더링 순서를 알려면 네트워크 받아오는 속도를 조절해서 볼 수도 있네 개 신기함 네트워크 오른쪽 클릭 slow클릭

csr인지 ssr인지 구분할 수 있기도 하겠네 처음에 빈 html을 받아온다? csr

2.7강

csr ssg isg ssr 이런 순서대로 점점 보완관계를 가지고 있구나