如何仅对 Nuxt.js 中的某些页面关闭 SSR 以将它们用作 SPA 应用程序？

Question

我想使用 Nuxt.js 开发一个应用程序，该应用程序仅对某些页面（如艺术家页面用户页面）使用 SSR，因此没有 SSR 的页面将像 SPA 一样使用。是否可以使用 Nuxt.js 做到这一点？

Answer 1

你可以通过服务器中间件做到这一点

export default function(req, res, next) {
  const paths = ['/', '/a']

  if (paths.includes(req.originalUrl)) {
    // Will trigger the "traditional SPA mode"
    res.spa = true
  }
  // Don't forget to call next in all cases!
  // Otherwise, your app will be stuck forever :|
  next()
}

https://blog.lichter.io/posts/selectively-enable-ssr-or-spa-mode-in-a-nuxtjs-ap

Answer 2

对于 Nuxt3 在特定页面上禁用 ssr 或您可以使用的其他渲染选项，

export default defineNuxtConfig({
  routeRules: {
    // Static page generated on-demand, revalidates in background
    '/blog/**': { swr: true },
    // Static page generated on-demand once
    '/articles/**': { static: true },
    // Set custom headers matching paths
    '/_nuxt/**': { headers: { 'cache-control': 's-maxage=0' } },
    // Render these routes with SPA
    '/admin/**': { ssr: false },
    // Add cors headers
    '/api/v1/**': { cors: true },
    // Add redirect headers
    '/old-page': { redirect: '/new-page' },
    '/old-page2': { redirect: { to: '/new-page', statusCode: 302 } }
  }
})

这可能会发生变化，因此如果发生变化，请继续查看他们的文档 https://nuxt.com/docs/guide/concepts/rendering#cons-1

Answer 3

将您不想在服务器端呈现的组件的内容包装在<no-ssr></no-ssr>标签中。

@DenisTsoi 的链接应该会为您提供有关其工作原理的更多信息。

Answer 4

如果您Nuxt版本> v2.9.0，然后用<client-only>替代<no-ssr>。

下面是一个例子：

<template>
  <div>
    <sidebar />
    <client-only placeholder="Loading...">
      <!-- this component will only be rendered on client-side -->
      <comments />
    </client-only>
  </div>
</template>

将Loading...被用作占位符直到内的成分（S）<client-only>安装在客户机侧。

您可以在此处了解更多信息：Nuxt API -<client-only>组件