V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
rocmax
V2EX  ›  Nuxt.js

如何确定 Nuxtjs 当前的渲染模式?

  •  1
     
  •   rocmax · 2023-05-17 09:37:30 +08:00 · 1021 次点击
    这是一个创建于 373 天前的主题,其中的信息可能已经有所发展或是发生改变。

    中途参加了一个使用 Nuxtjs(v2.15.7)开发客户管理 APP 的团队,本人有 React/Nextjs 开发经验,一开始就是看看文档照猫画虎写点页面,稍微深入了解项目之后对于如何配置 Nuxtjs 渲染方式产生了一点疑问,求指点。

    项目当前的情况:

    • nuxt.config.js内的相关配置为
        ssr: false,
        target: "static",
        generate: 未配置
      
    • Docker 化时候用的是npm run generate,启动命令npm start。并没有做只拷贝 dist 目录等减少镜像体积的优化,所有文件原封不动塞到镜像里然后部署到 K8s
    • 使用了动态路由(/post/_id),而且可以正常显示

    想问一下这种情况下项目跑在何种模式下( ssr,ssg,spa )?

    下面是问题发现的过程,有点长:

    由于这个项目部署到 K8s 而不是 CDN ,最初我认为采用的是 SSR 模式。当时遇到个情况是每次 CI 在 build 阶段都要针对不同环境( dev,test,prod...)生成多个镜像,差别只是环境变量不同。我想直接利用 runtimeConfig 把这些变量放到 pod 里的话 CI 做一个镜像就够了。但是尝试失败。

    后来我看了 nuxtjs 配置文件,意识到我理解错了,项目采用的应该是 SSG 方式,确实看 generate 日志也是生成了每个页面的文件,静态文件的话当然是无法从环境读取变量,只有 build 阶段替换了。

    再后来我发现另外一个开发人员使用了 dynamic route(/post/_id 这样的路由,id 是动态变化的,无法在 build 时从数据库获取,而且 generate 也没配,之前已经开发的部分没用过动态路由)。我想 SSG 模式下动态路由会被忽略不生成,我就提醒他说可能页面没法用。但是现实打脸,部署后可以正常访问。

    于是我看了访问页面时返回的 html ,发现所有页面都只有一个id="__nuxt"节点,这种情况应该是 fallback 到 SPA 了吧,感觉是每个页面被单独做成了一个 SPA ?如果是这样的话 generate 就完全是多余的。

    那么,npm start启动 Nuxt 服务器的时候到底是如何处理的?会检查已经 generate 好的文件吗?

    第 1 条附言  ·  2023-05-21 23:03:11 +08:00

    好吧,看来这里人气不是很高。我又做了一些调查,同步一下结果。

    关于三种渲染模式的配置:

    1. SPA模式:ssr: false (无需配置target,如果像我们这个项目一样配置target: static的话会有一些怪异的影响,后面细说),使用nuxt build构筑,构筑结果会出现在.nuxt目录下。虽然同时会生成dist目录但是启动时这个目录是不需要的,删除也没有影响。在.nuxt/dist/server下可以看到生成的spa文件index.spa.html
    2. SSR模式:ssr: true, target: server,使用nuxt build构筑,构筑结果会出现在.nuxt目录下。
    3. SSG模式:ssr: true, target: server,使用nuxt generate生成,生成结果会出现在dist目录下。

    三个并列的模式选项为啥要用两个配置项控制我不能理解,玩排列组合了属于是。

    关于启动命令nuxt start

    在我们的项目配置情况下,nuxt start 确实是会检查dist目录是否存在,如果删除了dist启动会报错。但是它又不是简单地Host了dist目录,因为动态路由的页面是没有生成的。用其他工具比如http-server直接host dist目录的话访问动态路由会返回404。但是用nuxt start的话就可以正常访问。分析原因是nuxt在node_modules/.cache/nuxt下产生了一份build结果,其中有路由文件,nuxt start实际上是启动了这里的server.js,然后根据动态路由配置返回页面。进一步测试不删除整个dist而是删除下面的某一个页面文件,用nuxt start启动后发现其仍可访问,证明此时并没有host dist下的文件,而是完全由node_modules/.cache/nuxt下的build结果来处理请求。

    我们项目配置存在的问题

    对比了dist下生成的各个html文件,发现其内容都是完全一样的,整个项目里有200多个一样的index.html。这实在是太傻了。。。感觉是为了能从每个url都访问到同一个spa,所以copy了份。。。。 然后我还发现了这个issue似乎还没有解决的样子

    结论

    1. 使用Nuxtjs的SPA渲染模式是只要设置ssr: false即可,不需要配置target: static
    2. 如果配置了ssr: false的话用nuxt build构筑,用nuxt start启动服务器。Nuxtjs似乎并不能生成比较好的单个SPA文件用于CDN部署。
    3. Nuxtjs的文档过于简略(v2.x)
    1 条回复    2023-05-21 23:11:09 +08:00
    rocmax
        1
    rocmax  
    OP
       2023-05-21 23:11:09 +08:00
    结案,我去找管项目的聊聊。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2719 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 11:17 · PVG 19:17 · LAX 04:17 · JFK 07:17
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.