前端页面架构调整

2023-01-31 11:27:20 +08:00
 dream4ever

现状

  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. 还有哪些其他需要注意的问题?

谢谢先~

1590 次点击
所在节点    前端开发
4 条回复
Aoang
2023-01-31 13:26:03 +08:00
没有 SEO 的需求,是否用 SSR 取决于服务器配置。

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

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

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

没用过 nuxt ,看文档 理论上可以用 nuxt SSG

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/911880

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX