vue.js 如何仅对Nuxt.js中的某些页面关闭SSR,以将其用作SPA应用程序?

vd8tlhqk  于 2023-01-05  发布在  Vue.js
关注(0)|答案(5)|浏览(708)

我想用Nuxt.js开发一个应用程序,它只对某些页面(如艺术家页面用户页面)使用SSR,所以没有SSR的页面将像SPA一样使用。使用Nuxt.js可以做到吗?

ajsxfq5m

ajsxfq5m1#

你可以通过服务器中间件来完成。例如,在~/server-middleware/check-spa.js下添加以下文件。不要使用middleware目录,因为它是路由中间件的目录,会被复制到客户端代码中。

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()
}

然后,在nuxt.config.js中启用服务器中间件,如下所示

serverMiddleware: ['~/server-middleware/check-spa']

更多信息:https://nuxtjs.org/docs/configuration-glossary/configuration-servermiddleware/
https://blog.lichter.io/posts/nuxt-dynamic-ssr-spa-handling/

kse8i1jr

kse8i1jr2#

将您不想在服务器端呈现的组件的内容 Package 在<client-only></client-only>标记中(对于nuxt版本〈2.9.0,为<no-ssr></no-ssr>)。
@DenisTsoi的链接应该会给予你更多关于它如何工作的信息。

goqiplq2

goqiplq23#

如果您的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

x0fgdtte

x0fgdtte4#

如果它是一个插入到另一个组件中的组件,请将其 Package 在<no-ssr> <your-component /> </no-ssr>标签中。(它曾经是<client-only> </client-only>
如果它是插入nuxt.connfig文件的插件或mixin,您可以将其更改为

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

wecizke35#

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

相关问题