react-router 和 Next.js 有啥区别

Posted 2023-02-22

【中文标题】react-router 和 Next.js 有啥区别

【英文标题】：What's the different between react-router and Next.jsreact-router 和 Next.js 有什么区别

【发布时间】：2019-04-29 06:09:01

【问题描述】：

我目前正在探索 ReactJS 我看到了NextJS 和React Router

谁能告诉我两者之间的优缺点是什么。我不确定比较两者是否正确，但据我所知，react-router 已经具有 s-s-r 功能。那么使用 NextJS 有什么好处呢？

谢谢！

【参考方案1】：

Next.js（另请参阅 GatsbyJS 和 After.js 等替代方案）是功能齐全的 s-s-r/静态网站框架，因此如果您需要生成 s-s-r 静态网站，您可以立即使用许多功能。这些框架已经解决了很多问题，所以添加一个特性就像阅读文档一样简单，而不是自己研究和编码。

如果您使用标准 React 应用程序和 react-router 编写自己的设置，那么当您深入研究 s-s-r 时，您可能会发现自己遇到了很多复杂性和边缘情况。

简而言之，如果 s-s-r 是核心需求，请务必考虑使用 s-s-r React 框架。

【参考方案2】：

Jed 的回复总结得差不多，但这里有一些澄清：

React 路由器允许 s-s-r，但没有实现它。您仍然需要制作至少renders the app to a string and serve that to the client 的服务器脚本。您可能需要做其他事情，例如提供静态文件。 NextJS 会为您做到这一点。

s-s-r 带有一些 NextJS 也涵盖的警告，主要是初始异步函数（例如，从 API 获取）。在定制系统中，您必须确定应该调用哪些函数，通常基于路由，并将数据传递给组件，usually with Redux

我目前正在使用这两个系统开发网络，两者都有一些优点和缺点。NextJS 有一种特定的方式来声明路由和一种非常不同的方式来通过它们，但是创建一个自定义系统来处理所有的事情NextJS 涵盖了很多工作。除非真的需要，否则我不建议您自己制作所有东西，如果不考虑异步加载，可能会检查 Gatsby 之类的替代方案

【讨论】：

感谢迭戈。你能解释一下“React Router 没有实现它”是什么意思吗？因为我可以在文档中看到这个 reacttraining.com/react-router/web/guides/server-rendering

React 路由器允许路由器从服务器渲染它们的路由。您仍然需要创建一个服务器脚本，至少将应用程序呈现为字符串并将其提供给客户端。您可能需要做其他事情，例如提供静态文件和一些服务器级别的路由处理（通常是 API 的东西）。另一方面，NextJs 开箱即用。这说明清楚了吗？

不客气。我将在答案中添加解释以更清楚。

只是关于 Gatsby 的一个注释 - 它在构建 s-s-r 时处理加载数据，并在组件安装到浏览器后处理异步。挺好看的，还没看的可以看看对我来说，它在 Next.js 上具有优势，无论是在功能还是文档方面。

@JedRichards 是的，目前正在寻找所有选项，认为 gatsby 还不错