Decisions, Decisions which Route(r) Should I Take?
Tags: webdev, react, nextjs, beginners
Published: 2023-05-01 09:28:22

There are so many frameworks for most languages especially Javascript and React. Which one do you use? In this case specifically, I will be talking about **React Routers** and **Next.js Routers**!
<hr>
## What Are They?
**Routes In React:** Routers in their most simple sense help to manage your site's URL's (URL = Uniform Resource Locator - web address). When a user clicks on a link, they are directed to the correct page of your web app. 

**React Routers:** [A Good Place To Start React Router Website](https://reactrouter.com/en/main/start/concepts) React Router helps to make specific components of your app connect to each other via links. These routes can have parameters placed on them and be nested. The potential for single page sites when implementing routes can have complex functionality. React Router can do both client side and server side routing. In client side routing, the routing happens in the browser whereas server side, the server is responsible for rendering the components. 

**Next.js Router:** [Documentation](https://nextjs.org/docs/api-reference/next/router) Next.js can also handle both forms of routing. It has all of the same functionality of React Router, so what is the difference and why would you use one over the other?
<hr>
**Key Differences**


| Next.js Router                                              | React Router                                                        |
|-------------------------------------------------------------|---------------------------------------------------------------------|
| Framework for building server-rendered React Apps           | Standalone library                                                  |
| Has a routing system built in                               | Has set of components and APIs that help with navigations           |
| Use them to define how the App should handle different URLs | Client-side routing is prioritized and there is more setup involved |



Both types of routers can be used for your application. Choosing one or the other depends on your specific need and your understanding of web development. If you need an entire package of "out-of-the-box" features, then go with Next.js. If you want to have very specific ways of routing, then use React Router.

A few idea generators that may help you figure out if you want client side or server side routing are displayed in the following list:
- ["How to Build a Website with React, React Router & Styled-Components Pt.2"](https://blog.alexdevero.com/build-website-react-pt2/)
- ["Create Your Portfolio Using Next.js, Tailwind CSS, Stripe, and PayPal
"](https://betterprogramming.pub/create-your-portfolio-using-next-js-tailwind-css-stripe-and-paypal-80c723bb3fef)
- ["20 Best Next.js Portfolio Templates
"](https://reactjsexample.com/20-best-nextjs-portfolio-templates/) 
- [Stackoverflow Answer "When to use "client-side routing" or "server-side routing"?"](https://stackoverflow.com/questions/23975199/when-to-use-client-side-routing-or-server-side-routing)
<hr>

Server side is better for content-heavy websites where the content does not change frequently. It provides better SEO and faster initial page loading times. 

Client side is better for interactive applications where content is dynamically loaded and user interactions are frequent. This approach allows for faster page rendering and a smoother user experience.
<hr>


[This Documentation is amazing](https://info340.github.io/client-side-routing.html)

[This framework is cool](https://www.solidjs.com/)

One example of a project that uses client side routing is a single-page application (SPA) built with React. Here, we do not need to constantly go back and forth to render data.

It is interesting though, currently many apps can implement both types of routing so truly choose one or the other is up to you!
<hr>

I hope this helped define each tool and that you may feel inclined try both!