如何（过度）设计一个简单的静态网站

就在一年多前，我被委托为一个研发小组开发一个新网站。他们的旧网站是基于 jQuery 模板构建的，通常很难维护。在此之前，我已经构建了大约一年的用户界面，我认为我有能力设计一个更好的网站……但我错了！

我之前从事的项目都使用了 React.js，有些项目使用了 Next.js，有些项目没有使用。正如人们所说，“如果你手里只有一把锤子，那么所有东西看起来都像钉子。”所以我选择了这些技术来构建一个简单的静态网站。

事后看来，从一开始，这显然不会有好结果。实际上，如果你想要构建具有数据驱动内容的高度交互、动态用户界面，React.js 非常棒。Next.js 是一个很好的配套框架，它提供服务器端渲染、路由并帮助优化性能（以及许多其他功能）。但是，我建立的网站是静态的，这意味着它不会从大多数这些功能中受益。当然，它可以用 React.js 和 Next.js 构建——而且确实如此——但代价是什么呢？

上述工具相当复杂。要用它们构建网站，你需要了解它们的来龙去脉。你不能只编写标记和样式就完事了，因为它们需要在 React 的功能组件和钩子范式中编写，遵循基于组件的架构并通过 props 和上下文处理数据流……也就是说，你将编写更多行代码。

当然，这本身并不是一个问题。仅使用标记和样式可能无法满足您的项目要求，并且您可能会浪费时间重新发明轮子来编写自己的 JavaScript 代码，而不是使用现成的解决方案。但如果可以在不增加这种复杂性的情况下满足要求，那么这样做是明智的。否则，您将过度设计，最终得到一个比应有的更难（和更昂贵）维护的项目。

这就是我们网站改头换面的过程。旧网站因为难以维护而不得不被替换。由于一名才华横溢但知识有限的年轻软件工程师，新网站现在处于同样的境地——实际上，情况更糟🤫——。我想我们现在需要一个新的网站！我计划抛弃当前的代码库，用 HTML 和 CSS 之外尽可能少的东西重建它。也许我会考虑一个静态网站生成器。