[Next.js] css 모듈 사용 / 데이터 패칭 (geStaticProps, getServerSideProps)

CSS 모듈 사용

import styles from './Home.module.css';

function HomePage(){
	return <h1 className=[styles.title}>Hello World<h1>;
}

export default HomePage;

 - `Home.module.css` 파일을 만들어 `styles.title` 처럼 사용한다.

 

전역 CSS 사용

//pages/app.js
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
	return <Conponent {...pageProps} />;
}

export default MyApp;

- `pages/app.js` 파일에서 임포트 한다.

 

데이터 패칭 (geStaticProps, getServerSideProps)

 - Next.js는 데이터 패칭 메서드를 제공하여 서버 사이드 렌더링과 정적 사이트 생성을 지원한다.

• getStaticProps : 정적 생성시에 데이터를 패칭할 때 사용됩니다. 페이지를 빌드 시점에서 미리 생성하고, 요청 시점에는 HTML 파일을 제공하여 빠르게 렌더링할 수 있다.

사용시점 

• 페이지가 정적으로 생성되어야 할 때
• 데이터가 자주 변하지 않거나 변동이 적은 경우

특징

• 빌드 시점에서 호출되어 HTML을 미리 생성한다.
• 사용자 요청 시에는 이미 생성된 HTML이 제공되므로 응답 속도가 빠르다.
• 데이터가 변경될 경우 재빌드를 해야한다.

export async function getStaticProps(){
	//데이터 패칭
	const res = await fetch('https://api.example.com/data');
    const data = await res.json();
    
    //페이지에 props로 전달
    return {
    	props: {
        	data
            }
          };
       }
       
 export default function Homepage({ data }) {
 	return (
    	<div>
        	<h1>Data:</h1>
            <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
    );
 }

 - 페이지를 빌드 시점에서 미리 생성하여, 클라이언트 요청 시 빠르게 렌더링 할 수 있게 한다.

 

export async function getStaticProps(){
	//데이터 패칭
	const res = await fetch('https://api.example.com/data');
    const data = await res.json();
    
    //페이지에 props로 전달
    return {
    	props: {
        	data
            }
          };
       }

 

비동기 함수 

- 'getStaticProps'는 비동기 함수로, 페이지를 빌드할 때 데이터를 패칭하기 위해 사용된다. Next.js는 이 함수가 반환하는 데이터를 페이지 컴포넌트에 'props' 로 전달한다.

 

데이터 패칭

- 'fetch'를 사용하여 외부 API ('https://api.exple.com/data')로부터 데이터를 가져온다. await을 사용하여 비동기 요청이 완료될 때까지 기다린다. 응답(res)의 JSON 형식으로 반환하여 data 변수에 저장한다.

 

반환값

 - 'getStaticProps'는 객체를 반환하며, 이 객체는 props 속성을 포함한다. props에는 페이지 컴포넌트에 전달할 데이터가 포함된다. (data라는 이름의 속성을 전달하고 있음)

 export default function Homepage({ data }) {
 	return (
    	<div>
        	<h1>Data:</h1>
            <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
    );

컴포넌트 정의 : HomePage 라는 함수형 컴포넌트를 정의하고 있다. 이 컴포넌트는 data를 props로 받아서 렌더링한다.