Question

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

Answer 1

将不需要渲染服务器端的组件的内容包装在<no-ssr></no-ssr>标记中。

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

Answer 2

如果您的 Nuxt 版本> v2.9.0 ，则使用public class Client { public static void main(String[] args) throws Exception{ SparkConf conf = new SparkConf().setMaster("local"); conf.setAppName("TwitterStreamApp"); JavaSparkContext sc = new JavaSparkContext(conf); sc.setLogLevel("ERROR"); //Duration duration = new Duration(1000); JavaStreamingContext ssc = new JavaStreamingContext(sc, Durations.seconds(1)); JavaReceiverInputDStream<String> datastream = ssc.socketTextStream("localhost",9009); JavaDStream<String> words = datastream.flatMap(x->Arrays.asList(x.split(" ")).iterator()); JavaPairDStream<String,Integer> hashtags = words .filter(x-> x.contains("#")) .mapToPair(x-> new Tuple2<>(x,1)) .reduceByKey((a,b)->a+b); hashtags.foreachRDD((VoidFunction<JavaPairRDD<String,Integer>>) rdd -> { rdd.foreach((VoidFunction<Tuple2<String,Integer>>) s -> { JedisPool pool = new JedisPool(new JedisPoolConfig(), "localhost"); Jedis jedis = pool.getResource(); jedis.select(0); String word = s._1(); String count = s._2().toString(); System.out.println(word + " "+ count); if(jedis.exists(word)){ int i = Integer.parseInt(jedis.get(word)); jedis.set(word, Integer.toString(i+s._2())); }else{ jedis.set(word, count); } }); System.out.println("--------New RDD--------"); }); ssc.start(); ssc.awaitTermination(); } }代替<client-only>。

这里是一个例子：

<no-ssr>

<template> <div> <sidebar /> <client-only placeholder="Loading...">  <comments /> </client-only> </div> </template>用作占位符，直到Loading...中的组件安装到客户端为止。

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

Answer 3

您可以通过服务器中间件来实现

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 4

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

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

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

Answer 5

只需转到您的nuxt.config.js，搜索模式并对其进行更改

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

5 个答案: