인프런 커뮤니티 질문&답변
작성한 질문수
Nuxt의 target과 mode & router 에 대해서 질문드립니다.
21.09.16 11:29 작성
·
552
1
안녕하세요 강사님.
항상 좋은 강의를 제공해 주셔서 너무 감사합니다.
수강을 하면서 궁금한 점이 있습니다!!
1. `target: static` 으로 적용 뒤 배포하게 되면 rendering mode는 default인 `universal / ssr:true`로 유지되는지 궁금합니다.
2. `target: static`으로 적용 뒤 `ssr: false(CSR)`로 적용하게 되면 `target`이 어떻게 적용되는지 궁금합니다.
3. 현재 this.$router.push('/cart')와 같이 페이지를 이동하게 되는데, vue와 같이 router name으로 페이지를 이동하기 위한 방법이 있는지 궁금합니다.
혼자 공부하다 보니 궁금한 점이 많아서 이렇게 질문드립니다!! 🙇♂️
답변 2
2
2021. 09. 21. 03:42
안녕하세요 ㅎㅎ 용수님, 저도 얼마 전에 이 부분에 대해서 공부했는데요, 완벽하지는 않지만 도움이 되실 것 같아 이렇게 답변 남깁니다.
1, 2번에 대해서 결론부터 말씀드리면,
1. ssr 옵션 값 자체는 변하지 않습니다만 더이상 런타임 때 서버와 클라이언트에서 렌더링을 하지 않습니다.
2. ssr: false일 때는 target: static이 적용되지 않습니다.
1번에 대해 설명 드리면,
universal 모드(ssr: true)에서는 앱에 첫 접근시 SSR로, 페이지 간 이동은 CSR로 진행합니다. SPA 모드(ssr:false)에서는 말 그대로 SPA모드라 CSR로 진행합니다. 차이가 어떻든 두 모드는 사용자가 요청을 하면 그 때서야 정적 HTML을 렌더링하는 공통점을 가지고 있습니다.
target을 server로 할 경우 설명한 것처럼 런타임 때 요청에 맞춰 정적 HTML을 렌더링합니다. 반대로 static을 할 경우 사용자가 요청도 하기 전인 빌드 때 미리 정적 HTML을 만들어 놓습니다. 그렇기 때문에 렌더링할 곳을 서버로 할지 클라이언트로 할지 정할 필요가 없어집니다. 사용자가 요청을 하면 이미 렌더링이 끝난 정적 HTML을 주기만 하면 되기 때문에 반응속도도 빠르고 SEO에도 무척 유리합니다.
2번의 경우 아래의 링크를 참조하시면 좋을 것 같습니다.
https://stackoverflow.com/questions/63336570/whats-the-real-difference-between-target-static-and-target-server-in-nuxt
3번은 저도 잘 모르겠네요. 라우팅이 자동으로 만들어지기 때문에 depth가 dash로 표현된다는 얘기를 얼핏 들은 것도 같습니다. 예를 들면, pages/auth/user.vue이면 name이 auth-user로 되는 것 같습니다. 이건 테스트를 해봐야지 알 것 같네요.
혹시 위에서 잘못된 설명이 있다면 꼭 알려주세요! 감사합니다 용수님 ㅎㅎ
1
2021. 09. 25. 14:24
안녕하세요 용수님, 제가 확인이 좀 늦었네요 :) 대현님께서 먼저 보고 자세히 답변해 주셔서 궁금증이 많이 풀리셨을 것 같습니다. 1,2번에 대해 충분히 좋은 설명해 주셔서 3번에 대한 답변만 드릴게요 :) 강의에서 안내드린 것처럼 Nuxt에서는 VueRouter를 일일이 제어할 필요가 없지만 기본적으로 라우팅하는 개념은 VueRouter와 동일합니다. 이동하시려는 페이지는 보통 파일과 폴더의 이름을 따라갑니다. cart.vue 페이지라면 name도 cart가 될거예요. 따라서, this.$router.push({ name: 'cart' }) 와 같은 형태로 라우팅 하시면 됩니다. 이동하시려는 페이지의 라우터 이름이 궁금하시면 뷰 개발자 도구의 $route 속성을 확인해 보세요 :)
수강해 주셔서 감사합니다!
2021. 09. 22. 19:49
친절한 설명 너무 감사합니다!! 대현님!
target이 static임에도 ssr에 따라서 동적라우팅이 가능해지는 현상이 있었는데, 이 부분에 대한 이슈를 해결 후 꼭 알려드리겠습니다.
다시 한번 친절한 설명 감사합니다!