리액트의 ssr을 쉽게 구현 할 수 있게 도와주는 간단한 프레임워크 (리액트는 라이브러리)
next.js의 pre-rendering을 통해서 페이지를 미리 랜더링 하며 완성된 html을 가져오기 때문에
사용자와 검색엔진 크롤러에게 랜더링된 페이지를 전달할 수 있다.
#SSR(server side rendering)
-클라이언트 대신 서버에서 페이지를 준비하는 원리
-리액트에서는 클라이언트 사이드 렌더링(CSR) 하기 때문에 서버에 영향을 미치치않고,
서버에서 클라이언트로 응답해서 보낸 html 도 거의 비어있음
-next.js 에서는 서버사이드 랜더링을 이용하므로 사용자와 검색 엔진 크롤러에게 바로 렌더링 된 페이지를 전달할 수 있어
검색엔진 최적화에 좋은 영향을 줌
*CSR방식의 문제점
-서버에서 데이터를 가져올떄 지연 시간 발생으로 UX측면에서 좋지 않음
-검색 엔진에 검색시 웹 크롤링이 동작할때 내용을 제대로 가져와 읽을 수 없기에 검색엔진 최적화에 문제가 됨
#설치하기
npx create-next-app@latest
npx create-next-app@latest --typescript ./ (현재폴더에 설치할때 ./ 쓰기)
#next.js 구조
1)pages
-페이지들 생성하기
-index.tsx가 처음 "/"페이지가 됨
-_app.tsx는 공통되는 레이아웃을 작성함. 모든 페이지에 공통으로 들어가는걸 작성할때 이곳에 작성함
(url을 통해 특정 페이지에 진입하기 전 통과하는 인터셉터 페이지)
2)public
-이미지같은 정적(static) 에셋들을 보관함
3)styles
-스타일링을 처리해 주는 폴더
-모듈(module) css는 컴포넌트 종속적으로 스타일링 하기 위한 것이며 확장자 앞에 moudle을 붙여줘야함
4)next.config.js
-Nextjs는 웹팩을 기본 번들러로 사용함
-웹팩에 관한 설정을 이파일에 해줄 수 있음
5)tsconfig.json
-typescript를 사용하기 위해서 정의해 준곳
#pre-rendering
-Next.js는 모든 페이지를 위한 html을 클라이언트 사이드에서 자바스크립트로 처리하기 전 생성하는 것
(= 모든 페이지를 프리랜더 함)
이와 같은 이유로 seo 검색엔진 최적화가 잘되는것
#data fetching
리액트에서는 useEffect안에서 가져오나
nextjs에서는 3가지 방법으로 가져옴
1)getStaticProps
- Static Generation으로 빌드할때 데이터를 불러옴(미리 만들어줌)
- getStaticProps 함수를 async로 export하면 getStaticProps에서 리턴되는 props를 가지고 페이지를 프리랜더함
- 빌드 시에 딱 한 번"만 호출되고, 바로 static file로 빌드되어, 빌드 이후 수정이 불가능하다.
return{
props:post;
}
*사용해야 할때
- 페이지를 렌더링 하는대 필요한 데이터가 사용자의 요청보다 먼저 빌드시간에 필요한 데이터를 가져올때
- headless cms에서 데이터를 가져올때
- 데이터를 사용자별이 아닌 공객적으로 캐시할 수 있을때
- 페이지가 미리 랜더링 되어야하고(seo의 경우) 매우빨라야 할때
(성능을 위해 cdn에서 캐시할 수 있는 html 및 json파일을 생성함)
- 유저의 요청마다 fetch할 필요가 없는 고정된 내용의 페이지를 렌더링할 때
- 쿼리 매개변수 또는 HTTP 헤더와 같이 요청 시에만 사용할 수 있는 데이터는 사용할 수 없다.
2)getStaticPaths
- Static Generation으로 데이터에 기반하여 pre-render시 특정한 동적 라우팅 구현(pages/post/[id].js)
(동적라우팅 + getStaticProps)
-프리랜더에서 정적으로 getStaticPaths에서 호출하는 경로들을 가져옴
return{
path:[
{params:{id:'1'}},
{params:{id:'2'}},
],
fallback: ...
}
*paths
-어떠한 경로가 프리랜더가 될지 결정함
-예시로 pages/posts/[id].js 로 동적 라우팅을 사용하는 페이지가 있다면 위와 같은형태가 됨
-빌드하는 동안 /posts/1과 /posts/2를 생성함
*params
-페이지의 이름이 pages/posts/[postid]/[commentid] 라면 params는 postid,commentid가 됨
-페이지 이름이 /pages/[...slug]와 같이 모든 경로를 사용한다면 params는 slug가 담긴 배열이여야 함
['postid','commentid']
*fallback
-false라면 getStaticPaths로 리턴되지 않는것은 모두 404페이지가 뜸
-true라면 getStaticPaths로 리턴되지 않는 것은 404로 뜨지않고, fallback페이지가 뜸
예) 로딩중 같은 파일
+++fallback
callback 은.. 특정 조건이 맞으면 시스템 등에서 호출하는 방식이고
fallback은 만일을 대비해 ... 그러니까, 에러 발생시 대처하는 의미
3)getServerSideProps🤩🤩
- Server Side Rendering으로 요청이 있을때 데이터를 불러옴
-getServerSideProps를 async로 export하면, nextjs는 각요청마다 리턴되는 데이터를 getServerSideProps로 프리랜더함
- 빌드와 상관없이, page가 요청받을때마다" 호출되어 pre-rendering한다.
- 내용을 언제든 동적으로 수정이 가능
- 서버사이드에서만 실행되고, 절대로 브라우저에서 실행되지 않는다.
- 매 요청시 마다 실행되고, 그 결과에 따른 값을 props로 넘겨준 뒤 렌더링을 한다.
return{
props:{data}
}
* 사용해야 할때
-요청할때 데이터를 가져와야 하는 페이지를 미리 렌더해야할때
-서버가 모든 요청에 대한 결과를 계산하고, 추가 구성없이 cdn에 의해 결과를 캐시할 수 없기 때문에 첫번째 바이트까지의 시간은 getStaticProps보다 느림
Next.js by Vercel - The React Framework
Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build static and dynamic websites and web applications.
nextjs.org
♦️정리
Next.js의 데이터 패칭 방식은 getStaticProps, getStaticPath 와 getServerSideProps이 있다.
getStaticProps은 유저의 요청마다 fetch할 필요가 없는 고정된 내용의 페이지를 렌더링할 때,
getStaticPath는 어떤 페이지를 미리 Static으로 빌드할 지 정하는 api로, getStaticProps + 동적라우팅이 필요할 때 적합하다.
getServerSideProps는 자주 변경되는 페이지로, 페이지를 렌더링하기전에 반드시 fetch해야 할 데이터가 있을 때 사용한다. 성능이 매우 떨어지기 때문에 꼭 필요한 곳에만 사용한다.
인용👀
인용 👀
#마무리
Next에서 pages 폴더의 영역은 프론트엔드와 백엔드, 즉 서버와 공유하고 있는 공간
해당 폴더의 파일에서 export 하는 getServerSideProps와 getStaticProps 등의 함수는 Next의 서버로 전달되어 주어진 임무를 수행하고 이를 다시 컴포넌트 단에 결과를 반환해주는 것
순수 React 에서는 해당 영역이 온전히 컴포넌트, 즉 프론트의 영역이기 때문에 저렇게 함수를 선언해봐야 서버로 전달되지 않는다.
즉 핵심은 NEXT는 보이진 않지만 어딘가에 자체 server를 가지고 구동되고 있으며 해당 서버는 node.js 환경에서 돌아가고 있다는 것 이다.
#무엇을 사용할까?
1. 굳이 SEO 적용 또는 데이터 pre-rendering이 필요 없다면 CSR 방식
2. 정적 문서로 충분한 화면이면서 빠른 HTML 문서 반환이 필요하다면 SSG 방식
3. 매 요청마다 달라지는 화면이면서 서버 사이드로 이를 렌더링 하고자 한다면 SSR 방식
'React' 카테고리의 다른 글
| Vercel로 배포하기 (0) | 2023.01.12 |
|---|---|
| Next.js styled-component (0) | 2023.01.10 |
| 영화 리스트 (1) | 2022.10.01 |
| 투두리스트 (0) | 2022.09.10 |
| 코인 가져오기 (0) | 2022.09.10 |
