Next.js
리액트 프레임워크
SEO(Search Engine Optimization)을 위한 SSR(Server-Side Rendering) 때문에 많이 쓴다고 알고 있다.
넥스트에서 제공하는 튜토리얼을 해석하면서 왜 쓰는지 알아봐야겠다
Create a Next.js App
완전한 리액트 웹 어플리케이션을 빌드하라면 고려해야할 중요한 사항들이 있음
- 코드는 웹팩같은 번들러에 의해 번들링되어야하고, 바벨같은 컴파일러에 의해 변환(transform)되어야함.
- 코드스플리팅같은 프로덕션 최적화를 해야함.
- SEO와 성능을 위해 어떤 페이지를 정적으로 프리렌더를 원하고 싶을 수 있음. SSR, CSR을 사용하고 싶을 수도 있음
- 리액트 앱을 데이터 저장소에 연결하기 위해 서버쪽 코드를 작성해야할 수도 있음
💡 참고 )
- 번들링?
모듈화했던 파일들을 하나로 묶어주는 작업
https://kangdanne.tistory.com/190 - 바벨?
구식 브라우저 환경에서 호환가능한 코드로 변환하는 데에 사용되는 트랜스파일러 - 컴파일 vs 트랜스파일
컴파일은 다른 언어로 변환, 트랜스파일은 비슷한 수준의 추상화를가진 다른 언어로 변환(ex. es6 → es5)
https://ideveloper2.tistory.com/166 - 코드스플리팅?
당장 필요없는 코드는 나중에 필요할 때 불러오는 방식
https://velog.io/@velopert/react-code-splitting
프레임워크는 이런 문제들을 해결할 수 있다. 사용하기 좋게 올바른 수준의 추상화를 가지고 있어야하고, DX도 좋아야 함.
Next.js: The React Framework
넥스트가 개발자 경험을 위해 겨냥하고 있는 것들
- 직관적인 페이지 기반 라우팅 시스템 (동적 라우트 지원)
- 페이지단위로 지원 하는 프리렌더링, SSG, SSR
- 빠른 페이지 로딩을 위한 자동 코드 스플리팅
- 최적화된 prefetch를 통한 클라이언트 사이드 라우팅
- Fast Refresh 개발 환경
- 확장 어쩌고..
자세한 예시
동적 라우트
pages/blog/[slug].js→/blog/:slug(/blog/hello-world)pages/[username]/settings.js→/:username/settings(/foo/settings)pages/post/[...all].js→/post/*(/post/2020/id/title)
클라이언트 사이드 라우팅(Client-side routing)
<Link /> 컴포넌트 제공
뷰포트 안의 링크 컴포넌트는 SSG를 사용하는 페이지에 대해 기본적으로 프리페치(prefetch)됨. 서버에서 렌더된 라우트에 의한 데이터는 프리페치 되지 않음.
→ 이게 뭔 소리냐면 링크 컴포넌트가 화면에 보이면 링크 클릭 안해도 넥스트에서 링크랑 연결된 페이지 코드를 미리 로드함. 그래서 페이지 전환이 부드러움
새로고침도 안함. 이전에 받아온 데이터는 서버에 요청도 다시 안함.
참고로 Link 컴포넌트를 쓸 때, 칠드런으로 <a> 를 왜 넣어야할까?
안 넣어주면 next에서 if문으로 알아서 넣어주는 부분이 있긴함
공식 문서 설명을 좀 더 찾아보니, <a> 태그로 href 어트리뷰트를 넣어서 SEO에 손상이 가지 않게 하려고.
프리렌더링
기본적으로 넥스트는 모든 페이지에 프리렌더가 적용됨. 이게 무슨말이냐면 넥스트가 매 페이지를 미리 html로 생성(generate)한다는 거임.
생성된 html은 그 페이지에 필요한 최소한의 자스 코드랑 연결됨. 브라우저에 의해 페이지가 로드되면, 자스 코드가 실행되고 페이지를 완전 interactive하게 만들어줌. (이 과정을 hydration이라고 부름)
프리렌더링에는 두 가지 형태가 있음. HTML을 생성하는 방식에 차이가 있음.
- Static Generation(추천됨): HTML을 빌드 타임에 각 페이지별로 생성하고 해당 페이지로 요청이 올 경우 이미 생성된 HTML 문서를 반환
- Sever-side Rendering: HTML은 매 요청마다 생성될 것임.
넥스트에서는 위 방식을 매 페이지마다 고를 수 있긴함.
넥스트에서는 성능상의 이유로 SSR 보다는 SSG를 사용하길 추천함. 정적으로 생성된 페이지는 성능 향상을 위한 추가 구성 없이 CDN에서 캐싱될 수 있음.
클라이언트 측 데이터 페칭으로, 페이지의 일부는 클라이언트 측 자스로 완전히 로딩될 수도 있음.
💡 CDN? Content Delievery Network 콘첸츠 전송 기술. 서버와 사용자 사이의 물리적인 거리를 줄여 로딩 시간을 줄임. 각 지역의 캐시 서버를 분산 배치해서 원본 서버가 아닌 캐시 서버가 콘텐츠를 전달함.다음 편에는 SSG, SSR, Hydration에 대해 알아보겠음.
