V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
dream4ever
V2EX  ›  前端开发

前端页面架构调整

  •  
  •   dream4ever · 2023-01-31 11:27:20 +08:00 · 1569 次点击
    这是一个创建于 660 天前的主题,其中的信息可能已经有所发展或是发生改变。

    现状

    1. 有很多旧页面分散在各个网站的不同物理路径下,它们的功能和样式其实只有几类,都是用来呈现 “单个视频 /一批视频 /单个音频 /单个 Office 文档 /单个 PDF” 的内容的。
    2. 这些旧页面在架构层面基本相同,都是 一个手写的 HTML 文件 + Vue.js + Vue 实例的 JS 配置文件 + 一些其他必须的 JS 库(如播放流媒体的 hls.js ,或者渲染 PDF 内容的 pdf.js ),Vue.js 和其他的 JS 库都是手动引用 CDN 上的 min 版本。
    3. 不同路径下同类功能的页面,比如呈现单个视频的页面,在代码上除了视频相关信息方面有不同,其他方面也都是一模一样的。
    4. 各页面所呈现多媒体资源的相关信息,比如文件名、文件相对路径、音视频时长、视频封面图片路径等信息,都是手写在 Vue 实例的 data 属性中的。

    需求

    因为熟悉 Vue.js ,所以想用现代化的脚手架( Vue-Cli ?)/框架( Nuxt.js ?只是听过,还没用过)把上面这些旧页面的功能重新实现一遍。

    以后有其他零碎的页面需求时,也想一并用上面的脚手架 /框架完成。

    在服务端层面,考虑用 URL 重写或者重定向的方式,把指向旧页面的请求引导至新页面。

    在重写或重定向 URL 时,目前想到的 URL 格式规范有两种方案:

    1. URL 中带上页面的功能信息,比如呈现单个视频的,URL 格式为 www.abc.com/content/video/${id},呈现一批视频的,格式为 /videos/${id}
    2. URL 中只有所需呈现资源的 id ,URL 格式为 www.abc.com/content/${id}

    综合以上这些需求,有下面几点问题:

    1. 选用什么脚手架 /框架合适?
    2. 考虑到可能要用到的框架(如 Nuxt.js )的话,上面哪种 URL 格式会更好一些?
    3. 如果用 Nuxt.js 这样的框架,在没有 SEO 需求的前提下,是否有必要启用服务端渲染 SSR ?
    4. 还有哪些其他需要注意的问题?

    谢谢先~

    4 条回复    2023-01-31 15:30:20 +08:00
    Aoang
        1
    Aoang  
       2023-01-31 13:26:03 +08:00 via iPhone
    没有 SEO 的需求,是否用 SSR 取决于服务器配置。

    如果用 SSR ,最终是有可能因为 SSR 出现服务器性能问题的。

    不过你这都是视频之类的,内容单一,SSR 也没啥用啊
    heishu
        2
    heishu  
       2023-01-31 13:41:20 +08:00
    没有 ssr 需求的话,你虽然使用 nuxt 但是大概率还是会写成 csr ,所以还是直接 vue 干起走就完了,不需要 nuxt 。
    url 格式其实没啥差别,不过推荐 /video/id 这种的,至少结构上清晰一点。
    jamosLi
        3
    jamosLi  
       2023-01-31 13:50:49 +08:00
    盲猜是个官网之类的。可以用 nuxt ,其他的照着原来的样子干就行了。至于物理不物理路径,那就直接看 nginx 配置,都可以改,穿新鞋走老路,那重构图了个啥。
    iidear2015
        4
    iidear2015  
       2023-01-31 15:30:20 +08:00
    不建议 SSR ,会提高运维成本。

    看需求,只需要维护几个模板,构建的时候生成静态页面。

    没用过 nuxt ,看文档 理论上可以用 nuxt SSG
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2852 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 93ms · UTC 00:03 · PVG 08:03 · LAX 16:03 · JFK 19:03
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.