What's the different between react-router and Next.js What's the different between react-router and Next.js reactjs reactjs

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


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. 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.

In short, if SSR is a core requirement definitely consider using a SSR React framework.


Jed's response sums it up pretty much, but here are some clarifications:

  • React router allows SSR, but does not implement it. 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.

  • SSR comes with a few caveats that NextJS also covers, mainly initial asynchronous functions (fetchs from APIs, for example). 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

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. 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