不要只用 React 来构建你的作品集

为什么你应该使用 React

为什么你不应该只使用 React

SSR 和静态站点生成来救援

Gatsby 还是 Next？

TL;DR - 使用 React 与Gatsby或Next构建静态公共网站。

React 最近风靡一时，在我看来，用 React 开发网站感觉轻松多了。当然，你也可以使用其他框架，但这篇文章的讨论范围仅限于 React 爱好者。

为什么你应该使用 React

• 基于组件
• 使用create-react-app预先配置（大部分）启动器
• 更快的开发
• React 太棒了🎉

为什么你不应该只使用 React

• DOM 在浏览器（客户端）中构建
• SEO影响
• 更高的交互时间 (TTI)

让我们进一步了解一下为什么会发生这些事情。

调用此行后，React 将站点加载到 DOM 中。

ReactDOM.render(<App />, document.getElementById('root'));

这意味着，只有在bundle.js加载和执行之后，网站的整个 DOM、样式和行为才会被初始化。

如果您在浏览器设置中关闭 JavaScript 并打开 React 站点，则不会加载任何内容，您只会看到一个空白页面。

不幸的是，这就是搜索引擎在索引过程中对你网站的理解。所以，如果你只用 React 创建网站，那么只有页面标题会被索引，React 代码中的其他内容都不会被索引。

补充：Google 在索引过程中会有限度地执行 JavaScript，这意味着如果首次渲染时没有内容，或者渲染耗时超过 N 秒，它会跳过这些内容。此外，DuckDuckGo 近年来已成为许多人的首选搜索引擎，并且一年多来一直是我唯一的搜索引擎。而且 DuckDuckGo 在索引过程中不会执行 JavaScript。因此，依赖搜索引擎执行 JavaScript 并非稳妥之举。

除了 SEO 方面的影响外，在网站首次加载（绘制）时不加载 DOM 元素还会提升 TTI 指标。如果能在首次加载时，在加载脚本之前加载 DOM 元素，用户体验将得到显著提升。

SSR 和静态站点生成来救援

SSR 网站和静态网站是两码事。SSR 页面在每次请求时由服务器渲染，而静态页面则是在构建时生成的。

如果您使用Gatsby或Next等框架，您可以生成静态站点或创建 SSR 页面。

换句话说，如果您关闭 JavaScript 并加载这些网站，则整个 DOM 将被加载，因为页面已经呈现。

理想情况下，只有事件处理程序和补充数据应该在第一次渲染后加载和附加。

Gatsby 还是 Next？

• 如果您正在构建一个静态公共网站，Gatsby 将是正确的工具。
• 如果您正在构建一个具有登录功能和大量服务器端逻辑的网站，那么 Next 将是正确的工具。

当然，还有很多其他选项和理由来帮助您选择合适的工具，但就我个人而言，这两个就足以满足大多数初步要求。

其他争论点

• 你可以使用 React 创建 SSR 页面，但需要手动设置服务器及其他一切。Next.js 让整个过程更加轻松。
• Google 声称最近在索引时会执行 JavaScript，但我尝试了一下，却没有成功。我们不确定其中的细微差别。

盖茨比是❤️

另外，我完全被盖茨比迷住了，并且深爱着他❤️

正是出于本文讨论的原因，我将旧作品集从 React 迁移到了 Gatsby。这是我在 Gatsby 中新建的作品集 - Dinesh Pandiyan。

展望未来，我计划今年用 Gatsby 构建我的所有业余项目。我创建了一个 Gatsby 入门样板，并在默认的 Gatsby 入门样板（Gatsby Boilerplate）上添加了配置。

目前为止我的基于 Gatsby 的网站

• 迪内什·潘迪扬
• tweetfancy.io
• 又一个处于WIP阶段的宠物项目。我大概会在一个月内发布它。

你太棒了！✨