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

Posted 2023-02-22

【中文标题】如何仅关闭 Nuxt.js 中某些页面的 s-s-r 以将它们用作 SPA 应用程序？

【英文标题】：How can I turn off s-s-r for only certain pages in Nuxt.js to use them as SPA application?

【发布时间】：2019-06-25 14:59:15

【问题描述】：

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

【问题讨论】：

nuxtjs.org/api/components-no-s-s-r#the-lt-no-s-s-r-gt-component

【参考方案1】：

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

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

  plugins:[
    src: your-plugin, s-s-r: false 
]

【参考方案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-s-s-r-or-spa-mode-in-a-nuxtjs-ap

【参考方案3】：

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

【讨论】：

这会将整个应用程序设置为 SPA。 nuxtjs.org/docs/2.x/configuration-glossary/configuration-s-s-r

【参考方案4】：

如果您的 Nuxt 版本为 >v2.9.0，则使用 <client-only> 而不是 <no-s-s-r>。

这是一个例子：

<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

【讨论】：

问题涉及 Nuxt 页面，而不是组件模板

【参考方案5】：

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

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

【讨论】：

正如以下答案之一所说：如果您的 Nuxt 版本 >v2.9.0，则使用 <client-only> 而不是 <no-s-s-r>