inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

Nuxt.js 시작하기

SSG 시 SPA fallback 및 asyncData & fetch 문의(부분 SPA or CSR)

393

이승주

작성한 질문수 2

1

사내 협업을 위한 인하우스 앱도 nuxt로 새로 개발하려 합니다.

문제는 파편화된 기존 백엔드와(대부분 REST API, 최근 몇개는 웹소켓) 지금까지 사용하던 Django (HTML 템플릿 + jQuery) 서비스에 최신 프론트엔드를 붙여야 하는 상황입니다.

그러다 보니 SSG 아니면 CSR 밖에 선택지가 없는데, https://nuxtjs.org/docs/concepts/static-site-generation/ 에서 generate.exclude 옵션을 사용한 뒤 nuxt generate로 정적 사이트를 생성하면 해당 경로는 CSR로 된다는 것을 읽었습니다.

 

이 기능을 사용하고 싶어 검색 후 다음과 같은 게시물을 확인하였습니다.

https://stackoverflow.com/questions/68837954/how-do-dynamic-api-calls-work-in-nuxt-js-static-vs-ssr-mode

https://www.reddit.com/r/Nuxt/comments/ndn2vz/comment/gybtj55/

 

위 두 글에서 링크한 nuxt 블로그 게시물(https://nuxtjs.org/announcements/going-full-static/#crazy-fast-static-applications )을 확인하니, nuxt 2.14 버전 이후로는 target: 'static'인 상태에서 nuxt generate를 실행 시 클라이언트 사이드 내비게이션에서의 asyncData와 fetch를 모사하기 위해서 HTML을 사전 렌더링할 때 페이로드 파일을 저장한다고 하고 있습니다.

this means no more HTTP calls to your API on client-side navigation.

즉 SSG 모드를 켜면 더 이상 API에서 값을 가져오는 것이 아닌 generate 할 때의 API 값을 저장해 하나의 html로 만들어버린다는 것인데, 혹시 이 옵션을 끄고 SSG와 SSR, CSR 모두 동일하게 페이지 진입 시 API에서 새 값을 받아올 수 있게 하는 법이 있을까요?

 

API에서 값을 받아오고 싶으면 무조건 exlcude에 경로를 추가해 CSR로 돌려야 하나요?

 

 

ssg csr vuejs generate.exclude nuxtjs ssr asyncdata

답변 1

0

캡틴판교

안녕하세요, 말씀하신 것처럼 SSG는 프리렌더한 파일을 제공합니다. 별도의 API 요청을 원하신다면 SSR로 설정하셔야 할 것 같아요! exclude는 저도 써보지 않아서 요청을 받았을 때 동적으로 페이지를 그려주는지는 확인해 보셔야 할 것 같네요 :)

판교님, 50% 학생 할인 쿠폰

0

148

2

캡틴님 커리어 질문 있습니다

0

82

1

nuxt 최신버전 설치 후 layouts 없어서 직접 폴더 생성 후 문제

1

357

1

vue나 nuxt 새로운 강의는 출시 예정이 없으실까요?

0

194

1

24년 강의를 들으면서 에러나는 부분 정리

2

347

2

공식홈페이지에 설치방법이 바뀐거같아요

1

410

3

layouts폴더와 default.vue에대해서 궁금한 점 있습니다!

1

385

2

자료가 없습니다.

1

287

2

에러 페이지 정의 방법 강의 문의

1

339

2

SSG -> SSR 배포 방식 전환

1

531

2

갑자기 화면에 에러가 나오네요..

1

452

2

마지막 강의까지 작성된 코드

1

298

2

JSON Server Operator 링크에 Operator 가 없습니다.

1

227

2

Vue2 EOL 관련해서..

1

464

2

env.baseUrl 문제

1

626

2

블로그 기능 질문입니다!

1

464

3

node 버전 문제 질문입니다.

1

228

1

폴더구조 다른것 안내 부탁드려요

1

459

1

npm run generate 배포

1

681

2

캡틴판교 선생님 너무 궁금해서 질문드립니다 ㅜ

1

331

2

nuxt.config.js 에서 baseurl 지정하는 방법

2

996

1

db.json 안에 이미지 아래 본문 처럼 바꾸면 랜덤으로 나옵니다.

2

614

3

axios 설치 후 새로고침 시 에러 발생할 때 해결 방법 입니다.

2

775

2

SSG 배포가 현재 상품,장바구니에는 맞지 않는 배포방식인거죠?

1

390

2