getServerSideProps
getServerSideProps는 Next.js에서 사용되는 서버 사이드 렌더링(SSR)을 지원하기 위한 특별한 함수입니다. 이 함수는 서버에서 데이터를 가져와 컴포넌트에 전달하는 데 사용됩니다. getServerSideProps를 사용하면 페이지가 서버에서 렌더링되고 클라이언트로 전송되기 전에 데이터를 미리 가져올 수 있으므로 초기 로딩 속도를 최적화하고 검색 엔진 최적화(SEO)를 향상시킬 수 있습니다.
getServerSideProps 함수의 주요 특징과 사용 방법은 다음과 같습니다:
-
서버 측 데이터 가져오기:
getServerSideProps함수는 서버 측에서 실행되며 서버 측에서 데이터를 가져올 수 있습니다. 이는 클라이언트 측에서 데이터를 가져오는 것보다 빠른 초기 로딩을 제공합니다. -
컴포넌트의 초기 데이터 패치: 서버 측에서 데이터를 가져온 후, 해당 데이터는 컴포넌트의
props로 전달됩니다. 이것은 페이지가 클라이언트로 전달되기 전에 초기 데이터를 포함시킬 수 있는 효과적인 방법입니다. -
라우팅과 통합:
getServerSideProps는 라우팅과 원활하게 통합되며, 페이지 컴포넌트 내에서 데이터 요청을 처리하는 데 사용됩니다. -
서버 사이드 렌더링 제한:
getServerSideProps를 사용하면 해당 페이지만 서버 사이드 렌더링됩니다. 이는 정적 페이지 생성과 혼합하여 사용할 수 있으며, 특정 페이지에 대해서만 서버 사이드 렌더링을 활성화할 수 있습니다.
다음은 getServerSideProps 함수의 사용 예시입니다:
// pages/index.js
import React from 'react';
function Home({ data }) {
return (
<div>
<h1>Hello, Next.js</h1>
<p>Data from the server: {data}</p>
</div>
);
}
export async function getServerSideProps(context) {
// 서버에서 데이터 가져오기
const res = await fetch('https://api.example.com/data');
const data = await res.json();
return {
props: {
data,
},
};
}
export default Home;위의 코드에서 getServerSideProps 함수는 서버에서 데이터를 가져와 data라는 프로퍼티로 페이지 컴포넌트에 전달합니다. 이 데이터는 페이지가 서버에서 렌더링될 때 클라이언트에 초기 데이터로 전달됩니다.
getServerSideProps는 페이지 컴포넌트 내에서만 사용할 수 있으며, Next.js에서 서버 사이드 렌더링을 구현하고 데이터를 사전에 가져오는 데 매우 유용한 도구입니다.
getInitialProps
getInitialProps는 Next.js 버전 9.3.0 이전에 사용되던 서버 사이드 렌더링(SSR)과 데이터 가져오기를 위한 메서드입니다. 이 메서드는 서버에서 페이지를 렌더링할 때 데이터를 가져오고, 해당 데이터를 컴포넌트의 props로 전달하는 데 사용되었습니다.
하지만 Next.js 9.3.0 버전 이후, getInitialProps 대신 getServerSideProps 및 getStaticProps가 권장되는 방법으로 도입되었습니다. 이러한 새로운 메서드는 getInitialProps보다 더 명확하고 유연한 방식으로 서버 사이드 렌더링과 정적 생성을 지원합니다. 그럼 getInitialProps에 대한 예시를 보여드립니다.
// pages/index.js
import React from 'react';
function Home({ data }) {
return (
<div>
<h1>Hello, Next.js</h1>
<p>Data from the server: {data}</p>
</div>
);
}
Home.getInitialProps = async (context) => {
// 서버에서 데이터 가져오기
const res = await fetch('https://api.example.com/data');
const data = await res.json();
return { data };
};
export default Home;위의 코드에서 getInitialProps 메서드는 서버에서 데이터를 가져와 data를 페이지 컴포넌트의 props로 반환합니다. 이 데이터는 서버 사이드 렌더링 중에 페이지 컴포넌트로 전달됩니다.
그러나 이제는 getServerSideProps 또는 getStaticProps를 사용하여 라우트별로 데이터를 가져오는 것이 권장되며, 이러한 메서드를 사용하면 코드가 더 간결하고 명확해집니다. 새로운 메서드를 사용하면 데이터 가져오기와 서버 사이드 렌더링을 더욱 효율적으로 처리할 수 있습니다.
getStaticProps
getStaticProps는 Next.js에서 정적 생성(Static Generation) 페이지를 만들 때 사용하는 메서드입니다. 이 메서드를 사용하면 페이지를 빌드할 때 사전에 데이터를 가져와서 페이지에 주입할 수 있습니다. 그렇게 함으로써 초기 로딩 속도가 향상되며, 검색 엔진 최적화(SEO)에도 도움이 됩니다.
getStaticProps의 주요 특징과 사용 방법은 다음과 같습니다:
-
정적 생성 (Static Generation):
getStaticProps는 정적 생성 페이지에 사용되며, 이 페이지들은 미리 빌드되어 서버리스 환경에서 실행됩니다. 이것은 초기 로딩 속도를 향상시키고 서버 사이드 렌더링(SSR)을 구현하는 데 적합합니다. -
서버 렌더링:
getStaticProps는 서버에서 실행되며 서버 측에서 데이터를 가져올 수 있습니다.- 이 데이터는 페이지가 빌드될 때 한 번 가져와집니다.
-
라우팅과 통합:
getStaticProps는 라우팅과 논리적으로 통합되며, 동적 경로 및 파일 이름을 사용하여 동적 페이지를 생성할 수 있습니다. -
데이터 프리 페칭 (Data Prefetching): 페이지를 미리 렌더링할 때 필요한 데이터를 프리 페치하여 렌더링 속도를 높일 수 있습니다.
다음은 getStaticProps 메서드의 사용 예시입니다:
// pages/index.js
import React from 'react';
function Home({ data }) {
return (
<div>
<h1>Hello, Next.js</h1>
<p>Data from the server: {data}</p>
</div>
);
}
export async function getStaticProps() {
// 서버에서 데이터 가져오기
const res = await fetch('https://api.example.com/data');
const data = await res.json();
return {
props: {
data,
},
};
}
export default Home;위의 코드에서 getStaticProps 메서드는 페이지를 미리 렌더링할 때 데이터를 가져와 data를 페이지 컴포넌트의 props로 반환합니다. 이렇게 함으로써 데이터는 페이지가 생성되는 시점에 서버에서 가져와집니다.
getStaticProps를 사용하면 정적 생성 페이지를 효과적으로 구현하고 데이터 가져오기를 간단하게 처리할 수 있습니다. 페이지의 데이터 요구 사항에 따라 페이지를 미리 렌더링하여 초기 로딩 속도를 향상시키고 SEO를 향상시킬 수 있습니다.
