NextJs 서버 사이드에서 데이터 불러오기 - getServerSideProps

getServerSideProps 사용하기

페이지에서 getServerSideProps (서버 측 렌더링)라는 함수를 내보낼 때

Next.js는 각 요청에 대해 getServerSideProps에서 반환한 데이터를 사용하여 이 페이지를 미리 렌더링합니다.

이 기능은 자주 변경되는 데이터를 가져와서 최신 데이터를 표시하도록 페이지를 업데이트하려는 경우에 유용합니다.

https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props

Data Fetching: getServerSideProps | Next.js

 

사용 예제

import axios from "axios";

export const getServerSideProps = async ()=> {
    const { data : posts } = await axios.get("https://jsonplaceholder.typicode.com/posts");
    
    return {
    	props : {posts}
    }
}

export interface Post {
    id: number,
    userId: number,
    title: string,
    body: string
}

interface Props{
	posts: Post[]
}

const HomePage = ({posts}: Props) =>{
	return (
    <div>
    	<ul>
    	{
    	    posts.map(post=>(
    		    <li key={post.id}>{post.title}</li>
            ))}
        </ul>
    </div>
    )
}

export default HomePage

 

아래 이미지를 보면 ajax로 요청한 데이터가 아니라 처음부터 렌더링 된 값이라는 것을 알 수 있다.

아래에서 받아온 html을 보면 처음부터 html문서를 받는 부분에서부터 데이터가 채워져있는 것을 볼 수 있다.

 

 

 

postPage를 만들 때

만약 어떤 데이터를 불러올 때 값을 통해서 데이터를 불러와야한다면 아래와 같이 사용해야한다.

import axios from "axios";

export const getServerSideProps = async (context : NextPageContext)=> {
    const postId = context.query.id;
    const {data : post} = await axios.get(`https://jsonplaceholder.typicode.com/posts/${postId}`);
    
    return {
    	props : {post}
    }
}

export interface Post {
    id: number,
    userId: number,
    title: string,
    body: string
}

interface Props{
	post: Post
}

const PostPage = ({post}: Props) =>{
	return (
    <div>
    	<h1>{post.title}</h1>
        <h1>{post.body}</h1>
    </div>
    )
}

export default PostPage

- 위처럼 context를 활용해야한다.

- context는 아래와 같은 값들을 갖고 있다.

 

 

404 페이지 만들기

만약 제공되지 않은 경로를 입력했을 때 에러가 아닌 404페이지를 보여줘야한다.

 

파일을 404.tsx로 만들어준다.

그리고 위처럼 보여줄 컴포넌트를 만들면 된다.

근데 이때 완전 없는 경로는 위 페이지를 정상적으로 보여주는데

동적경로로 이미 있는 경로에서 수행하면 다시 에러를 출력한다.

그래서 getServerSideProps 함수 내에서 처리를 해줘야한다.

try/catch로 묶어서 에러가 발생할 경우에 notFound을 true로 설정해서 404페이지를 보여준다.

만약 axios에러나 404에러가 아닐경우의 상황에는 return을 빈값으로 내려준다.

그러면 다른 에러 페이지로 리다이렉트가 된다.

redirect : 서버가 리다이렉트를 지시하는 특정 HTTP 응답을 통해 웹 브라우저로 하여금 지정된 다른 URL로 재요청하라고 지시

 

 

500페이지 만들기

 

 

 

 

Link태그 사용할 때 동적 라우팅에 값 넣는 방법

- Link태그를 이용해서 동적 라우팅으로 된 페이지를 들어갈 때 아래와 같이 명시해야한다.

- href : 동적라우팅 부분은 [] 대괄호를 사용해서 넣어준다.

- as : as키워드에 실제 값을 넣어준다.

- key : 반복되는 값에서의 key값은 Link 태그에 심어줘야한다.

- passHref : Link태그안에 html 요소가 있을 경우 <a>태그로 감싸주고 passHref를 명시해야한다.

 

 

 

만약에 페이지를 먼저 불러오고나서 로딩 화면을 보여준 다음에 데이터를 불러오고 싶다면 

 

전역에서 불러오는것이 아닌 page 컴포넌트 안에서 불러와야한다.

 

 

_app.tsx에서는 getServerSideProps를 사용할 수 없다

대신 getInitialProps를 사용할 수 있다.

최상위에서 위와같이 설정하면 모든 하위 컴포넌트에서 Props로 갖고올 수 있다.

context가 필요한 경우 아래와 같이 정의한다.