NuxtJ는 동적 웹 사이트에서 생성됩니까?

NuxtJ는 동적 웹 사이트에서 생성됩니까?

NuxtJs로 간단한 데모 앱을 만들고 있습니다.홈페이지는 자주 변경되지 않는 정적 콘텐츠를 보여줍니다.사용자 목록을 표시하는 다른 경로가 있습니다./users사용자 세부사항 표시용:/user/id.

자, 이제 제 질문은 이 두가지가nuxt generate그리고.nuxt build어떤 것을 사용하면 좋을까요?

생각합니다nuxt generate페이지는 다음과 같은 동적 경로를 렌더링하지 않습니다.users그리고.user/id,내 말이 맞니?내 말이 맞다면generate명령어는 홈페이지 전용으로 사전 렌더링된HTML 을 생성합니다.그래서 사용하다generate사용하는 것보다 항상 낫다build그렇죠?

인universal모드,nuxt generate는 정적 사이트 생성용입니다. nuxt buildSSR 사이트용입니다.

2.13.0에서는Nuxt도입했습니다.target: static꼭 확인해 주세요.

정적 사이트는 최고의 성능을 제공하며 nginx 또는 다음과 같은 다른 서비스에 쉽게 배치할 수 있습니다.Netlify.

디폴트로는nuxt generate정적 홈 페이지만 렌더링하고/users페이지, 다이내믹이 아닌/user/:id경로.

단, 다이내믹루트를 생성하기 위해 nuxt를 설정할 수 있습니다.

1. 고정 사용자 세트가 있는 경우 함수를 사용하여 경로를 생성할 수 있습니다.

2. 사용자 데이터가 항상 변경되는 경우 다이내믹루트 상의 SPA에 폴백하도록 nuxt를 설정할 수 있습니다.단, 다이내믹루트에서는 SEO의 이점을 얻을 수 없습니다.

SPA 폴백의 경우 생성 설정에서 SPA 폴백 커스텀페이지를 정의합니다.

export default {
  generate: {
    fallback: "custom_sap_fallbackpage.html"
  }
}

예를 들어 Nginx의 경우 전개 내 알 수 없는 루트의 폴백페이지를 설정합니다.

location / {
    try_files $uri /custom_sap_fallbackpage.html;
}

nuxt buildSSR 사이트를 구축합니다.html은 서버에서 렌더링되어 클라이언트로 전송됩니다.서버에 부하가 걸리기 때문에 도입이 쉽지 않을 수 있지만 가장 큰 장점은 SEO입니다.또한 로우엔드 디바이스 또는 인터넷 접속이 느린 일부 사용자에게는 SPA 모드로 디플로이하는 것보다 사이트의 퍼포먼스가 더 좋을 수 있습니다.

기본적으로 다음 사항을 고려해야 합니다.

1. 웹 사이트의 내용이 정적인가, 계속 변화하는가.

nuxt generate스태틱의 경우. nuxt generate또는nuxt build또는spa동적 루트를 가진 사이트에는 다이내믹루트를 사용합니다.

2. SEO 필요하세요?

SPA는 SEO를 수신할 수 없습니다.

3. 사이트 전개 방법

스태틱 호스팅 서비스의 경우만nuxt generate또는spa모드는 동작합니다.

4. 당신의 웹사이트는 js코드로 무겁고 느린 인터넷과 느린 장치를 가진 사용자에게 최고의 성능을 원합니다.또는 다이내믹한 콘텐츠가 많은 사이트에서는 SEO가 중요합니다.

SSR is for you, use nuxt build.

There are three different deployment and generation options in Nuxt.

Universal Mode

---

In this mode you build your project and then you ship it to a node.js server, the first view is always rendered dynamically on the server and then turns into SPA, and works in the client. That's great for SEO, and for consuming API's but you cannot upload it to any hosting, for example on a shared VPS.

So - Node.js Host is required here.

SPA

---

Well basically how Vue.js works by default, virtually no SEO at all, you can upload it on a shared VPS hosting, because it's just an index.html and build.js file and it's working entirely on the client-side (in the browser).

We can go for a static hosting here.

Static App

---

This is where Nuxt.js shines, because this mode will generate an index.html file and the corresponding js/css assets for each route you have in the dist folder, and you can then just take those numerous files, and upload them to any hosting, you don't need a server here, because your first views are already pre-rendered, unlike Universal where the node server should pre-render the first view. So you get SSR here, and your main concert as far as I understand is if you get SPA too, and that's the best part as in Universal mode, after the first request the app continues in SPA mode, how great is that eh?

Anyways there are some things you should take into consideration, that if you want to generate index.html for dynamic content you need to make something that's kinda a mood killer. You need to add this to nuxt-config.js

generate: {
    routes: () => {
      return [
        '/posts/1'
      ]
    }    
  }

You can also use axios to make http request and return array here. Or even export default array from a file and include it here, where you combine all your dynamic routes. It's a one time job, but if you add new crud in your backend, that would add up 1 more request to run on executing nuxt generate that should be described in nuxt-config.

So that's the reason I would prefer to pay more for a server, but to host a Universal App, instead static generated, because that's the part that doesn't make it really great for consuming API's in my personal opinion, but it is a great future anyways.

웹 사이트를 자주 업데이트 할 경우 다음을 사용하여 빌드를 사용할 필요가 없습니다.npm generate웹 사이트 정적으로 빠르게 로드하고 검색 엔진과 SEO를 보다 안전하게 사용할 수 있습니다.또한 프로젝트에 데이터가 있는 경우 NuxtJs는 데이터베이스에서 모든 데이터를 다운로드하여 .json 파일로 데이터를 정적으로 변경합니다.

웹사이트가 데이터베이스에서 데이터를 로드하는 경우 반드시 사용해야 합니다.npm build데이터베이스에서 동적으로 데이터를 로드합니다.클라이언트 측 렌더링을 사용하지 않고 한 페이지에 대해 모드 "유니버설"을 사용하거나nuxt.config.js클라이언트측 렌더링을 실시합니다.

동적 라우팅에 사용npm build데이터베이스로부터의 루트 파라미터를 변경합니다.

언급URL : https://stackoverflow.com/questions/57651428/nuxtjs-generate-for-dynamic-websites