data-fetching

Pre-rendering and Data Fetching

기본적으로 Next.js는 모든 페이지를 Pre-render한다.
Next.js가 client-side JavaScript에서 작업하기 전에 미리 html을 만들어둔다.

페이지가 브라우저에 로드될 때 해당 자바스크립트 코드가 작동하고 완전한 인터렉티브 페이지가 되도록 만든다. 이를 Hydration이라 한다.

브라우저에서 JavaScript를 disable 하고 앱을 실행하면 앱의 UI가 자바스크립트가 적용되지 않은 채 정적인 HTML로 나타나는 것을 확인할 수 있다.

Pre-rendering vs No Pre-rendering

SSG(Static Generation) VS SSR(Server-side rendering)

Pre-rendering하는 두가지 형태의 SSG와 SSR이 있다.

SSG(Static Generation) - 추천(캐싱 때문)

HTML은 build-time에 만들어지고 각각 request 보낼때 재사용함 getStaticProps를 export해서 사용

SSR(Server-side Rendering)

HTML이 각각 request 보낼 때 만들어짐. getServerSideProps를 export 하여 사용

getStaticProps

아래와 같이 async를 사용하여 export하게 되면 Next.js에서는 빌드할 때 해당 페이지를 Pre-render한다.

const Blog = ({posts}) =>{
	return(
    	<ul>
        	{posts.map((post) => (
            	<li> {post.title} </li>
            ))}
        </ul>
    );
};

export async function getStaticProps(){
	// 외부 데이터를 불러올 수 있다.
    const res = await fetch("https://.../posts");
    const posts = await res.json();
    
    // { props: posts } 이렇게 return 해주면 Blog 페이지는 빌드타임시에 post를 가져온다.
    
    return {
    	props: {
        	posts,
        },
    };
}

export default Blog;

개발모드(development mode)에서는 Static Generation을 사용하는 페이지라도 모든 페이지가 각 리퀘스트에 pre-render 된다.

getStaticProps 사용 시점

• 유저가 request 하기에 앞서서 페이지를 렌더링 할 때 필요한 데이터가 있을 때
• 데이터가 공식적으로 캐싱될 수 있을 때

getServerSideProps

async로 export 해주게 되면 매 request 때마다 페이지에 있는 내용들을 pre-render해 줄 것이다.

function Page({ data }) {
	// Render data ...
}

// This gets called on every request
export async function getServerSideProps(){
	// Fetch data from exrernal API
    const res = await fetch("https://.../data");
    const data = await res.json();
    
    // Pass data to the page via props
    return{
    	props: {
        	data,
        },
    };
}

getServerSideProps 사용 시점

• 데이터를 자주 업데이트 하거나 매 요청마다 콘텐츠가 달라지는 경우