Nuxt 에서 특정 페이지만 SSR로 하는 방법이 있을까요?

Question

기존 웹사이트를 리뉴얼 하는 프로젝트에 들어가게 되었는데 프론트가 Nuxt v2고 설정이 전역 SPA로 되어있더군요.새롭게 추가하는 페이지는 SSR로 하는 것으로 되었습니다.그래서 테스트를 위해서 전역 SSR 일 때, 서버 미들웨어를 추가 해서 일부 페이지만 SPA로 하는 것은 문제없이 됐는데 반대의 경우(전역 SPA, 일부 SSR)는 미들웨어 추가를 하거나 이것 저것 해도 잘 안되더군요.혹시 아시는 분 계시면 알려주시면 정말 감사드리겠습니다.

킹포링 (INTP) · Answer

Nuxt에서는 페이지별로 모드(mode)를 설정할 수 있습니다. 이를 이용하여 특정 페이지만 SSR로 설정할 수 있습니다.nuxt.config.js 파일에서 특정 페이지의 모드를 'universal'로 설정합니다.module.exports = { // ... mode: 'spa', // 전체 페이지를 SPA 모드로 설정 render: { // ... bundleRenderer: { // ... shouldPreload: (file, type) => { // ... }, shouldPrefetch: (file, type) => { // ... }, }, }, generate: { // ... }, // ... router: { extendRoutes(routes, resolve) { routes.push({ name: 'my-page', path: '/my-page', component: resolve(__dirname, 'pages/my-page.vue'), mode: 'universal', // 특정 페이지만 SSR 모드로 설정 }) }, }, } 위 예제에서 my-page 페이지를 mode: 'universal'로 설정하여 SSR 모드로 사용하도록 설정하였습니다.해당 페이지 컴포넌트 파일(my-page.vue)에서 mode 옵션을 설정합니다. 위 예제에서 my-page.vue 파일에서 mode: 'universal'로 설정하여 SSR 모드로 사용하도록 설정하였습니다.위와 같이 설정하면, 전체적으로는 SPA 모드로 동작하되, 특정 페이지는 SSR 모드로 동작하도록 설정할 수 있습니다.

Nuxt 에서 특정 페이지만 SSR로 하는 방법이 있을까요?

1개의 답변

#nuxt.js 목록