Nuxt 개발 삽질기

안녕하세요! aloveu입니다.

Nuxt를 개발하면서 삽질했던 기억을 더듬어 글을 남깁니다. 생각날 때마다 포스트를 업데이트할 예정이에요.

---

API가 응답이 올 때까지 페이지 이동이 되지 않고 그대로 머물러 있을 때

await useAsyncData를 사용하고 있어서 데이터를 받아올 때까지 페이지 이동이 되지 않음. > await를 제거하면 됨

 

서버에서 메모리릭 발생

memory가 계속 풀 나서 서버가 하루에 한두 번씩 재부팅하는 현상 발견.

 

1. vue-recaptcha 모듈을 사용했을 때 vue-recaptcha/nuxt 에서 GC가 되지 않는 걸 발견
2. isomorphic-dompurify가 서버에서 sanitize 하는 과정에서 메모리릭이 남.  > xss로 변경

Nitro Fetch에서 AbortController 적용하기

// API.ts
export default async function getXXXRequestApi(
    data: APIRequestDTO,
    signal?: AbortSignal,
) {
    await $api<APIResponseDTO>('/API_URL', {
        method: 'GET',
        params: data,
        signal,
    });
}

 

// Component
const abortController = new AbortController();

await getXXXRequestApi(data, abortController.signal);

onUnmounted(() => {
	abortController?.abort({ reason: 'Cancel API' });
});

entry css 성능 이슈

성능 이슈로 entry.css를 차단하기 위해 Nuxt Vitalizer(https://nuxt.com/modules/vitalizer)를 설치

// `nuxt.config.ts`
export default defineNuxtConfig({
  modules: ['nuxt-vitalizer'],

  vitalizer: {
    // Remove the render-blocking entry CSS
    disableStylesheets: 'entry'
  }
})