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

Question

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

Answer 1

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

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

Answer 2

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

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 3

如果您的 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... 用作占位符，直到 <client-only> 中的组件安装到客户端。

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

Answer 4

只需转到您的nuxt.config.js，搜索模式并将其更改为

Answer 5

如果是插入到另一个组件中的组件，将其包裹在<no-ssr> <your-component /> </no-ssr> 标签中。（以前是<client-only> </client-only>）

如果是插入nuxt.connfig文件的插件或者mixin，可以改成

  plugins:[
   { src: your-plugin, ssr: false }
]

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

How can I turn off SSR for only certain pages in Nuxt.js to use them as SPA application?

vue.js

server-side-rendering

nuxt.js