Next.js 실습 트러블
Next.js 강의를 들으며 실습을 진행하다
트러블이 생겨 적어보겠다.
문제 1. API로 불러온 이미지 불러와지지 않음
원인:
API로 불러온 외부 이미지를 서버 컴포넌트에서 사용하려면 설정을 해줘야한다.
이를 해결하기 위해 정리한 개념
Next.js에서는 이미지 최적화를 위해 내부적으로 다양한 처리를 수행한다.
1. 이미지 크기 조절:
제공된 width및 height 속성을 기반으로 클라이언트에 적합한 이미지 사이지를 반환한다.
최적화된 형식으로 자동으로 선택(JPEG, WebP, AVIF 등)
2. 지연로딩(lazy loading):
이미지를 화면에 표시될 ㅒㄷ까지 로드하지 않아 초기 페이지 로딩 속도를 줄인다.
3. 서버에서 이미지 캐싱 및 압축
next/image는 Next.js의 이미지 최적화 API를 통해 이미지를 캐싱하고 압축하여 전송한다.
외부 API를 통하여 이미지를 로드하거나 외부 URL을 src속성에 지정할 때
해당 도메인을 신뢰할 수 없는 출저로 간주하여 오류를 발생시킨다.
해결:
이러한 보안 조치로 인해 외부 URL을 사용하기 전에 해당 도메인을 next.config.js 파일에 명시적으로 허용해야한다.
아래 이미지 참고
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: false,
images: {
remotePatterns: [
{
protocol: "https",
hostname: "fakestoreapi.com",
pathname: "/**",
},
],
formats: ["image/avif", "image/webp"],
},
};
export default nextConfig;
문제2. Suspens 동작하지 않음
- 아래 글은 수정 필요 이부분은 구현이 되야하는게 맞다고 한다.
- SSG는 suspense가 동작하지 않는게 맞지만 내가 작성한 코드는 SSR임.. 작동해야함
- suspense에 대한 이런저런 실습을 한 후 다시 수정예정
- 아래의 적힌 원인과 해결은 무시
일단 Suspense를 이용하여 로딩 시 Loading... UI를 그려주고 싶어 코드를 작성하였는데
생성한 loading.tsx가 작동하지 않았다.
원인:
이유는 Suspense의 동작방식이였다.
내가 작성한 코드는 둘 다 서버 컴포넌트였고(SSG), 서버 컴포넌트(SSG)에서 loading.tsx코드를 보여주고 싶었는데,
애초에 내 코드는 서버 컴포넌트(SSG)로서 fetch를 호출하여 데이터를 가져오고, 그 결과를 렌더링하게 되어있다.
Next.js 서버 컴포넌트(SSG)는 애초에 비동기 작업이 완전히 끝날때까지 기다린다.
즉, Suspense의 fallback이 작동할 시점이 없던것이다.
데이터가 로드되기 전에는 클라이언트는 아무런 HTML도 전송하지 않기 때문에 Loading컴포넌트가 표시되지 않는다.
Suspense를 확인하려면 클라이언트 컴포넌트의 로딩상태에서 사용할 수 있다.
또는 SSR, ISR
클라이언트 컴포넌트 내의 비동기작업(useEffect, fetch 호출)을 기다리는 동안에만 fallback UI를 표시할 수 있다.
결론 요악
서버 컴포넌트에서 비동기 작업을 수행할때에는 클라이언트에 로딩 상태가 전달되지 않으므로 Suspense의 Loading 컴포넌트를 확인할 수 없다.
해결:
클리이언트 컴포넌트로 변환하고 loading.tsx를 확인하자
