Next.js?
Next.js
Vercel(Frontend deploy flatform)이 만든 React Framework(for production)
라이브러리를 표방한 React의 장점은 살리되 다양한 편의 기능들을 추가시킨 Framework의 필요를 충족시킨 Framework.
SSR VS CSR
Server Side Rendering
렌더링이 서버 측에서 일어난다.
클라이언트로 전달될 HTML 파일 내용 일부를 미리 그려서 내려주는 것. 랜더링 준비를 끝마쳐서 보내기 때문에 클라이언트 랜더링 속도를 빠르게 할 수 있다.
서버에서 랜더 가능한 상태로 클라이언트에게 전달되기 때문에 JS가 다운되는 동안 사용자는 무언가 보고 있을 수 있다.
- 클라이언트 랜더링의 속도를 빠르게 해서, 사용자 체감 속도 증진
- 검색 엔진이 JS를 실행하지 않고 크롤링이 가능 (SEO)
Client Side Rendering
렌더링이 클라리언트 측에서 일어난다.
서버가 요청 받으면 HTML, JS를 보내줘서 클라이언트가 그것을 받고 렌더링을 시작한다.
React를 사용할 때 SSR을 고민하거나 사용할 때 Next.js 를 사용한다.
그 외 주요 기능
-
각종 Optimization
-
Hot code reloading
-
Automatic Routing
-
Automatic Code Splitting
-
Prefetching
-
Dynamic Components Import
-
Static Exports
CNA
create next.js app
Pre-rendering
데이터를 미리 렌더링하여서 js를 불러오는 중에도 사용자가 화면을 확인할 수 있다.
getServerSideProps
export async function getServerSideProps(context) {
return {
props: {}, // will be passed to the page component as props
}
}getServerSideProps를 사용하면 SSR로 동작한다.
(개발자도구 설정에서 enable javascript 체크 해제시에도 동작한다 -> JS 없이도 화면은 보여줌)
import React, {useState, useEffect} from 'react'
export default function Launches({data}) {
// pre-render 하지 않고 data fetch한 것
// const [data, setData] = useState(null);
// useEffect(() => {
// const fetchLaunches = async() => {
// const res = await fetch("https://api.spacexdata.com/v3/launches");
// const data = await res.json();
// setData(data);
// };
// fetchLaunches();
// }, []);
if (data == null) {
return null;
}
return (
<div>
<ol>
{data.map((launch, index) => (
<li key={index}>{launch.mission_name} </li>
))}
</ol>
</div>
)
}
export async function getServerSideProps() {
const res = await fetch("https://api.spacexdata.com/v3/launches");
const data = await res.json();
return {
props: {data}, // will be passed to the page component as props
}
}getServerSideProps에서 data를 fetch하고 props로 data를 설정 후, 컴포넌트의 인자로 data 설정해줘도 잘 작동한다.
getStaticProps
export async function getStaticProps(context) {
const res = await fetch("https://api.spacexdata.com/v3/launches");
const data = await res.json();
console.log("getStaticProps");
return {
props: {data}, // will be passed to the page component as props
}
}getServerSideProps와 비교했을 때, 똑같은 자리에 콘솔을 찍어봐도 getStaticProps는 처음 build 한 이후에 새로고침 해도 콘솔이 찍히지 않는다 -> 데이터 한번만 부름
전자는 새로고침할 때마다 콘솔이 뜬다 -> 데이터를 매번 다시 부른다
차이점을 생각해서 필요한 곳에 사용한다.
getServerSideProps VS getStaticProps
- 공통점
pre-render가 필요할 때 사용한다.
- 차이점
- getStaticProps
빌드 시 한번만 호출. 고정된 내용을 불러올 때 사용하기.
(+) 한번만 호출하기 때문에 성능이 좋다.
(-) 수정이 불가능하다. 내용이 바뀌는 데이터 부를 때는 사용 X - getServerSideProps
page가 요청 받을 때마다 호출. 동적 데이터에 사용하기.
(+) 내용 동적으로 수정이 가능하다.
(-) 성능은 전자에 비해 떨어진다.
- getStaticProps
