[VUEJS] Nuxtjs 3 적용 후기

오랜만에 여유가 있어서 포스팅을 하나 남겨봅니다!

 

SSR 기능을 제공하는 넉스트(nuxt) 프레임 워크를 적용 하여 보았습니다.

확실히..뷰가 리엑트에 비해 사용하는 사람이 적고, next보다 레퍼런스가 훨씬 적어서인지 기존 공식사이트에 나온 방법이 적용되지 않는 부분이 여러군데 있었던 거 같습니다.

버전을 올리고나서 홈페이지 업데이트가 안되었나 싶기도 합니다만,

 

간단하게 nuxtjs를 사용하는 것은 매우 좋다고 생각 하지만 가령 nuxt-auth 같은 조금 더 정형화된 프레임 워크를 사용하는 것에 대해서는 많은 고민을 해 보아야 할 거 같았습니다.

nuxt-auth 같은 경우에는 nuxtjs버전 2에서만 사용이 가능하고, nuxt3 버전에서 이러한 권한 라이브러리를 사용 하려면 "@sidebase/nuxt-auth" 를 사용해야 하는데..

리엑트의 next-auth를 컨버팅한 라이브러리로 기능이나 타입 안정성이 매우 좋지 않았습니다.

나와있는 방법을 그대로 적용 하거나, 레퍼런스에 있다고한 함수, 클래스는 실제 "@sidebase/nuxt-auth"를 사용 해 보면 해당 타입이 없거나 함수가 없는 경우가 있었습니다.

* 2024년도 10월 기준

 

좀더 시간이 지난뒤에 이러한 권한과 인증 프레임워크(auth)를 사용하는 편이 나을거 같았습니다.

그 전까지는 "nuxt-auth-utils" 제공하는 세션 기능과 미들웨어(middleware)에서의 인터셉트를 통한 인증 관리를 하는 편이 좀더 나을 거 같습니다.

 

번들러 도구인 vite의 설정을 사용하게 되는 경우, 역시나 소개한 문법과 적용 방법이 되지 않는 경우도 잦았습니다.

분명 xxx 속성이 있다고 하지만 여전희 제가 사용중인 타입에는 undefined가 발생하였으니까요.

특히 프록시 같은 설정은 nitro 설정이나 vite에 하는 것 보다도 "@nuxt-alt/proxy" 을 설치 한 뒤 해당 설정방법을 사용하는 것이 좀더 편하고 좋았었습니다.

 

페이지별 캐싱 전략은 잘 되었던거 같지만 SSR을 설정하고, 캐시 값을 "no-cache"로 설정 하여도 한번 로딩된 페이지에 대해서는 별도의 렌더링이 지원되지 않는 점은 좀 아쉬웠던 거 같았습니다.

 

이번에 적용하여 본 nuxt의 설정 파일 샘플 입니다.

*  파일 이름 : nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
import { fileURLToPath, URL } from "node:url";
export default defineNuxtConfig({
  app: {
    head: {
      meta: [
        { name: "viewport", content: "width=device-width, initial-scale=1" },
        { charset: "utf-8" },
      ],
      title: "타이틀",
    },
  },
  srcDir: "src/",
  devtools: { enabled: true },
  experimental: {
    renderJsonPayloads: false,
  },
  modules: [
    "@pinia/nuxt",
    "pinia-plugin-persistedstate/nuxt",
    "@nuxt-alt/proxy",
    "nuxt-auth-utils",
  ],
  pages: true,
  ssr: true,
  runtimeConfig: {
    public: {
      NUXT_PORT: Number(process.env.NUXT_PORT) || 3000,
    },
    session: {
      maxAge: 60 * 30 * 1, // 30분
    },
  },
  components: {
    dirs: ["~/components"],
  },
  pinia: {
    storesDirs: ["~/stores/**"],
  },
  nitro: {
    routeRules: {
      "/_nuxt/**": {
        headers: { "cache-control": `no-cache` },
      },
    },
    compressPublicAssets: {
      brotli: true,
      gzip: true,
    },
  },
  css: ["~/assets/global.scss"],
  proxy: {
    proxies: {
      "/serverApi": {
        target: process.env.SERVER_API_URL,
        changeOrigin: true,
        agent: false,
        rewrite: (path: string) => {
          console.log("path:", path);
          return path.replace(/^\/serverApi/, "");
        },
      },
    },
  },
  vite: {
    vue: {
      customElement: true,
      script: {
        propsDestructure: true,
      },
    },
    resolve: {
      alias: {
        "@": fileURLToPath(new URL("./src", import.meta.url)), //@ 값 치환
      },
    },
    css: {
      preprocessorOptions: {
        scss: {
          api: "modern-compiler", // or "modern"
          additionalData: '@import "@/assets/variable.scss";',
        },
      },
    },
  },
});

 

서버사이드 렌더링의 이점을 생각하고 적용하여 본 nuxtjs는 여러 라이브러리를 추가하여 사용하는 점 에는 솔직히 물음표(?) 인거 같습니다.

간단한 페이지를 구성하려면 역시나 nginx와 도커 기반의 구성을 통하여 프로젝트를 올리는 편이 나을 거 같았습니다.

 

nuxtjs를 하실꺼면 차라리 리엑트에 next를 하시는게 저는 낫다고 생각 합니다. 안 쓰는 데 이유가 다 있...