[프로젝트] Next.js_🫠 2

Next.js는 어떻게 동작하는가

내장된 코드분할 기능을 통해 동작. /page 디렉토리 내의 각 파일은 빌드 단계에서 자체 자바스크립트 번들로 자동분할됨

이게 무슨말이냐면...

• Next.js에서 페이지는 /page 디렉토리에 위치함. 이 디렉토리 내의 각 파일은 해당 페이지에 대한 기능과 로직을 포함함.
• /page디렉토리 내부에 /login,/shop과 같은 파일이 있고, 이 파일들은 각각 개별적으로 자체 자바스크립트 번들로 빌드되고, 이것들은 그 페이지가 필요할때만 개별적으로 로드가 됨.

이게 뭐가 좋냐면...

• 이렇게 되면 사용자가 특정 페이지로 이동할 때 해당 페이지에 대한 자바스크립트 코드만 로드가 되므로, 애플리케이션의 초기 로딩 속도가 향상됨.
• 각 페이지가 독립적으로 번들링되므로 코드의 유지보수와 관리가 용이해짐. (로그인 페이지에서 오류가 발생해도 shop페이지는 성공적으로 로드가 가능해진다는 말)

프로젝트에 Next.js를 적용하려는 이유

쇼핑몰 프로젝트이므로, 보다 강력한 SEO 기능이 필요했음

이를 위한 이점으로 사용할 Next.js의 기능

✅ Route preloading

예시코드

import Link from 'next/link';
export default function Navigation() {
  return (
    <nav>
      <ul>
        <li>
          <Link href="/about">
            <a>About</a>
          </Link>
        </li>
        <li>
          <Link href="/contact">
            <a>Contact</a>
          </Link>
        </li>
      </ul>
    </nav>
  );
}

About, Contact 링크위에 마우스를 올리면 Next.js는 자동으로 /about, /contact 페이지의 자바스크립트 번들을 프리로드하기 시작함.

필요하지 않은 리소스를 로드하여 성능에 부정적인 영향을 끼치진 않을까?

Next.js가 페이지를 프리로드하는 시점은 링크가 뷰포트에 나타날때임 + 브라우저가 유휴 상태일 때까지 기다림
-> 성능 저하 X, 사용자에게 더 부드러운 네비게이션 경험 제공

✅ 서버 측 렌더링(SSR)

SSR은 웹 페이지를 브라우저에 표시하기 전에 서버에서 렌더링하는 방식을 말함. 사용자가 페이지에 처음 접근할 때 서버가 해당 페이지의 내용을 HTML로 렌더링하여 브라우저에 보내주는 것을 말함.

예시 : 사용자가 블로그 포스트 목록이 잇는 페이지에 접속한다고 가정. 이 페이지는 최신 블로그 포스트 목록을 보여줘야 함.

SSR을 사용하는 경우, 서버는 사용자 요청에 따라 최신 블로그 포스트 데이터를 가져와 HTML로 렌더링한 후 이를 브라우저에 전송
CSR을 사용하는 경우, 서버는 초기 요청에 대해 빈 HTML페이지를 제공함. 그 다음 클라이언트는 이 HTML을 받고 JS를 사용하여 데이터를 가져와 페이지를 렌더링함. -> 사용자는 초기 로딩시간동안 로딩 상태를 봐야함, 페이지가 완전히 로드된 후에야 상호작용 가능

생성된 HTML페이지는 클라이언트에 의해 수화(hydration)과정을 통해 상호작용 가능한 페이지로 변환됨
Hydration이란? : 클라이언트 측의 Js코드가 서버에서 받은 정적인 HTML페이지를 가져와 동적으로 변환하는 과정을 말함.

그래서 SSR을 하면 SEO에 유리한 이유가 뭔데

• CSR을 하는 경우, 초기에 빈 HTML이 로드돼서, 검색 엔진은 초기에 페이지의 완전한 콘텐츠 파악이 어려워 검색 가능성 떨어짐
• SSR을 하는 경우, 초기에 완전한 HTML을 생성하므로, 검색 엔진은 페이지의 콘텐츠와 구조를 쉽게 이해하고, 검색 결과에 해당 페이지를 적절하게 표시할 수 있게 도와줌

✅ 정적 사이트 생성(SSG)

SSG에서는 페이지가 빌드 시간에 생성되고 각 요청에 재사용됨. 서버가 사전 렌더링된 HTML 페이지를 제공할 수 있으며, 이는 캐싱되어 사용자에게 즉시 제공될 수 있음.

예시 : 한국의 전통 문화에 관한 정적인 정보를 제공하는 웹 사이트
이 경우 변경 빈도가 낮고 대부분의 콘텐츠가 정적인 경우가 많음. 따라서 개발자는 미리 해당 페이지를 빌드하여 정적 HTML페이지를 생성한 뒤, 여러 사용자에게 재사용함.