백고등어 개발 블로그
NextJS 란? 본문
💡 React에서 SSR(Server Side Rendering)을 쉽게 하기 위해 만들어진 프레임워크입니다.
😄 0. SSR 과 CSR 에 관하여
우선, SSR에 대한 간단한 설명과 그리고, CSR 과의 차이점을 알아보겠습니다
SSR(Server Side Rendering): 사용자가 웹 페이지를 방문했을 때 브라우저에서 자바스크립트 코드를 다운받아 해석할 때까지 기다리지 않고, 서버에서 보여질 HTML을 미리 준비해 클라이언트(브라우저)에 응답하는 방식입니다
- 장점
- 검색 엔진 최적화 가능
- ⇒ 페이지가 로딩될 때 데이터도 함께 로드되기 때문에 검색엔진에 해당 데이터들이 걸리기 때문
- 한 번에 렌더링 되기 때문에 초기 로딩 속도가 빠르다
- 단점
- 페이지 이동 시 페이지를 요청할 때마다 중복되는 파일을 내려 받아야 하기 때문에 서버 부하가 CSR보다 많다
- React에서 SSR을 구현할 경우 코드와 구조가 복잡해질 수 있다
CSR(Client Side Rendering): 자바스크립트 파일을 브라우저에서 해석해 렌더링하는 방식입니다 비어있는 HTML 문서 위에 사용자의 요청마다 페이지를 구성하여 보여줍니다 React, Angular, Vue 등의 SPA(Single PageApplication)들이 이에 해당됩니다
- 장점
- 데이터 요청이 있을 때만 서버에 요청 하기 대문에 서버에 부담이 적다
- 단점
- 모든 JS파일을 다운 받아와야 하기 때문에, 서비스 규모가 커질경우 초기에 로드가 오래 걸린다
- 초기 로딩에 빈 HTML 을 보내기 때문에 검색 엔진 최적화에 불리하다
🎯 SSR 과 CSR 에 대한 좀더 자세한 내용은 아래의 링크를 참고해주세요
😁 1. NextJS의 특징
💡 NextJS는 SSR을 기반으로 하지만, 페이지가 로드된 이후엔 CSR 방식을 차용합니다
- 페이지는 서버가 그립니다 pages 폴더안에 폴더를 만들면, 해당 라우팅의 페이지들은 서버측에서 먼저 로드해줍니다(즉, pages 폴더 내부에 구성된 폴더 구조를 통해서 실제 라우팅 구조를 만들 수 있습니다)
- 페이지가 그려진 이후에 페이지 내부에서 동적인 데이터를 패치(axios 등)하는 과정은 CSR의 방식을 따릅니다 이때의 데이터들은 일단 페이지가 로드된 이후에 클라이언트 측에서 다시 렌더되며 불러와집니다 그렇기 대문에 검색 엔진에 걸리지 않습니다
- 그렇기에 만약 페이지가 로드될 때 함께 데이터가 패칭되어야 하는 상황이라면 nextJS 의 데이터 패칭 방식(getStaticProps, getServerSideProps 등)을 이용해 첫 렌더에 데이터가 패칭될 수 있도록 처리 해주어야 합니다
NextJS CSR, SSR 요청 구분 하기!
🧐 1-1. SSR을 가능하게 하는 사전 렌더링(Pre-rendering)과 데이터 패칭(Data-fetching)
💡 NextJS는 기본적으로 모든 페이지를 사전 렌더링 합니다 이는 클라이언트에서 모든 작업을 하는 대신 서버에서 HTML 을 미리 생성한다는 것을 말합니다 고로 사전 렌더링의 결과로 더 나은 성능과 검색 엔진 최적화를 얻을 수 있습니다
사전 렌더링의 두 가지 형태
NextJS는 두 가지 형태의 사전 렌더링을 가지고 있습니다
⇒ 정적 생성과 SSR입니다 차이점은 언제 HTML 파일을 생성하는가 입니다
NextJS는 사전 렌더링 형태에 관하여 각 페이지마다 형태를 다르게 가져갈 수 있습니다
- 정적 생성 특징
- 프로젝트가 빌드되는 시점에 HTML 파일들이 생성됩니다
- 생성된 HTML 파일들은 각 요청에서 재사용됩니다
- SSR 특징
- 각 요청마다 HTML을 새롭게 생성하는 방법입니다
- 항상 최신 상태를 유지할 수 있습니다
사전 렌더링 형태에 관한 고려 사항
- 유저의 요청이 적고 자주 업데이트되는 데이터가 없는 페이지라면 정적 생성을 사용하는 것이 좋습니다
- 마케팅 페이지
- 블로그 포스트
- 전자 상거래 제품 목록
- 도움말 및 문서
- 반면 유저의 요청이 많고 자주 업데이트되는 데이터가 있는 페이지라면 SSR 형태를 사용하는 것이 좋습니다
- SNS
NextJS의 데이터 패칭 메소드
- getStaticProps
- "빌드 시에 딱 한 번"만 호출되고, 바로 static file로 빌드됩니다. 따라서, 이후 수정이 불가능합니다.
- 장점은 호출 시 매번 데이터 패치를 하지 않으니 getServerSideProps보다 성능면에서 좋습니다
function Blog({ posts, rand }) { return ( <> <h1>{rand}</h1> <ul> {posts.map((post) => ( <li key={post.id}>{post.name}</li> ))} </ul> <Link href="/"> <a className="nav-link">뒤로가기</a> </Link> </> ) } export const getStaticProps: GetStaticProps = async () => { const rand = Math.floor(Math.random() * 10) const res = await fetch('https://jsonplaceholder.typicode.com/users') const posts = await res.json() return { props: { posts, rand, }, } } export default Blog
- getServerSideProps
- "페이지에 요청이 있을 때마다" 호출되어 사전 렌더링됩니다
- 동적 데이터가 있는 페이지에 사용하면 됩니다
- 매 요청마다 호출되므로 성능은 getStaticProps에 비해 떨어지지만, 항상 최신 상태의 데이터를 유지할 수 있습니다
function Blog({ posts, rand }) { return ( <> <h1>{rand}</h1> <ul> {posts.map((post) => ( <li key={post.id}>{post.name}</li> ))} </ul> <Link href="/"> <a className="nav-link">뒤로가기</a> </Link> </> ) } export const getServerSideProps: GetServerSideProps = async () => { const rand = Math.floor(Math.random() * 10) const res = await fetch('https://jsonplaceholder.typicode.com/users') const posts = await res.json() return { props: { posts, rand, }, } }
'Next.js' 카테고리의 다른 글
Next.js 사내 스터디 시작 (0) | 2021.12.10 |
---|