雨果与反应？

Question

在 React 中使用像 Hugo 这样的东西是否可能/理想？我知道盖茨比，但雨果也能工作。我对将两者结合起来的知识有限，但我的理解是 Hugo 将用于您所有的模板和静态网页，然后 React 将用于 Web 应用程序类型的事物，并在其中某处使用无头 CMS？有经验的人可以评论为什么 Hugo 或 Gatsby 有时适合与 React 一起使用吗？或者框架之间关系的概述？

Answer 1

是的，
盖茨比中有组件网页设计，还有雨果
的光速，

我也被困在这些之间的决定中。

我不知道我会做什么，但我的想法是这样的：

1. 使用 gatsby 构建页面。您应该自己构建网站的每个页面（不要依赖路由）
2. 使用index.html带有 Hugo 模板的文件。
3. 完毕

这是public构建 gatsby 页面后文件夹（输出）的图片：

更新：

您可以依靠路由。在上图中，每个组件文件夹都有index.html自己的文件夹，因此您也可以使用它们。

2021 年更新：

使用Next.JS。借助Incremental Static Regeneration功能，您甚至可以在不接触 Hugo 的情况下实现您想要的。

Answer 2

在 React 中使用像 Hugo 这样的东西是否可能/理想？我知道盖茨比，但雨果也能工作。

我们在https://www.electrade.app 上使用了 Hugo 和 React (create-react-app) 。所有页面都用于 Hugo 静态页面，但是如果您导航到 /quote，react SPA 会加载并且您处于动态状态。所以是的，Hugo 也能用，但你会有 2 种语言和 2 种语法。

将两者结合起来 [...] 我的理解是 Hugo 将用于所有模板和静态网页，然后 React 将用于 Web 应用程序类型的事物

确切地。

有经验的人可以评论为什么 Hugo 或 Gatsby 有时适合与 React 一起使用吗？或者框架之间关系的概述？

• Hugo 是用 Go 编写的，并构建了普通的静态 HTML。例子：一个博客，但你只需要写一次页眉和页脚。
• React 是用 Javascript 编写的，是一个用于构建动态接口的前端库。React 站点通常会为您提供一个空的 index.html 文件和一个 Javascript 文件，然后这些文件将在您的浏览器中运行并用内容动态填充 index.html 文件。示例：每次加载时都不同的 Facebook Newsfeed。
• 但是如果你想写上面的示例博客，也只写页眉和页脚一次，但习惯了 React 语法怎么办？如果您使用普通的 React，您的博客将下载一个空的 index.html 文件并用您的 Javascript 博客填充它。这对 SEO 和加载时间等不利。如果您仍然希望将其编译为普通的静态 HTML – 这就是 Gatsby 的用途。