Next.js
Next.js를 사용해야하는 이유
삐옹
2023. 7. 3. 19:03
next.js는 SSR로 렌더링 방식을 차용한 리액트 프레임워크이다.
기껏 CSR로 꿀빨았는데 왜 다시 SSR로 돌아온걸까?
그 이유는 next는 상황에 맞게 둘다 쓸 수 있기 때문이다.
예를 들면 어떤 페이지는 SSR방식으로 렌더링이 되고
또 어떤 페이지는 CSR방식으로 렌더링 되는 식이다.
쉽게 말해 SPA로 이루어진 앱에 SSR방식을 적용시키기 위해(+ 검색엔진최적화)
Next.js를 쓴다고 볼 수 있겠다.
Next.js에 'Learn' 코스를 요약하며 정리해본다.
항상 공문을 읽자.
https://nextjs.org/learn/foundations/about-nextjs
(공문 참고)
리액트를 쓰려면 고려할 것들
1. 번들링과 컴파일러를 써야한다
2. 코드 스플릿팅같은걸 해서 생산성 최적화를 해야한다.
3. 퍼포먼스나 SEO를 위해 몇몇 페이지는 그냥 미리 렌더링시키고 싶을 수 있다. ssr 또는 csr 을 사용하고 싶을 수도 있다(리액트는 CSR 방식이지만).
4. data 저장소랑 앱을 연결하기 위해 server-side 코드를 쓰고싶을 수 있다.
이걸 Next.js가 해결해준다.
SEXY
Next.js 의 특징
- 페이지를 기반으로 라우팅을 한다. 이걸로 다이나믹 라우트 쓸 수 있음. 직관적!
- 각 페이지 마다 Pre-rendering(SSG와 SSR)이 지원된다. SSG와 SSR에 대해 아래 블로그에 잘 설명이 되어있다.
https://velog.io/@longroadhome/FE-SSRServer-Side-Rendering-그리고-SSGStatic-Site-Generation-feat.-NEXT를-중심으로
- 빠른 페이지 로드를 위해 자동으로 코드 스플리팅
- 최적화된 pre-fetching을 통한 클라이언트 사이드 라우팅 => html 먼저 받아서 화면에 보여주고 js가 로드되면 그때 interactive 해진다.
- 빌트인 CSS와 Sass 지원, 이런저런 CSS-in-JS 라이브러러리 지원
- 빠른 새로고침이 가능한 개발 환경
- serverless 함수로 API endpoint를 구성하기 위한 API 라우트 지원
기존 프로젝트에 Next.js를 도입해볼 예정
끝.