适用于 Medium 等网站的 ReactJS - 服务器端渲染
ReactJS for Websites like Medium - Server-Side Rendering
我正在尝试实施一个类似于 Medium.com 的简单项目。我的项目是用 ReactJS 构建的。我的问题是元标记和 SEO。我知道在客户端修改元标记（例如使用 react-helmet）是不可取的，因为网络爬虫还没有考虑到这一点。
我现在正在探索 Gatsby 和 Next.js。我知道我有两个选择：
- 构建时预渲染
- 在每次请求时呈现
对于类似于 Medium 的网站，我认为每次创建新的 post 或更改 post 只是为了显示向观众展示静态内容。比如说，我已经有数百万个博客 post，构建它需要一段时间，而且我无法在每次有人创建 post.
时构建应用程序
如果我在每个请求上渲染一个 post，如果一个 post 非常受欢迎并且有数百万人观看并且这个 post 只被修改一次，那也不值得。
有什么我想念的吗？我目前更倾向于根据每个请求进行渲染。
编辑：
我现在计划在每个请求上并行使用缓存和渲染。
编辑 2：
我被禁止回答问题。所以我会在这里添加我的答案：
..下面的答案..
我对 Next.js 做了更多的研究。显然，Next.js' 具有fallback 的特性，用于静态生成页面。这将解决我在任何时间点添加更多页面的问题。有关详细信息，请参阅此 link。根据文档，它指出：
- 从 getStaticPaths 返回的路径将在构建时呈现为 HTML。
- 构建时未生成的路径不会产生 404 页面。相反，Next.js 将在首次请求此类路径时提供页面的“后备”版本（有关详细信息，请参阅下面的“后备页面”）。
- 在后台，Next.js会静态生成请求的路径HTML和JSON。这包括 运行 getStaticProps。
- 完成后，浏览器会收到生成路径的 JSON。这将用于自动呈现具有所需道具的页面。从用户的角度来看，页面将从后备页面切换到完整页面。
- 同时，Next.js将此路径添加到预渲染页面列表中。对同一路径的后续请求将为生成的页面提供服务，就像在构建时预呈现的其他页面一样。
此外，我了解到 Next.JS 引入了一项名为 Incremental Static Regeneration 的新功能。因此，每当我们使页面无效时，它会在更新页面时继续提供旧页面。这样，如果某个页面上有更新，我就不必构建整个应用程序。它只会重建页面。截至 post，它仍处于测试阶段。详情可见here.
创建站点地图并定期更新（例如：一天一次）是使站点内容搜索引擎友好的最简单方法之一。
需要使用服务器端脚本创建和更新站点地图。
'sitemap-generator' 是 npm 上的一个很好的实用程序，用于生成站点地图。
可以使用以下方式安装：
$ npm install -g sitemap-generator
更多信息：
- React Helmet 也可以在服务器端使用，不需要任何框架。
您可能需要使用
Helmet.renderStatic() after ReactDOMServer.renderToString or
ReactDOMServer.renderToStaticMarkup to get the head data for use in
your prerender.
- 您可以维护 HTML 的缓存（避免为每个请求构建页面，至少对于重要文章），使用服务器端呈现构建一次。如果文章有任何更改，请清除缓存。
- 您可以使用 API 对文章进行更改，对更改文章的后续请求将反映更改（考虑到您网站的动态性质）。
其他答案是在解决您关于元数据的问题，但我觉得您的问题主要是“预呈现和提供静态 HTML（Jamstack 方法）或更确切地说是在每个请求上动态呈现页面是否有意义？
如果您有一个高度动态的网站，需要经常更新（比如说超过每小时一次），您应该选择动态的服务器端呈现。不过，在预渲染时更容易获得良好的性能，因此如果不经常更新对您有用，那么它是更好的解决方案。
建立一个拥有数千页的网站至少需要几分钟。如果您同意该站点仅每天更新，那很好，然后预渲染是一个很好的方法。如果您期望比这更频繁地更新内容，那不是。
我正在尝试实施一个类似于 Medium.com 的简单项目。我的项目是用 ReactJS 构建的。我的问题是元标记和 SEO。我知道在客户端修改元标记（例如使用 react-helmet）是不可取的，因为网络爬虫还没有考虑到这一点。
我现在正在探索 Gatsby 和 Next.js。我知道我有两个选择：
- 构建时预渲染
- 在每次请求时呈现
对于类似于 Medium 的网站，我认为每次创建新的 post 或更改 post 只是为了显示向观众展示静态内容。比如说，我已经有数百万个博客 post，构建它需要一段时间，而且我无法在每次有人创建 post.
时构建应用程序如果我在每个请求上渲染一个 post，如果一个 post 非常受欢迎并且有数百万人观看并且这个 post 只被修改一次，那也不值得。
有什么我想念的吗？我目前更倾向于根据每个请求进行渲染。
编辑： 我现在计划在每个请求上并行使用缓存和渲染。
编辑 2： 我被禁止回答问题。所以我会在这里添加我的答案：
..下面的答案..
我对 Next.js 做了更多的研究。显然，Next.js' 具有fallback 的特性，用于静态生成页面。这将解决我在任何时间点添加更多页面的问题。有关详细信息，请参阅此 link。根据文档，它指出：
- 从 getStaticPaths 返回的路径将在构建时呈现为 HTML。
- 构建时未生成的路径不会产生 404 页面。相反，Next.js 将在首次请求此类路径时提供页面的“后备”版本（有关详细信息，请参阅下面的“后备页面”）。
- 在后台，Next.js会静态生成请求的路径HTML和JSON。这包括 运行 getStaticProps。
- 完成后，浏览器会收到生成路径的 JSON。这将用于自动呈现具有所需道具的页面。从用户的角度来看，页面将从后备页面切换到完整页面。
- 同时，Next.js将此路径添加到预渲染页面列表中。对同一路径的后续请求将为生成的页面提供服务，就像在构建时预呈现的其他页面一样。
此外，我了解到 Next.JS 引入了一项名为 Incremental Static Regeneration 的新功能。因此，每当我们使页面无效时，它会在更新页面时继续提供旧页面。这样，如果某个页面上有更新，我就不必构建整个应用程序。它只会重建页面。截至 post，它仍处于测试阶段。详情可见here.
创建站点地图并定期更新（例如：一天一次）是使站点内容搜索引擎友好的最简单方法之一。
需要使用服务器端脚本创建和更新站点地图。
'sitemap-generator' 是 npm 上的一个很好的实用程序，用于生成站点地图。
可以使用以下方式安装：
$ npm install -g sitemap-generator
更多信息：
- React Helmet 也可以在服务器端使用，不需要任何框架。 您可能需要使用
Helmet.renderStatic() after ReactDOMServer.renderToString or ReactDOMServer.renderToStaticMarkup to get the head data for use in your prerender.
- 您可以维护 HTML 的缓存（避免为每个请求构建页面，至少对于重要文章），使用服务器端呈现构建一次。如果文章有任何更改，请清除缓存。
- 您可以使用 API 对文章进行更改，对更改文章的后续请求将反映更改（考虑到您网站的动态性质）。
其他答案是在解决您关于元数据的问题，但我觉得您的问题主要是“预呈现和提供静态 HTML（Jamstack 方法）或更确切地说是在每个请求上动态呈现页面是否有意义？
如果您有一个高度动态的网站，需要经常更新（比如说超过每小时一次），您应该选择动态的服务器端呈现。不过，在预渲染时更容易获得良好的性能，因此如果不经常更新对您有用，那么它是更好的解决方案。
建立一个拥有数千页的网站至少需要几分钟。如果您同意该站点仅每天更新，那很好，然后预渲染是一个很好的方法。如果您期望比这更频繁地更新内容，那不是。