React 使用服务器端渲染还是客户端渲染？

Posted 2023-02-22

【中文标题】React 使用服务器端渲染还是客户端渲染？

【英文标题】：Does React use server-side-rendering or client-side-rendering?

【发布时间】：2019-08-07 14:19:45

【问题描述】：

在一篇文章中我读到了

React 使用服务器端渲染。

但在其他文章中我遇到了这个：

客户端渲染是一种相对较新的渲染方法 网站，直到 javascript 才真正流行起来 图书馆开始将其纳入他们的开发风格。 一些值得注意的例子是 Vue.js 和 React.js

现在哪个说法是正确的？

当我使用 create-react-app 并运行 npm start 时，在我看来 React 使用了客户端渲染。不是吗？

【问题讨论】：

是的，CRA 使用客户端渲染是对的。 React 也可以是服务器渲染的。例如。 Razzle 使用服务器端渲染和客户端渲染。

从未经验证的来源发表声明甚至不链接它们是没有意义的。您显然断章取义。 - 两者都有。

@estus 没有人会故意歪曲任何事情。这是一个合理的问题。

@Marquizzo 我没有指责任何人。然而，这个问题可以以更具建设性的方式提出。在这种形式下，它很容易引起猜测。我很肯定一篇文章并没有真正说明 React 仅使用服务器端渲染。

这能回答你的问题吗？ ReactJS server-side rendering vs client-side rendering

【参考方案1】：

这是客户端。但是 React 和其他一些客户端库一样，可以在服务器上使用节点预渲染它，通常用于 SEO。

【讨论】：

谢谢。但是在像 Heroku 或 Netlify 这样的服务器上会发生什么？他们是否使用节点服务器或类似技术在服务器上呈现 React 应用程序？

@user1941537 你可以在 Heroku 上设置一个服务器渲染的 React 应用程序，它会像你说的那样在 Node.js 中运行。 Netlify 更适合静态资产，因此您要么只提供客户端渲染的 SPA，要么提供预渲染的应用程序，例如Gatsby.

【参考方案2】：

它在客户端呈现开箱即用。

但是，如果您需要在服务器上呈现页面，您可以通过以下方式实现：

Next.js 或 Hypernova 或任何其他工具（现在有一堆！）

请注意，s-s-r 需要比常规 React 应用更多的经验。

这种方法的主要目标是允许搜索引擎机器人从网页中抓取信息（SEO）。

【参考方案3】：

create-react-app 默认使用客户端渲染。有一些像 next js 和 gatsby js 这样的工具可以在服务器端预渲染页面。您也可以从头开始进行服务器端渲染。

【参考方案4】：

距上一个答案几年后，现在很难实现一个仅限客户端的 React 应用程序——在 Node 上提供它是微不足道的，而且绝对是它所期望的，试图将它用作与其他服务器一起的客户端库——侧面支持更具挑战性，关于如何做到这一点的文档不完整，而且大部分已经过时。