Next.js를 사용하기 위한 기초 개념

1. SPA

single page application의 약자로 하나의 html에 동적으로 필요한 요소들을 갈아끼우는 방식

새로운 페이지로 넘어가지 않아서 사용자들에게는 페이지가 바뀔때 깜빡거리는 현상이 없어서 UX를 개선할 수 있음.

2. CSR

Client Side Rendering이란 브라우저가 서버로부터 웹 페이지에 필요한 요소들을 받아서 렌더링 하는 방식이다.

최초 렌더링시 모든 요소들을 다운받아두고 변하는 데이터만 새로 렌더링해 전체 페이지를 새로 렌더링하는 방식보다 UX가 향상된다.

3. SSR란?

CSR은 페이지 로딩이 오래 걸리거나 사용자의 인터넷 속도가 느린 경우 페이지가 모두 렌더링 될 때까지 아무것도 렌더링되지 않은 페이지를 보고 있어야 한다는 문제점이 있다.

그리고 사이트의 모든 요소들을 페이지가 조회될때 렌더링 하다보니 검색 엔진에 웹 페이지가 노출되지 않는 문제점이 있다. 웹 크롤링과 검색 엔진은 html에서 text를 빼와서 사용하는데 CSR은 아무런 요소가 노출되지 않기 때문이다.

SSR은 서버에서 view를 정적인 요소들을 pre rendering하고 브라우저에서 동적인 부분을 더해주는 구조이다. 따라서 사용자가 빈 화면을 보고 있어야했던 CSR의 문제도, 검색 엔진에 아무런 정보가 노출되지 않는 문제도 해결할 수 있다.

Next.js 프레임워크가 바로 SSR 구조이다.

4. SSG란?

Static Site Generation

각 page를 빌드시에 static한 파일로 생성한다. 사용자가 페이지를 요청하면 이미 생성된 페이지를 반환한다.

하지만 페이지에 동적으로 데이터를 가져와야 한다면? Next는 다음과 같은 함수를 지원한다.

• getStaticProps

  • 이 함수들은 빌드시에 한번만 실행되고 서버에서 실행되는 함수들이다.

  • 페이지를 정적으로 만들기 위해 default로 렌더링할 props를 불러온다.

    export async function getStaticProps(){
    	const res = await fetch("");
      const datas = await res.json();
    
      return {
        props: {
         datas
        },
        revalidate: 60, // 60초마다 데이터를 재생성
      };
    }

• getServerSideProps
  • getStaticProps처럼 서버에서 정적 페이지를 구성하기 위해 props를 채우는 함수이지만
    사용자가 요청할때마다 실행되므로 최신 데이터를 반영할 수 있다
• getStaticPaths
  • 동적 라우팅으로 페이지를 생성할때 특정 부분만 정적으로 생성하고 싶을떄 사용.