본문 바로가기

소프트웨어/JavaScript

[JavaScript] Next.js 대략 개념 잡아보기

https://medium.com/@msj9121/next-js-제대로-알고-쓰자-8727f76614c9

 

Next.js 제대로 알고 쓰자

Next.js는 React의 SSR(Server Side Rendering)을 쉽게 구현할 수 있게 도와주는 간단한 프레임워크입니다. React도 SSR을 고려하여 설계되었기 때문에 자체적으로도 구현이 가능하긴 하지만, 개발환경을 만

medium.com



Next.js가 신세계인가? 찬찬히 살펴봐야 겠다^^
위 블로그 보고, 간단하게 정리해봄

---
Next.js는 React의 SSR(Server Side Rendering)을 쉽게 구현할 수 있게 도와주는 간단한 프레임워크 

React도 SSR을 고려하여 설계되었기 때문에 자체적으로도 구현이 가능하긴 하지만, 개발 환경을 만들기 위해서는 복잡하다.
이를 해결하기 위한 방법으로 Next.js가 나왔다. 사용법도 간편하다.

[SSR]일반적인 React 렌더링 방식은 render()함수가 먼저 실행되고, 그 다음에 ComoponentDidMount()함수를 통해 데이터를 가져와서 다시 한 번 렌더링이 된다. 

[CSR : Client Side Rendering]
Next.js는 getInitialProps()라는 함수를 사용하기 때문에 데이터를 먼저 가져와서 한번에 렌더링을 해준다.
SSR은 한 번에 렌더링이 되기 때문에 초기로딩 속도는 빠르지만, page 이동시에는 CSR보다 느리다.
이유는 page 요청시 마다 중복되는 파일을 내려받아야 하기 때문이다.
하지만 CSR은 초기 로딩 속도는 느리지만, 첫 페이지에서 필요한 데이터만 불러서 사용한 된다.