Next.js를 사용해야하는 이유
next.js는 SSR로 렌더링 방식을 차용한 리액트 프레임워크이다.
기껏 CSR로 꿀빨았는데 왜 다시 SSR로 돌아온걸까?
그 이유는 next는 상황에 맞게 둘다 쓸 수 있기 때문이다.
예를 들면 어떤 페이지는 SSR방식으로 렌더링이 되고
또 어떤 페이지는 CSR방식으로 렌더링 되는 식이다.
쉽게 말해 SPA로 이루어진 앱에 SSR방식을 적용시키기 위해(+ 검색엔진최적화)
Next.js를 쓴다고 볼 수 있겠다.
Next.js에 'Learn' 코스를 요약하며 정리해본다.
항상 공문을 읽자.
https://nextjs.org/learn/foundations/about-nextjs
Learn | Next.js
Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more.
nextjs.org
(공문 참고)
리액트를 쓰려면 고려할 것들
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를-중심으로
[FE] SSR(Server-Side-Rendering) 그리고 SSG(Static-Site-Generation) (feat. NEXT를 중심으로)
앞전 포스트에서 CSR(Client-Side-Rendering)과 SSR(Server-Side-Rendering)에 대한 개념을 살펴보았다. 자세한 내용은 여기를 참고하자.이번 포스팅에서는 SPA 형태의 웹 서비스에서 SSR 방식을 적용하기 위해 Ne
velog.io
- 빠른 페이지 로드를 위해 자동으로 코드 스플리팅
- 최적화된 pre-fetching을 통한 클라이언트 사이드 라우팅 => html 먼저 받아서 화면에 보여주고 js가 로드되면 그때 interactive 해진다.
- 빌트인 CSS와 Sass 지원, 이런저런 CSS-in-JS 라이브러러리 지원
- 빠른 새로고침이 가능한 개발 환경
- serverless 함수로 API endpoint를 구성하기 위한 API 라우트 지원
기존 프로젝트에 Next.js를 도입해볼 예정
끝.