Hugo 与 React？

Question

将 Hugo 之类的东西与 React 结合使用是否可能/理想？

我知道盖茨比，但雨果也能工作吗？

我对将两者结合起来的知识有限，但我的理解是：

• Hugo 将用于您所有的模板和静态网页，并且，
• React 将用于 Web 应用程序类型的事物，并且那里有一个无头 CMS？

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

Answer 1

是的，
gatsby 中有组件网页设计，
还有hugo的光速，

我也在这两者之间犹豫不决。

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

1. 使用 gatsby 构建页面。您应该独立构建网站的每个页面（不要依赖路由）
2. 使用带有hugo模板的

   index.html

   文件。
3. 完成

这是构建 gatsby 页面后文件夹

public

（输出）的图片：

更新：

您可以信赖路由。在上图中，每个组件文件夹都有自己的

index.html

，因此您也可以使用它们。

2021 年更新：

使用Next.JS。有了

Incremental Static Regeneration

功能，你甚至不用碰Hugo就可以实现你想要的。

Answer 2

将 Hugo 之类的东西与 React 结合使用是否可能/理想？我知道 盖茨比，但雨果也能工作。

我们在 https://www.electrade.app 使用 Hugo 和 React (create-react-app)。所有页面均服务于 Hugo 静态页面，但如果您导航到 /quote，React SPA 会加载，并且您将进入动态页面。所以，是的，Hugo 也可以，但你将拥有 2 种语言和 2 种语法。

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

完全正确。

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

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