This post we will look deeper into server-side state management and we will be using nuqs which makes this process much easier.
Table of contents
Open Table of contents
Benefits of server-side state
SEO
One big benefit of server-side state is SEO as everything will be rendered on the server - search engines like Google will be able to index the content much easily.
Speed
Another benefit is Faster initial page load - this will improve the user experience for users as the content will be loaded at a much faster rate - this also helps with SEO as if everything is fast and smooth then search engines will rank the application higher.
Save & sharable
Save & shareable - instead of relying on client-side state - we can take advantage of saving / sharing the specific URL which will take you to the exact location.
Nuqs
The package nuqs allows developers to use state management on the server by syncing query parameters between the server and the client. This allows Next.js to handle state of the server and then hydrate it on the client which ensures better SEO, performance and shareability.
Implementation
Firstly we need to wrap the NuqsAdapter around our App / Layout which ensures Nuqs integrates with Next.js URL state with server components and client components.
// /layout.ts
import { Onest } from "next/font/google";
import "../globals.css";
import { NuqsAdapter } from "nuqs/adapters/next/app";
const onest = Onest({ subsets: ["latin"], weight: "500" });
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html className={onest.className} lang="en">
<body>
<main className="flex min-h-screen bg-gray-100 dark:bg-kindaBlack text-black">
<NuqsAdapter>{children}</NuqsAdapter>
</main>
</body>
</html>
);
}
// /test/page.tsx
import { useQueryState } from "nuqs";
const [queryParams, setQueryParams] = useQueryState("name", {
defaultValue: "",
shallow: false,
});
const searchName = (name: string) => {
setQueryParams((prev) => ({ ...prev, name: name }));
};
<input type="text" onChange={(e) => searchName(e.target.value)} name="name" value="name" />
Once this is implemented everytime the user types in the input field it will update
Benefits
The benefits of using nuqs is the fact we can change the URL params on the server-side without relying on using the useRouter hook to render the page. As the user types in a field it will update in real-time the URL and filter on the server. You can also use the useTransition hook to show the user that the information is loading. Another useful feature would be the useDebounce hook which will put a delay on input key pressdowns - this will save on the server costs and give a better user experience.
Without nuqs developers would need to use a caching server library such as React-Query to display new server data, one way of doing this would be to pass the data as a prop to the query and using the initialData option and then let React-Query take over the data in the client.
Another benefit is the fact you can easily paginate and sort the data, as the URL will look something similar to this:
https://example.com/products?page=3&sort=price_asc
Conclusion
The package nuqs is very useful when it comes to server-side state, as it gives great user experience by rendering the page after every key stroke without having to use the useRouter hook - this has an immediate effect on the URL and can allow a seamless experience.
It also cuts down on the possible bundle size of a project as unless the developer needs React-Query for a niche feature then it won’t be needed.