next에 대하여

1. next란?

React를 기반으로하는 웹 개발 프레임워크
React는 UI를 만들기 위한 자바스크립트 라이브러리

• React는 CSR로 (Client Side Rendering) 서버 화면에 보여줄 수 있는 html 파일을 보내주는게 아니라 처음에는 빈 html 파일을 보여주고 이후에 필요한 리소스들을 다운 받아 보여주기 때문에 초기 로딩속도가 느리고, 처음 빈 html을 보여줘 검색 엔진 최적화 측면에서 불리하다는 문제. 이러한 문제를 해결하기 위해 next.js 탄생

 

2. 특징

• 사전렌더링(pre-rendering) :
  • next는 기본적으로 빌드시 만든 모든 페이지 미리 렌더링하여 보여줌으로서, 페이지 불러오는 속도가 빨라 SEO(검색엔진최적화)에도 좋음 
  • Search Engine Optimization 검색 엔진의 작동 박식에 웹 페이지 최적화. 검색 엔진에서 웹 페이지를 보다 더 상위에 노출될 수 있게끔 만듦
  • HTML을 불러온 후에는 페이지에 필요한 최소한의 js 코드를 불러와 페이지를 사용
• 자동코드분할 (code-splitting)
  • 애플케이션을 여러 페이지로 분할해 다른 URL에서 접글할 수 있도록 하는데 이런 각각 페이지들은 프로그램에 대한 고유 접근 지점이 된다. 코드분할을 각 접근 지점에 필요한 작은 청크로 프로그램 번들을 분할하는 과정. 프로그램에서 그 페이지를 실행하는데 꼭 필요한 코드만 가져오도록 초기 로딩 시간 향상
  • 각 페이지별 필요 코드 번들 초기 로드 시간 향상, 지연 로딩 도와줌. 불필요한 코드 로드 x 
• api routes : js 만으로도 쉽게 만들수있음. 
• 자동최적화 (Built-in Optimization) : 따로 설정을 하지 않아도 지연 로딩 등 
• 미들웨어 (Middleware) 
• Routing & Layout

 

 

3.개념

SSR (Server Side Rendering)

• 클라이언트가 요청할 때마다 해당 HTML 문서를 생성하여 반환
• 최신데이터 제공 : 요청 시마다 서버에서 최신 데이터를 가져와 페이지를 렌더링하기 때문에 실시간 데이터 반영
• 초기 로드 시간 : 첫 요청시 서버에서 html을 생성하는 데 시간이 걸리므로 초기 로드 시간이 길어질 수 있다. 
• 각 요청에 대해 서버에서 HTML 페이지를 생성하여 초기 렌더링에 필요한 모든 데이터와 마크업 포함 가능
• 애플리케이션의 인지 성능 향상시키고 검색 엔진 콘텐츠 쉽게 크롤링하고 인덱싱할 수 있음.
• 페이지 데이터가 항상 최신 상태, 동적반응 인터렉티브

export async function getServerSideProps(context) {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: { data }, // 페이지 컴포넌트에 data를 props로 전달
  };
}

function Page({ data }) {
  return <div>{data}</div>;
}

export default Page;

 

 

SSG (Static Site Generation)

• 빌드 타임에 각 HTML 페이지를 미리 생성 요청하면 미리 생성된 페이지 반환
• 빠른 로드시간 : 정적 파일을 미리 생성하므로 요청 시 서버 부하가 적고 로드 시간이 빠르다. 
• seo 개선 : ssr과 마찬가지로 검색 엔진 크롤러가 완전한 html을 수신하여 seo에 유리
• 정적콘텐츠제공 : 빌드 시점에서 생성된 콘텐츠를 제공하므로 실시간 데이터가 필요 없는 경우에 적합
• HTML 페이지가 빌드 시간에 생성되고 정적 에셋으로 제공되어 각 요청마다 서버 사이드 렌더링이 필요하지 않게 됨
• 콘텐츠가 많은 웹사이트나 업데이트 빈도가 낮은 애플리케이션에 적합
• 빠른 로딩 시간 효율적인 캐싱 가능
•  

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: { data }, // 페이지 컴포넌트에 data를 props로 전달
  };
}

function Page({ data }) {
  return <div>{data}</div>;
}

export default Page;


///
getStaticProps와 getStaticPaths

 

 

SEO (Search Engine Optimization)

• 내 사이트를 검색엔진결과에 잘 노출시킬수 있도록 최적화 하는 것
• 크롤러친화적 : ssr과 ssg 모두 완전한 html을 생성하여 검색 엔진 크롤러가 페이지 내용을 쉽게 파악할 수 있다
• 메타 태그 및 오픈 그래프 태그 : next.js에서는 next/head를 사용하여 페이지별 메타태그와 오픈 그래프 태그를 설정할 수 있음. 검색 결과와 소셜 미디어 공유에서 중요한 역할을 한다.

라우팅

• next.js는 파일시스템 기반 (pages) 라우팅 사용
• 폴더의 경로에 따라 페이지 관리
• app 기반의 라우팅 추가(ver 13)

 

 

ssr, ssg 비교

• SSR은 동적 콘텐츠를 실시간으로 제공하는 데 적합하지만, 매 요청마다 서버 작업이 필요합니다.
• SSG는 정적 콘텐츠를 제공하며, 매우 빠른 응답 속도를 보이지만, 빌드 시점 이후 변경된 데이터는 반영되지 않습니다.

 

 

요약

• SSR (Server-Side Rendering): 요청 시마다 서버에서 HTML을 생성, 최신 데이터 제공, 초기 로드 시간이 길어질 수 있음.
• SSG (Static Site Generation): 빌드 시점에 정적 HTML 생성, 빠른 로드 시간, 정적 콘텐츠 제공에 적합.
• SEO (Search Engine Optimization): SSR과 SSG 모두 크롤러 친화적이며 메타 태그를 통해 SEO를 개선할 수 있음.