Best way to implement search (non API/JSON)?

[nickw1]

Hi @lazarv,

Really like your framework. One question I did have is: what's the best approach to implement search using an React Server Components-centric approach?

What I mean by that is, if you've developed an RSC which takes a search term as a parameter within the route (e.g. /products/milk) and renders the search results on the server, what's the recommended approach to connect that to a search form to allow the user to enter the search term (product name in this case) while minimising the amount of re-rendering?

Obviously one could change window.location but that reloads the whole page. Is the recommended approach to use navigate() with a React transition?

So the react-server equivalent of what's documented in the Next.js docs: https://nextjs.org/learn/dashboard-app/adding-search-and-pagination.

Thanks!

[lazarv]

Hi @nickw1,
Thanks for checking out this framework, and I'm very happy you like it! Also, thanks for raising this topic as it highlights that right now there's no example and/or tutorial to show how to implement a "search and pagination" use case like in the Next.js dashboard app tutorial. Until that's fixed, let me give you some hints on this.

As a React meta-framework based around React Server Components and both Next.js and @lazarv/react-server using the same core elements of React, they are very similar in how they approach using React. I very much liked what React brought to the table with RSCs and server functions, the revitalized way of old-school server-side rendering, sharing similarities with PHP or HTMX. That's how this framework really exists. To combine RSCs and server functions with Vite (and native ES modules) and the first-time experience with Node.js and how easy it was to create an Express.js server.

Because of this, you can mostly follow a Next.js tutorial and with some changes you basically do the same with @lazarv/react-server. This is especially true when you're using the file-system based router solution. So you can follow the Next.js tutorial about search and pagination and the difference will be about routing definitions and accessing the HTTP context on the server-side.

With @lazarv/react-server, you can optimize rendering using the ReactServerComponent wrapper and the simplest way is to use outlets to render the content on the server-side in a similar manner as in the Photos tutorial at https://react-server.dev/tutorials/photos#outlet. Forms inside a ReactServerComponent are only updating its content and the best example for that right now is the remote component example about "RSC Delegation" at https://github.com/lazarv/react-server/tree/main/examples/remote as RemoteComponent is actually using ReactServerComponent under the hood. Imagine parts of your page just as like <frameset>s in the old days with React-driven iframe-like elements, without the pain points of using actual iframes.

If you prefer client-side navigation or want to update the outlet outside of it, then navigate() or replace() is the way to go, specifying the target to update the outlet you want, more about this at https://react-server.dev/router/client-navigation#outlet.

I hope this gives you some direction about the recommended approach. I will fix at least the missing example very soon!

[nickw1]

Hi @lazarv, many thanks for your answer. This gives me a clear idea what to do and I will look forward to the missing example!