# serverComponentsHmrCache 옵션 알아보기

안녕하세요! 오늘은 Next.js에서 실험적으로 제공하는 `serverComponentsHmrCache` 옵션에 대해 알려드릴게요. 이 옵션은 로컬 개발 환경에서 서버 컴포넌트(Server Components)의 `fetch` 응답을 HMR(Hot Module Replacement, 핫 모듈 교체) 과정 중에 캐싱해줘서, API 호출 비용도 줄이고 응답 속도도 빠르게 해준답니다.

---

## serverComponentsHmrCache가 뭘까?

기본적으로 개발 중에 코드를 수정하면 HMR 기능이 작동하면서 줄줄이 새로고침 됐었죠? 그런데 이때마다 서버 컴포넌트에서 fetch 요청이 다시 일어나 느려질 수 있고, 과도한 API 호출로 비용이 발생할 수 있어요.

이 옵션을 켜두면, 로컬에서 HMR 리프레시가 일어날 때 fetch가 반환한 데이터를 캐시에 저장해두고 재활용해요. 그래서 매번 API를 새로 호출하지 않고 빠르게 데이터를 불러올 수 있답니다.

---

## 기본 동작

- HMR 캐시는 모든 fetch 요청에 적용돼요.
- 심지어 `cache: "no-store"` 옵션이 붙은 요청도 캐시가 사용돼서 **새로운 데이터가 바로 반영되지 않을 수 있어요.**
- 단, 브라우저에서 페이지를 이동하거나 전체 새로고침을 하면 캐시는 초기화됩니다.

---

## 이 옵션 끄고 싶으면?

`next.config.js` 파일에 아래처럼 설정하면 돼요:

```js
// next.config.js
module.exports = {
  experimental: {
    serverComponentsHmrCache: false,
  },
}
```

---

## 팁! 알아두면 좋은 점

- 이 옵션은 오로지 로컬 개발 환경에서만 의미 있어요. 실제 배포 시에는 캐시가 적용되지 않습니다.
- HMR 중 데이터가 제대로 갱신되어야 할 때는 끄는 게 좋습니다. 예를 들어, 실시간으로 변하는 데이터를 테스트하거나, 캐시 때문에 최신 상태가 보이지 않을 때요.
- 서버 컴포넌트와 클라이언트 컴포넌트가 섞여 있는 프로젝트에서, 서버 컴포넌트가 데이터 로딩을 담당한다면 속도 향상을 꽤 느낄 수 있어요.

---

요약하자면, `serverComponentsHmrCache` 옵션은 개발 생산성을 올려주고 API 사용 비용을 아껴주는 좋은 도구예요. 다만, 데이터 갱신이 중요한 경우에는 캐시를 조심해서 사용하시고요! 궁금한 점 있으면 댓글로 남겨주세요~


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Next.js에서 `serverComponentsHmrCache` 설정을 꺼두는 방법에 대해 이야기해볼게요.

```js
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    serverComponentsHmrCache: false, // 기본값은 true입니다
  },
}

export default nextConfig
```

위 코드는 Next.js 설정에서 `serverComponentsHmrCache`를 `false`로 설정하는 예제인데요. 이 값은 기본적으로 `true`로 되어 있어서 서버 컴포넌트의 핫 모듈 리로딩을 캐시를 활용해 빠르게 처리해줍니다. 하지만 개발 상황이나 특정 버그를 해결할 때 이 캐시를 끄고 싶을 때가 있죠.

### 참고할 만한 팁!

개발할 때 fetch 요청의 캐시 적중(hit)과 실패(miss)를 제대로 추적하고 싶다면 `logging.fetches` 옵션을 켜보세요. 이렇게 하면 콘솔에서 캐시가 잘 작동하는지, 아니면 새로 fetch하는지를 한눈에 볼 수 있어서 디버깅할 때 훨씬 편합니다.

```js
const nextConfig: NextConfig = {
  experimental: {
    logging: {
      fetches: true,
    },
  },
}
```

이 설정을 켜두면 개발 중 네트워크 호출 캐시 상태를 실시간으로 파악할 수 있으니까, fetch가 잘 캐시되고 있나 궁금할 때 도움됩니다.

---

### 추가로 알아두면 좋은 점

- `serverComponentsHmrCache`는 서버 컴포넌트 개발자 경험 향상을 위한 옵션이에요. 이걸 꺼두면 개발 중 일부 반응 속도가 느려질 수 있지만, 환경에 따라서는 문제 해결에 도움이 됩니다.
- Next.js 최신 버전이나 기능 업데이트 때, experimental 옵션이 변할 수도 있으니 공식 문서를 꼭 확인하세요.

이 정도만 알아두면 `experimental` 섹션에서 실험적인 기능 다룰 때 도움이 될 거예요. 행복한 Next.js 개발하세요! 🚀

Next.js 15 서버 컴포넌트 HMR 캐시 동작 원리와 최적화 방법



# sassOptions란 무엇인가요?

`sassOptions`는 Next.js에서 Sass 컴파일러를 설정할 때 사용하는 옵션입니다. 간단히 말해서, Sass 파일을 어떻게 처리할지 세부적으로 설정할 수 있게 도와주는 녀석이죠.

아래 예제를 보면서 살짝 살펴볼게요:

```js
import type { NextConfig } from 'next'

const sassOptions = {
  additionalData: `
    $var: red;
  `,
}

const nextConfig: NextConfig = {
  sassOptions: {
    ...sassOptions,
    implementation: 'sass-embedded',
  },
}

export default nextConfig
```

위 코드에서 `additionalData`는 Sass 파일이 컴파일될 때마다 자동으로 추가되는 코드입니다. 여기서는 Sass 변수 `$var`에 `red` 색상을 지정하고 있죠. 이렇게 하면 모든 Sass 파일에서 이 변수를 사용할 수 있게 돼서 일일이 변수 선언할 필요 없이 편리해요.

그리고 `implementation` 옵션에 `'sass-embedded'`를 지정했는데요, 이는 Dart Sass의 임베디드 버전을 사용한다는 뜻입니다. Next.js는 보통 기본적으로 Dart Sass를 사용하지만, 여기에 다른 Sass 컴파일러를 직접 명시해주고 싶을 때 쓰는 부분이에요.

> 참고로, Next.js는 `sassOptions`의 여러 속성을 모두 타입으로 관리하고 있지 않아서, `implementation` 말고는 타입 추론이 조금 제한적이에요. 그래서 필요한 옵션만 적절히 넣어주면 됩니다.

---

### 추가로 알아두면 좋은 팁!

- **`additionalData` 활용법**  
  예를 들어 여러 Sass 파일에서 공통으로 사용할 변수나 믹스인, 함수 등이 있다면, `additionalData`에 미리 등록해두면 코드 중복을 줄일 수 있어요.

- **퍼포먼스 최적화**  
  Sass 설정에 따라 빌드 속도에 영향을 줄 수 있으니, 꼭 필요한 옵션만 넣고 불필요한 설정은 피하는 게 좋아요.

- **Next.js 공식 문서 확인하기**  
  Next.js 자체 문서나 Sass 공식 문서를 참고하면 더 많은 옵션과 사례를 확인할 수 있어요.

Sass를 Next.js 프로젝트에서 제대로 세팅해두면 스타일 관리가 훨씬 깔끔해지고 유지보수도 쉬워지니 꼭 한번 시도해 보시길 추천해요!

Next.js 15에서 sassOptions 설정 방법

Nextjs 15에서 웹페이지 이동한 것처럼 보이게 만들기 (rewrites)

# reactMaxHeadersLength 설정 알아보기

리액트에서 정적 렌더링(static rendering)을 할 때, 응답 헤더에 추가할 수 있는 여러 헤더들을 만들어낼 수 있어요. 이 헤더들은 브라우저가 폰트, 스크립트, 스타일시트 같은 리소스를 미리 불러오게(preload) 도와서 페이지 로딩 속도를 쑥~ 올려주는 역할을 해주죠.

디폴트 값은 6000인데, 환경에 따라 이 크기를 조절하고 싶다면 `next.config.js` 파일에서 `reactMaxHeadersLength` 옵션을 직접 설정할 수 있어요. 예를 들어, 헤더 총 길이를 1000으로 제한하려면 이렇게 작성하면 됩니다:

```js
module.exports = {
  reactMaxHeadersLength: 1000,
}
```

> 참고! 이 옵션은 App Router를 사용할 때만 적용 가능하니, 기존 Pages Router를 이용 중이라면 신경쓰지 않아도 됩니다.

추가로, 이 옵션을 너무 낮게 설정하면 preload 헤더가 잘려서 필요한 리소스가 미리 로드되지 않을 수 있으니 주의하세요. 반대로 너무 높게 설정하면 헤더 크기가 너무 커져서 네트워크 효율이 떨어질 수 있으니 적당한 균형을 찾는 게 중요합니다.

요약하자면, 정적 렌더링 성능 최적화를 위해 헤더 길이를 적절히 설정하는 `reactMaxHeadersLength` 옵션을 활용해보세요!


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

브라우저와 서버 사이에 어떤 종류의 프록시가 있느냐에 따라 HTTP 헤더가 잘려버릴 수 있어요. 예를 들어, 리버스 프록시(reverse proxy)를 사용하는데 이 프록시가 긴 헤더를 제대로 처리하지 못한다면, 헤더가 중간에 잘릴 위험이 있답니다. 그래서 이럴 땐 헤더 길이 제한 값을 낮춰서 잘리지 않도록 세팅하는 게 좋아요.

사실 이런 문제는 특히 대용량 쿠키나 토큰을 헤더에 넣을 때 종종 발생하곤 해요. 리버스 프록시뿐만 아니라, 네트워크 장비나 보안 솔루션에도 헤더 길이 제한이 있기 때문에 어디서든 문제가 될 수 있죠. 그래서 개발할 때 이 점을 염두에 두고, 너무 큰 헤더를 보내지 않도록 주의하는 게 좋습니다.

간단히 정리해보면:

| 상황                 | 해결 방법                             |
|--------------------|---------------------------------|
| 프록시가 긴 헤더를 못 처리할 때 | 헤더 길이 제한 값을 낮춰 설정                   |
| 대용량 쿠키나 토큰 사용 시       | 필요 없는 데이터 제거 또는 쿠키 분할 등 최적화 작업 |
| 헤더 길이 제한으로 인한 문제 발견  | 프록시 및 네트워크 장비 설정 점검 및 조정          |

이런 이슈들은 특히 트래픽이 많은 서비스에서 쉽게 지나치기 쉬운데, 한 번 겪으면 서비스 안정성에 큰 영향을 미치니 꼭 체크해보시길 바랍니다!

ReactJS에서 maxHeadersLength 설정하는 방법

# reactStrictMode

> 참고할 점: Next.js 13.5.1 버전부터는 app router를 사용할 때 기본적으로 Strict Mode가 활성화되어 있어서, 위에서 말한 설정은 오직 pages 디렉터리에 대해서만 필요해요. 물론 `reactStrictMode: false`로 설정해서 Strict Mode를 끌 수도 있습니다.

> 추천: Next.js 애플리케이션에서 Strict Mode를 꼭 켜두는 걸 강력하게 추천해요. 앞으로 React가 발전해가는 방향에 잘 대비할 수 있기 때문이죠.

## React의 Strict Mode란?

Strict Mode는 개발할 때만 활성화되는 기능으로, 앱에서 발생할 수 있는 잠재적인 문제를 미리 파악할 수 있도록 도와줘요. 예를 들어, 위험한 라이프사이클 메서드 사용이나 구버전 API 사용 같은 흔히 간과하기 쉬운 부분들을 찾아내죠.

좀 더 쉽게 말하면, 실수를 잡아내는 ‘개발자 전용 사이렌’ 같은 역할을 한다고 보면 돼요. 그래서 실서비스에 영향을 주지 않고도 코드 품질을 높이고 문제를 미리 예방할 수 있습니다.

### 참고로 알아두면 좋은 점

- Strict Mode를 켜면 일부 컴포넌트가 두 번 렌더링되기도 하는데, 이것도 문제를 찾아내기 위한 의도된 동작이에요.
- 라이프사이클 메서드 중 일부가 더 이상 권장되지 않거나 향후 React 버전에서 제거될 예정인 경우 Strict Mode가 알려줍니다.
- 앱이 커질수록 이런 문제를 미리 발견하는 게 복잡한 버그 잡는 것보다 훨씬 효율적이에요.

Next.js를 쓰면서 `next.config.js`에 아래처럼 설정하면 됩니다:

```js
module.exports = {
  reactStrictMode: true,
};
```

마지막으로, Strict Mode가 자동으로 켜지는 app router 환경에서는 따로 설정할 필요 없으니 참고하세요!


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Next.js 런타임은 기본적으로 React의 Strict Mode 규격을 잘 준수하고 있어요. 만약 여러분이 Next.js 프로젝트 전체에 Strict Mode를 적용하고 싶다면, 아래처럼 `next.config.js` 파일에 옵션을 설정해주면 됩니다.

```js
module.exports = {
  reactStrictMode: true,
}
```

이렇게 하면 프로젝트 전체가 Strict Mode로 동작하게 돼요.

하지만 만약 팀이나 프로젝트 상황상, 전체 앱에 한꺼번에 Strict Mode를 적용하기 부담스럽다면 걱정하지 마세요! 꼭 전체에 적용할 필요 없이, React의 `<React.StrictMode>` 컴포넌트를 사용해서 페이지 단위로 조금씩 마이그레이션 할 수 있답니다.

예를 들어, 특정 페이지 파일에서 아래처럼 감싸주면 그 페이지만 Strict Mode로 작동하게 돼요.

```jsx
import React from 'react';

export default function MyPage() {
  return (
    <React.StrictMode>
      {/* 여기에 페이지 컴포넌트 JSX */}
    </React.StrictMode>
  );
}
```

이렇게 하면 단계적으로 코드 품질을 높여가면서 안정적으로 Strict Mode를 적용할 수 있죠.

사실 Strict Mode는 개발 중에만 활성화되는 체크 기능이라, 프로덕션에는 영향이 없는 점도 참고하세요. React에서 권장하는 좋은 코딩 습관을 지키고, 잠재적인 버그를 미리 잡아내기에 매우 유용하니, 서서히 도입해보시길 추천합니다!

Nextjs 15에서 reactStrictMode 사용하는 방법

Nextjs 15 웹사이트에서 다른 url로 보내는 방법

# ppr (Partial Prerendering, 부분 사전 렌더링)

Partial Prerendering, 줄여서 PPR은 같은 경로(Route) 안에서 정적 컴포넌트와 동적 컴포넌트를 함께 사용할 수 있게 해주는 기능이에요. 쉽게 말해, 웹 페이지 내에서 변하지 않는 부분은 미리 만들어두고, 변하는 부분은 계속 업데이트할 수 있다는 거죠. 이 덕분에 사용자 경험이 더 좋아지고, 성능도 한층 더 최적화됩니다.

자세한 내용은 [PPR 공식 문서](https://nextjs.org/docs/pages/building-your-application/rendering/static-and-dynamic-rendering)를 참고해보세요!

## Partial Prerendering 사용법

### 점진적 도입 (버전 15 부터)

Next.js 같은 프레임워크에서 PPR을 점진적으로 도입할 수 있는데요, 예를 들어 조금씩 기존 코드에 PPR을 도입하면서 전체 애플리케이션에 적용하는 방식을 말합니다.  
이렇게 하면 기존 서비스에 큰 무리 없이 성능 개선을 시도할 수 있죠.

---

### 제가 덧붙이고 싶은 팁!

- PPR을 활용할 때는 동적 부분과 정적 부분을 명확히 구분하는 게 중요해요.  
예를 들어, 사용자 프로필처럼 자주 변경되는 데이터는 동적으로, 홈페이지 배너 같이 변하지 않는 요소는 정적으로 처리하는 식이죠.

- SEO(Search Engine Optimization)에도 도움이 되니, 검색엔진이 페이지 내용을 잘 읽게 하고 싶으면 PPR을 적극 활용해 보세요.

- PPR을 제대로 이해하면, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)의 장점을 모두 취할 수 있습니다!

다음 번에는 실제 사용하는 예제 코드와 함께 더 쉽게 설명해 드릴게요. 궁금한 점 있으면 언제든지 댓글 남겨주세요~


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Next.js 15에서는 Partial Prerendering(PPR)을 점진적으로 도입할 수 있어요. 이걸 적용하려면 먼저 `next.config.js` 파일에서 `ppr` 옵션을 `'incremental'`로 설정해줘야 합니다. 그리고 각 레이아웃이나 페이지 파일 최상단에 `experimental_ppr` 옵션을 export해서 해당 라우트에서 PPR을 사용하도록 명시해줘야 해요.

예를 들어, `next.config.js`는 이렇게 설정할 수 있죠:

```js
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    ppr: 'incremental',
  },
}

export default nextConfig
```

그리고 페이지 파일에서는 이렇게요:

```js
import { Suspense } from "react"
import { StaticComponent, DynamicComponent, Fallback } from "@/app/ui"

export const experimental_ppr = true

export default function Page() {
  return (
     <>
      <StaticComponent />
      <Suspense fallback={<Fallback />}>
        <DynamicComponent />
      </Suspense>
     </>
  );
}
```

### 여기서 잠깐! 알아두면 좋은 점들

| 내용 | 설명 |
|------|--------|
| 기본값 | `experimental_ppr` 옵션을 설정하지 않은 라우트는 기본값이 `false`로 PPR이 적용되지 않아요. 따라서 각 라우트마다 명시적으로 활성화해줘야 합니다. |
| 적용 범위 | `experimental_ppr`을 활성화하면 해당 라우트 세그먼트의 모든 하위 레이아웃과 페이지에도 적용돼요. 그래서 꼭 모든 파일에 넣지 않고 최상위 라우트 파일에만 넣으면 됩니다. |
| 비활성화 | 하위 세그먼트에서 PPR을 끄고 싶다면 그 세그먼트 파일에서 `experimental_ppr = false`를 설정하면 됩니다. |

---

### Partial Prerendering(PPR)이 왜 좋냐면?

기존에는 전체 페이지를 SSR(서버사이드 렌더링)하거나 SSG(정적 생성)으로 렌더링해야 했는데, Next.js 15부터는 정적 컴포넌트와 동적 컴포넌트를 섞어서 레이아웃이나 페이지 단위로 점진적 프리렌더링을 할 수 있어서 성능과 사용자 경험을 모두 챙길 수 있어요.

이에 따라, 특정 컴포넌트는 빌드시 미리 렌더링하고, 나머지는 클라이언트 사이드에서 비동기로 렌더링할 수 있습니다. 덕분에 초기 로딩 속도 향상과 동시에 최신 데이터도 빠르게 가져올 수 있는 장점이 있습니다.

> 참고로, React의 `Suspense`와 함께 사용하는 것이 핵심입니다. `Suspense`는 비동기 컴포넌트 로딩이나 데이터 페칭 시 로딩 상태를 우아하게 보여주기 때문에 PPR과 아주 잘 어울려요.

---

여러분도 Next.js 15의 Partial Prerendering 기능을 적극 활용해서, 유연하고 빠른 웹사이트 만들어보세요! 급할 때는 조금 복잡해 보일 수 있는데, 천천히 한 단계씩 익히면 앞으로 개발 흐름이 훨씬 자유로워질 거예요.


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

| Version   | Changes                             |
|-----------|-----------------------------------|
| `v15.0.0` | experimental `incremental` value introduced |
| `v14.0.0` | experimental `ppr` introduced      |

위 표는 버전별로 새롭게 도입된 실험적 기능들을 간단히 정리한 거예요. 여기서 `incremental`과 `ppr`은 각각 점진적으로 변화하는 기능과 PPR(Pre-Processing Rendering) 같은 실험적 기능을 의미하는데, 보통 이런 기능들은 안정화 전이라 실제 프로젝트에 도입할 때는 주의가 필요해요. 그래도 최신 기능들을 미리 체험해보고 싶거나, 성능 최적화에 관심 있는 개발자분들께는 놓치기 아까운 내용이죠!

Nextjs 15에서 부분 사전 렌더링 하는 방법(Partial Prerendering)

# productionBrowserSourceMaps

개발할 때는 **Source Maps**가 기본적으로 켜져 있어서, 디버깅하기가 편해요. 근데 문제는, 이렇게 소스맵이 켜진 상태로 프로덕션(실제 서비스) 빌드를 하면, 사용자가 내 소스 코드를 어느 정도 볼 수 있게 된다는 거예요. 그래서 Next.js는 프로덕션 빌드 시에는 소스맵을 끄는 게 기본 설정이에요.

그런데 만약 여러분이 일부러 프로덕션 환경에서도 소스맵을 사용하고 싶다면, 설정에서 `productionBrowserSourceMaps` 플래그를 `true`로 바꾸면 돼요:

```js
module.exports = {
  productionBrowserSourceMaps: true,
}
```

### 왜 프로덕션에서 소스맵을 켜는 걸 선택할까?

- 디버깅이 훨씬 쉬워짐: 프로덕션 환경에서 발생하는 오류도 원래 소스 코드 위치로 쉽게 매핑돼서 문제를 빠르게 찾을 수 있어요.
- 에러 추적 툴과 같이 사용: Sentry 같은 에러 추적 서비스에 소스맵을 업로드하면, 실제 코드 라인 단위까지 에러를 파악할 수 있어서 유지보수가 좋아지죠.

### 주의할 점!

- **코드 노출 위험**: 소스맵은 결국 여러분의 원본 코드를 어느 정도 노출시키니까, 보안이 매우 중요한 프로젝트라면 신중하게 결정해야 해요.
- 빌드 시간 증가: 소스맵 생성으로 인해 빌드 시간이 약간 더 걸릴 수 있어요.

그래서 정리하자면, 개발 중에는 당연히 소스맵 켜고 디버깅하는 게 편리하고, 프로덕션에서는 기본적으로 끄지만 상황에 따라 켜서 쓰면 된다는 이야기입니다. 필요에 맞게 설정을 조절해보세요!


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Next.js에서 productionBrowserSourceMaps 옵션을 활성화하면, 소스 맵(source maps)이 JavaScript 파일과 같은 디렉터리에 생성돼요. 그리고 Next.js가 요청이 들어오면 이 파일들을 자동으로 서빙해주죠.

하지만 여기서 알아둘 점이 몇 가지 있어요:

| 장점 / 단점          | 설명                                         |
|------------------|--------------------------------------------|
| 장점                | 디버깅할 때 원본 소스 코드를 쉽게 확인할 수 있어요.      |
| 단점 1             | 빌드 속도가 느려질 수 있어요.                         |
| 단점 2             | 빌드 시 메모리 사용량이 증가해요.                       |

그래서 프로덕션 환경에서 디버깅을 자주 해야 하거나 버그 추적이 필요한 특별한 상황이 아니라면, 이 옵션을 활성화하는 걸 신중하게 결정하는 게 좋아요. 소스 맵을 포함하면 빌드 시간이 길어지고 서버 자원도 더 쓰이기 때문에, 적절한 타이밍에 켜는 걸 추천합니다.

추가로, 만약 빌드 사이즈 최소화에 집중하고 싶다면, 소스 맵 없이 문제를 해결하는 방법도 고민해보세요! 예를 들어, 개발 환경에서만 소스 맵을 켜고 프로덕션 빌드에선 끄는 식으로 설정할 수 있거든요.

Next.js 15에서 Production Browser Source Maps 설정하는 방법

# reactCompiler

Next.js 15에서는 React Compiler를 공식 지원하기 시작했어요. 이 컴파일러는 성능을 쑥 올려주는 마법 같은 역할을 하는데요, 컴포넌트 렌더링을 자동으로 최적화해줘서 개발자가 직접 useMemo나 useCallback 같은 API를 통해 메모이제이션을 신경 쓸 필요가 훨씬 줄어들게 되었답니다.

사용 방법도 간단해요! Next.js 15 버전으로 업그레이드한 뒤, `babel-plugin-react-compiler`를 설치하면 끝!  
설치 명령어는 다음과 같아요:

```bash
npm install babel-plugin-react-compiler
```

> 참고로, 이 컴파일러는 특히 복잡한 상태 로직을 가진 대규모 애플리케이션에서 효과가 크게 나타나요. 기존에 매번 리렌더링 때문에 고민했던 부분들이 자연스럽게 해소될 수 있으니 꼭 활용해보세요.

또 한 가지, babel 플러그인을 설정하는 부분은 `babel.config.js`나 `.babelrc` 파일에 다음과 같이 추가해주시면 돼요:

```js
module.exports = {
  plugins: ["babel-plugin-react-compiler"],
};
```

이렇게만 해주면 Next.js 15와 함께 더욱 빠르고 깔끔한 React 앱을 만들 준비가 끝난 거예요! 앞으로는 불필요한 렌더링 걱정 없이 개발에 집중할 수 있겠네요 :)


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

그럼 next.config.js 파일에 experimental.reactCompiler 옵션을 추가해볼게요:

```js
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    reactCompiler: true,
  },
}

export default nextConfig
```

> 참고: React Compiler는 현재 Next.js에서 Babel 플러그인을 통해서만 사용할 수 있어요. 이 옵션을 켜면 Next.js 기본 Rust 기반 컴파일러를 사용하지 않게 되어서, 빌드 시간이 조금 더 길어질 수 있어요. 하지만 Next.js 팀에서 앞으로 React Compiler를 기본 컴파일러로 지원할 계획이라고 하니 기대해도 좋습니다!

## 주석(Annotations)

'Annotations'는 코드나 설정 등에 부가적인 설명이나 메타데이터를 달아주는 역할을 해요. 예를 들면, 함수나 컴포넌트 위에 달리는 주석들이나 TypeScript의 데코레이터(@) 같은 것도 일종의 애노테이션이죠. Next.js에서는 여러 실험적 옵션들에 대해 주석이나 문서화 작업을 통해 개발자를 돕고 있답니다.

추가로, React Compiler를 통해 얻을 수 있는 장점은 다음과 같아요:

- 더 빠른 렌더링 속도
- 중간 빌드 산출물 감소
- 향상된 개발자 경험(에러 메시지 개선 등)

하지만 아직은 실험 단계라서 호환성 문제나 빌드 속도 저하가 생길 수 있으니, 프로덕션 환경에서는 신중하게 테스트해보는 걸 추천해요.

필요하면 이 옵션을 켜고 끄면서 빌드 성능과 동작 안정성을 직접 체험해보는 것도 좋은 공부가 될 거예요!


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

이번에는 Next.js에서 컴파일러를 'opt-in' 모드로 설정하는 방법을 공유할게요. 이 설정을 통해 필요한 컴포넌트나 훅에만 React의 메모이제이션(캐싱)을 적용할 수 있는데요, 크게 두 단계가 있어요.

### 1. Next.js 설정 변경하기

먼저 `next.config.js` 혹은 `next.config.ts` 파일에서 컴파일러의 `compilationMode`를 `'annotation'`으로 설정해줘야 해요. 이렇게 하면 코드 내 특정 위치에만 메모이제이션을 활성화할 수 있게 돼요.

```js
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    reactCompiler: {
      compilationMode: 'annotation',
    },
  },
}

export default nextConfig
```

`experimental` 아래에 있는 설정이라 아직 완전히 안정화된 기능은 아닐 수 있으니, 프로젝트 상황에 맞게 테스트해보는 걸 추천합니다.

### 2. 특정 컴포넌트에 메모이제이션 적용하기

설정이 끝나면, 메모이제이션을 적용하고 싶은 컴포넌트나 훅에 `'use memo'`라는 디렉티브를 추가하세요. 아래처럼 컴포넌트 함수 최상단에 문자열로 선언하면 됩니다.

```js
export default function Page() {
  'use memo'
  // 이 컴포넌트는 React 메모이제이션의 혜택을 받게 돼요.
}
```

이걸 붙이는 순간, React 컴파일러가 이 컴포넌트를 최적화 대상으로 인식해 불필요한 리렌더링을 줄일 수 있어요.

---

### 추가 팁!
- `compilationMode`에 `'annotation'` 외에도 `'global'` 모드가 있는데, 이건 모든 컴포넌트에 자동으로 최적화를 적용하는 방식이에요. 하지만, 상황에 따라 부작용이 있을 수 있으니 꼭 필요한 부분에만 최적화를 적용하려면 `'annotation'` 모드를 추천합니다.
- React의 이와 같은 실험적인 최적화 기능은 프로젝트 규모가 크거나 복잡한 상태일 때 성능에 도움이 될 수 있어요. 하지만 작거나 단순한 프로젝트에서는 오히려 디버깅이 복잡해질 수 있으니 신중히 적용하세요.

이상으로 Next.js에서 React 컴파일러를 opt-in 모드로 활용하는 방법이었습니다. 필요할 때만 선택적으로 메모이제이션을 켜서 성능과 관리의 균형을 잘 맞춰보세요!


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1549334788"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

참고로, React에서는 "use no memo"라는 지시어도 사용할 수 있는데요, 이건 반대로 컴포넌트나 훅을 메모이제이션에서 제외하고 싶을 때 쓰는 방법이에요. 즉, 특정 컴포넌트나 훅이 리렌더링 될 때마다 항상 새롭게 실행되도록 하고 싶다면 이 지시어를 적용할 수 있죠.

메모이제이션(memoization)이란, 컴포넌트가 같은 props나 상태를 가진다면 이전에 계산한 결과를 재사용해서 불필요한 렌더링을 줄이는 최적화 기법이에요. 그런데 때로는 업데이트가 항상 필요하거나 캐싱을 원하지 않는 상황도 있거든요. 그럴 때 "use no memo"를 사용하는 게 도움이 됩니다.

참고로 "use no memo"는 공식 React API에 포함된 기능은 아니고, 보통 개발자들이 직접 구현하거나 특정 라이브러리에서 제공하는 기능인데요. 이름만큼이나 'no memo' 효과를 내어 성능을 제어하는 데 사용됩니다. 따라서 사용 시 문서나 라이브러리 가이드를 꼭 확인하는 게 좋아요.

Nextjs 15 에서 reactCompiler 사용하는 방법



# pageExtensions 설정으로 확장자 추가하기

안녕하세요! 오늘은 Next.js에서 기본으로 인정하는 페이지 확장자 설정을 바꾸는 방법을 살짝 알려드릴게요. 기본적으로 Next.js는 `.tsx`, `.ts`, `.jsx`, `.js` 파일만 페이지로 인식하는데요, 가끔은 마크다운 파일(`.md`, `.mdx`)도 페이지로 쓰고 싶을 때가 있죠? 그런 경우엔 `pageExtensions` 옵션을 활용하면 됩니다.

예를 들어, 마크다운(MD, MDX) 파일을 페이지로 추가하고 싶을 땐, 이렇게 해보세요:

```js
const withMDX = require('@next/mdx')()

/** @type {import('next').NextConfig} */
const nextConfig = {
  pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
}

module.exports = withMDX(nextConfig)
```

여기서 `pageExtensions` 배열에 원하는 확장자를 추가해줌으로써, Next.js가 해당 확장자의 파일들도 자동으로 페이지로 인식해요. 그리고 `@next/mdx` 같은 플러그인을 통해 MDX 파일을 컴포넌트처럼 다룰 수 있게 도와주죠.

---

> **Tip!**  
> 만약 여러분이 `.md`, `.mdx` 외에 또 다른 확장자를 쓰고 싶다면, 이 배열에 추가만 하면 됩니다. 예를 들어 `.vue` 나 `.svelte` 같은 확장자를 넣으면 되는데, 그걸 다루는 로더나 플러그인이 추가로 필요하다는 점 꼭 기억하세요!

Next.js는 생각보다 커스터마이징이 자유로워서, 여러분 프로젝트에 필요한 파일 확장자는 얼마든지 추가해서 쓰셔도 좋아요. 이렇게 하면 페이지 관리를 더 유연하게 할 수 있답니다. 😉

그럼 오늘 내용도 도움이 되셨으면 좋겠습니다! 다음에도 유용한 팁으로 찾아올게요~

Posts