Javascript 处理类似结构的web内容有哪些有效方法？

我最近开始在一个网站上做兼职。由于我还不完全确定应该使用什么方法来处理/显示内容，我花了两天时间试图找到最好的方法，不幸的是，我没有发现任何有用的方法——很可能是因为我不知道要搜索的正确术语

基本上，该网站将使用一个菜单系统（与我的问题无关）将用户导航到不同的类别，让他们选择一段内容。然后，站点将显示该页面

下面是我要构建的内容显示系统的模型：

每一篇“文章”都会这样显示（在一些特殊的文章中进行了一些修改）：它们有一个简单的背景图像、一个标题、几段信息、一个或两个到外部来源的链接，以及一个有时可以与之交互的图像（例如，单击它播放声音）。用户无法修改这些内容（将来也不可能）——编辑内容的唯一方法（当前）是编辑数据库中的字符串或编辑存储在服务器上的图像/声音

我最大的问题是我没有足够的经验来决定最好的方法。目前我使用了很多JavaScript，甚至可能太多。当用户单击某个类别时，将运行一段代码，该代码基于数据库生成一个子菜单（因为在按下按钮之前它不存在）。此子菜单中充满链接到不同“文章”的按钮，并使用相同的方法：按下按钮时，它们生成并显示内容

我知道这是一个糟糕的做法——在我的研究中，我读到我不应该从JS构建整个网站，但我在以前的项目中使用了相同的方法，我必须制作一个系统，让用户以快速和用户友好的方式查看和修改大量的DB条目。正因为如此，我开始使用相同的实践来设计菜单系统的原型。但我计划创建一个更大用户群可以使用的网站，完全有可能我不能用同样的方式来做——比如说，以前的网站不是为残疾人而建的

目前，我有三个管理内容的选项：

• 使用与以前相同的方法：使用一些预先构建的元素，然后仅在必要时生成请求的内容，但每次打开相同的内容时都要这样做。它很重，但是用户只需要下载必要的资源

• 事先创建所有内容，以便站点只显示内容。它确实需要更少的JavaScript，并且可以用纯HTML和CSS构建大部分站点。它的下载量很大

• 将这两种方法结合起来：在用户需要时生成内容，但也存储内容，因此返回到内容时只显示已经存在的“文章”

你能给我一些关于最佳实践的建议吗