[Next.js] Next.js 버전 별 특징(13 이전, 13, 14)

Routing

• Page Router → App Router이전 버전까지는 pages/ 디렉토리에 파일들을 생성하며 페이지 구성을 함
• 13버전 부터는 app/ 디렉토리를 제공
• 13버전이 등장하며 가장 큰 변화가 생긴 부분 중 하나는 페이지 라우팅 방식

페이지 라우팅 방식

• 13 이전 버전(Pages Router)

└── src/
    └── pages/
        ├── _app.tsx
        ├── _document.tsx
        └── index.tsx

└── src/
    ├── layouts/
    │   └── testLayout.tsx
    └── pages/
        ├── _app.tsx
        ├── _document.tsx
        ├── index.tsx
        └── test.tsx

└── src/
    ├── components/
    │   └── test/
    │       └── testHeader.tsx
    ├── layouts/
    │   └── testLayout.tsx
    └── pages/
        ├── _app.tsx
        ├── _documnet.tsx
        ├── index.tsx
        └── test.tsx

└── src/
    ├── components/
    │   └── ...
    ├── layouts/
    │   ├── aTestLayout.tsx
    │   ├── bTestLayout.tsx
    │   └── cTestLayout.tsx
    └── pages/
        ├── test/
        │   ├── aTest.tsx
        │   ├── bTest.tsx
        │   └── cTest.tsx
        ├── _app.tsx
        ├── _document.tsx
        └── index.tsx

• 13 이후 버전(App Router)

└── src/
    └── app/
        ├── layout.tsx // root layout
        └── page.tsx // root page

└── src/
    └── app/
        ├── test/
        │   ├── layout.tsx
        │   └── page.tsx
        ├── layout.tsx
        └── page.tsx

└── src/
    └── app/
        ├── test/
        │   ├── testHeader.tsx
        │   ├── layout.tsx
        │   └── page.tsx
        ├── layout.tsx
        └── page.tsx

└── src/
    └── app/
        └── test/
            ├── (aTest)/
            │   └── aTest/
            │       ├── layout.tsx
            │       └── page.tsx
            ├── (bTest)/
            │   ├── bTest/
            │   │   ├── layout.tsx
            │   │   └── page.tsx
            │   ├── cTest/
            │   │   ├── layout.tsx
            │   │   └── page.tsx
            │   └── layout.tsx
            ├── layout.tsx
            └── page.tsx

Data Fetching

getServerSideProps/getStaticProps -> async fetch/cache/next revalidate

• 13 이전 버전까지는 getServerSideProps / getStaticProps등을 정의하며 SSR과 SSG 렌더링 방식들을 활용

Data Fetch 방식

• 13 이전 버전(getServerSideProps/getStaticProps)

export const getServerSideProps = async() => {
 	try {
   		const response = await fetch("/api/test/server");
   
   		if(response.status === 200) {
     		const data = await response.json();
     			return {
       			  props: { data }
     			}
   		}
   
        return {props: {} };
    } catch (error) {
   		console.error(error);
   		return {props: {} };
 	}
}

export const getStaticProps = async () => {
  try {
    const response = await fetch("/api/test/static");

    if (response.status === 200) {
      const data = await response.json();
      return {
        props: { data },
      };
    }

    return { props: {} };
  } catch (error) {
    console.error(error);
    return { props: {} };
  }
};

• 13 이후 버전(fetch)

export const DataFetch = async() => {

  const staticDataFetch = await fetch('/api/test/static', { cache: 'force-cache' });

  const dynamicDataFetch = await fetch('/api/test/server', { cache: 'no-store' });
  
  const revalidateDataFetch = await fetch('/api/test/revalidate', { next: { revalidate: 100 } });
                                                                           
  
}