vue.js 路由页面上的Nuxt3渲染模式

ht4b089n  于 2023-10-23  发布在  Vue.js
关注(0)|答案(1)|浏览(131)

Nuxt3页面路由默认在客户端呈现?我的应用程序页面只有第一页在服务器端呈现,其他页面在客户端呈现,如vue路由器,这正常吗?我可以使用nuxtlink获得ssr渲染的页面吗?
我试过了,但是每一个使用nuxtlink的页面都是由客户端渲染的,但是我发现,如果我使用“a”标签来导航,页面会刷新,这个页面会被ssr渲染。

jv4diomz

jv4diomz1#

它是正确的。如果你想在服务器端呈现你的页面,你应该使用一个标签代替nuxtlink标签。通过使用nuxtlink标签,您的页面在客户端上呈现。在nuxt中有不同的渲染模式,你可以在这里看到它的文章:
https://nuxt.com/docs/guide/concepts/rendering
正如你所看到的,你可以选择不同的属性为您的不同路线。

export default defineNuxtConfig({
  routeRules: {
    // Homepage pre-rendered at build time
    '/': { prerender: true },
    // Product page generated on-demand, revalidates in background
    '/products/**': { swr: 3600 },
    // Blog post generated on-demand once until next deploy
    '/blog/**': { isr: true },
    // Admin dashboard renders only on client-side
    '/admin/**': { ssr: false },
    // Add cors headers on API routes
    '/api/**': { cors: true },
    // Redirects legacy urls
    '/old-page': { redirect: '/new-page' }
  }
}

例如SSR:boolean -禁用应用部分的服务器端渲染,并使用ssr使其仅限于SPA:假
如果您使用API,而它在您工作期间发生了变化,则最好使用以下代码

if (process.client) {
///    do this
  }else{
///    do that
  }

相关问题