简体   繁体   English

react-router和Next.js有什么不同

[英]What's the different between react-router and Next.js

i'm currently expolring ReactJS i saw NextJS and React Router 我正在发布ReactJS,我看到了NextJSReact Router

Can anyone tell me what's the pro cons between the two. 任何人都可以告诉我两者之间的利弊。 I'm not sure if it's right to compare the two, but from what i see, react-router already has SSR feature. 我不确定比较两者是否正确,但从我所看到的,react-router已经具有SSR功能。 So whats the benefit of using NextJS? 那么使用NextJS的好处是什么?

Thanks! 谢谢!

Next.js (see also alternatives like GatsbyJS and After.js) are full featured SSR/static site frameworks, so you get a lot of features out of the box if you need to generate a SSR static site. Next.js(另请参阅GatsbyJS和After.js等替代品)是全功能的SSR /静态站点框架,因此如果您需要生成SSR静态站点,您可以获得许多开箱即用的功能。 These frameworks have solved lots of problems, so adding a feature becomes as simple as reading the docs, rather than researching and coding on your own. 这些框架解决了许多问题,因此添加一个功能就像阅读文档一样简单,而不是自己研究和编码。

If you code your own setup with a standard React app and react-router then you might find yourself running into a lot of complexity and edge cases when you dig into SSR. 如果您使用标准的React应用程序和react-router编写自己的设置,那么当您深入研究SSR时,您可能会发现自己遇到了很多复杂性和边缘情况。

In short, if SSR is a core requirement definitely consider using a SSR React framework. 简而言之,如果SSR是核心要求,一定要考虑使用SSR React框架。

Jed's response sums it up pretty much, but here are some clarifications: 杰德的回答总结了很多,但这里有一些澄清:

  • React router allows SSR, but does not implement it. React路由器允许 SSR,但不实现它。 You still need to make a server script that, at least, renders the app to a string and serve that to the client . 您仍然需要创建一个服务器脚本,至少将应用程序呈现为字符串并将其提供给客户端 You may need to do other things, like serve static files. 您可能需要执行其他操作,例如提供静态文件。 NextJS does that for you. NextJS为您做到了这一点。

  • SSR comes with a few caveats that NextJS also covers, mainly initial asynchronous functions (fetchs from APIs, for example). SSR还附带了一些NextJS所涵盖的警告,主要是初始异步函数(例如,从API获取)。 In a custom made system, you'll have to determine which functions you should call, usually based on the route, and pass the data to the components, usually with Redux 在自定义系统中,您必须确定应调用哪些函数(通常基于路径),并将数据传递给组件, 通常使用Redux

I'm currently working on webs with both systems, and both have some pros and cons.NextJS has a specific way to declare routes and a very different way of moving through them, but making a custom system that deals with everything that NextJS covers is quite the work. 我目前正在研究两种系统的网络,并且都有一些优点和缺点.NextJS有一种特定的方式来声明路由和一种非常不同的方式来移动它们,但是制作一个处理NextJS覆盖的所有内容的自定义系统是相当的工作。 I would not recommend making everything yourself unless it's really needed, and maybe check alternatives like Gatsby if asynchronous loads aren't a concern 除非确实需要,否则我不建议自己制作所有东西,如果异步负载不是问题,可能会检查像Gatsby这样的替代品

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM