기술공부/Next.js

Next.js란 무엇이고 왜 쓸까?

helpilsang 2025. 3. 5. 13:18

Next.js는 풀스택 웹 애플리케이션을 구축하기 위한 React 기반 프레임워크

UI는 React로 구성되고
제공되는 기능으로는
페이지 라우팅, 컴파일, 번들링 등의 작업을 자동으로 처리해서 개발자가 설정에 사용하는 시간을 대폭 감소시켜주지

우선 왜 Next를 찾게 되었는지 보면

React는 Csr을 통해 SPA를 구축하는 라이브러리기 때문에 
resource를 전부 다운받은 후에야 화면을 보여주니까 초기 로딩이 오래 걸리는 단점이 있어 
프로젝트가 커지고 resource가 많아질수록 더욱 오래걸리겠지? 
이럴경우 UX의 관점에서 좀... 별로야 내생각엔

그럼 어떤방법이 있을까?
SSR 을 사용하면되지

Next.js는 기본적으로 빌드시에 만든 모든 페이지를 미리 렌더링해 
무슨말이냐면 
너희가 구조적으로 만들어놓은 js나 tsx 파일을 html로 미리 변환해 놓는다는 말이야
그래서 로딩시 바로 보여줄수가 있지

그 이후에 서버의 데이터를 필요로 하는 페이지에 대해서는 요청 시에 SSR을 통해서 HTML을 생성하게되는 구조야

SSG도 제공하는데 이걸 어디에 쓸지는 잘 생각해보고 써야될 것 같아 
변하지 않는 HTML을 사용할때 사용하는건데 회원가입이나 로그인 html은 바뀌지 않으니까 이거로 하면 빠르게 보여줄 수 있지 않을까 하는 생각이 있어

결론은 
Next.js는 SSR을 지원하고 SEO에 유리하기 때문에 많이 사용하는 것 같아
그렇다고 해서 Next.js에서 CSR를 사용하지 못하는건 아니야 
Hook이나 react의 기타기능을 사용하려면 CSR환경에서만 동작이 가능한데
SSR의 하위 컴포넌트로 만들어서 둘을 섞어서 사용할 수도 있어

열심히 공부해보자. 파이팅!