Why params over state?

In Next.js, understanding the differences between params, queries, and states turns out to be pretty important as they are essential concepts for managing data and state within our beautiful applications. So I've studied them and here is a simple breakdown:

Params:

Params refer to dynamic segments of the URL that look something like this:

1/somepage/[slug]/*

We could define dynamic routes by including parameters inside square brackets [] in the page folder name.

Pros:

Params are great when we want to fetch some data for specific resources based on their identifier. For instance, if we have a page for blog posts, with

1**/posts/[post-identifier]

Here, based on post-identifier value, data of the post can be dynamically fetched. Nice :) With this, clients can also bookmark pages with specific data fetched making it easier to store and share them.

One of the huge wins with such method is that each page with specific data, because the url is special for every one of them, SSG (static-site generation) and SSR (server-side rendering) are available which boosts SEO and even performance. Nice :))

There are downside however, for applications at larger scales, it could get complicated exponentially. :( We are also locked with the specific identifier in the url, so no real props or arguments can be passed. :((

Queries:

Queries were the first type of passing around arguments between pages when I first learned server-side scripting with PHP. It really opened a whole new world of web development. Queries allow us to pass data to other pages as part of the URL query string. Here is the basic format:

1/somePage?someVariable=someValue&someOtherVariable=someOtherValue

Here, someVariable and someValue are key-value paired, so are someOtherVariable and someOtherValue.

First of all, like params, clients can bookmark and share pages with specific data rendered with specific arguments. In addition, the flexibility in passing infinite number of parameters to a page is insane. This really opens up a lot. For instance, they can be used for filtering, sorting, and many other things. Nice :)

This makes the page client-side, meaning the site is generated on the client side which could be great in some cases, but this also could be a down-side as client-side rendering makes the performance to rely on the clients' device performance. :|

One other down-side is that data may be visible in the URL unless , which can be a security concern if sensitive information is passed. This way, React library does offer props which may be the better option in some cases. URL length is also limited in browsers making it harder to deal with variables in complicated applications. :(

State

Lastly, I want to talk about state. It refers to the some condition at the moment of a component or application. In Next.js, state management can be handled using React state which is the easiest option to work with. There are other methods to deal with states such as Redux, but that is not in the scope of this blog, but if you are not familiar, I highly recommend you to look it up.

Here is not React state is declared:

1import { useState } from "react"; 
2
3const [example, setExample] = useState<>("initial value");

Here, a state called example is declared and can be modified with setExample() function. This lets us dynamically change things up in our application.

This makes managing complex application states a lot easier than other methods and it also lets us maintain some data between the whole application with specific state management system. Nice :)

Down-sides are that it setting up in the first place may be complex compared to params and queries leading to increased complexity, especially in large-scale applications. :(

Conclusion

So when should we use what? Params are best suited for fetching specific data based on dynamic segments in the URL, such as fetching a post with specific data. Queries are more flexible and can be used for passing various parameters to a page, great when we want some specific actions based on data requirements. State is ideal for managing complex application state and maintaining data across the application.