Next.js 프리렌더링과 최적화 정리

프리렌더링

서버에서 미리 html을 생성하고, 완성된 html 파일을 브라우저에 전달하는 방식이다.

 

1. 리액트 코드의 프리렌더링

기본적으로 클라이언트 사이드 렌더링(CSR)을 사용한다.

이것은 자바스크립트 파일 다운 후 브라우저에서 실행되어,

html을 동적으로 생성하는 방식이다.

 

그것을 확인해보려면 개발자 도구의 네트워크 탭을 보면 알 수 있다.

거기서 문서를 보면 <div id=root> </div>와 같은 빈 태그만 존재하는데

그렇기 때문에 초기 html 문서에는 콘텐츠가 없다.

 

2. next.js 코드의 프리렌더링

서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)를 지원한다.

이는 브라우저가 자바스크립트를 실행하기 전에 서버에서 미리 html을 생성하는 방식이다.

 

이것도 개발자 도구의 네트워크 탭 문서를 보면 body 태그 안에 모든 콘텐츠가 미리 렌더링 되어있다.

서버에서 html을 미리 생성하기 때문에 브라우저가 받는 초기 문서에 콘텐츠가 포함되어있다.

 

프리 렌더링 장점

1. 빠른 초기 로드 시간 -> 서버에서 미리 html을 생성하므로 브라우저가 바로 렌더링 할 수 있다.

2. seo -> 검색 엔진 크롤러는 자바스크립트를 실행하지 않고 html을 분석하는데 서버에서 미리 렌더링된 html을 제공함으로써 seo가 개선된다.

3. 사용자 경험 향상 -> 콘텐츠가 빠르게 표시되기 때문에!

 

---

서버 컴포넌트 & 클라이언트 컴포넌트

 

1. 서버 컴포넌트

서버에서 코드가 실행되는 컴포넌트다.

서버에서 데이터를 가져와서 html을 미리 만들어서 브라우저에 보내준다.

 

2. 클라이언트 컴포넌트

브라우저에서 코드가 실행되는 컴포넌트다.

사용자와의 상호작용을 처리하거나 브라우저에서만 사용할 수 있는 기능을 여기에 작성한다.

(use client)라는 선언을 파일 맨 위에 꼭 써야 한다.

---

link

페이지 간의 네비게이션을 쉽게 할 수 있도록 link 컴포넌트를 제공한다.

import Link from "next/link";

export default function Page() {
  return (
    <div>
      <Link href="/detail/2">페이지 이동</Link>
    </div>
  );
}

 

a태그와의 차이점

 

a 태그

1. 전체 페이지 리로드 -> 페이지 이동 시 전체 문서를 새로 불러온다

2. 풀로드 -> 페이지 전환 시 전체 페이지가 다시 로드된다.

 

link 태그

1. 클라이언트 사이드 네비게이션 -> link 태그를 사용하면 페이지 이동시 자바스크립트를 통해 페이지를 불러온다.

2. 빠른 페이지 전환 -> 필요한 부분만 업데이트 한다.

3. 프리렌더링 

 

= link 컴포넌트를 사용하면 프리렌더링 기능과 클라이언트 사이드 네비게이션의 장점을 모두 활용할 수 있다.

---

image

이미지 최적화를 도와주는 중요한 도구다.

 

1. next.config.mjs 설정

외부 이미지를 사용하려면 파일에서 해당 설정을 추가해야 한다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "images.unsplash.com",
      },
    ],
  },
};

export default nextConfig;

 

기본 이미지 사용법

-> 이미지를 사용하려면 image 컴포넌트를 사용하고 src, width, height, alt 속성을 지정해야 한다.

// src/app/detail/[id]/page.tsx

import Image from "next/image";

export default function DetailPage() {
  return (
    <div>
      <Image
        src="https://images.unsplash.com/photo-1716404084927-176ee37a9dbe?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        width={100}
        height={100}
        alt="unsplash image"
      />
    </div>
  );
}

 

반응형 이미지 사용법

이미지 크기를 고정하지 않고, 부모 요소의 크기에 맞게 조절하고 싶을 때는 fill 속성을 사용한다.

이 경우, 부모 요소 css에 position: relative를 지정해야 한다.

// src/app/detail/[id]/page.tsx

import Image from "next/image";
import Link from "next/link";

export default function DetailPage() {
  return (
    <div>
      <Link href="/detail/2">DetailIdPage</Link>
      <div className="w-32 h-48 md:w-48 md:h-56 relative">
        <Image
          src="https://images.unsplash.com/photo-1716404084927-176ee37a9dbe?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
          fill
          alt="unsplash image"
        />
      </div>
    </div>
  );
}