examples or proper ways to convert useState + useEffect to RSC + Next.js 13?

[dapjeongneo]

Summary

I am struggling to figure out how to convert the normal way we do useState and useEffect to RSC and Next.js 13-ism. For example, if I have a page (server component) and has a dropdown menu (client component), how can I possibly leverage RSC to use the selected option from the dropdown menu to do a database query.

Before RSC, MyPage is a client component and there's a <Dropdown /> inside and all I do was

// MyPage.tsx
const [selectedValue, setSelectedValue] = useState(null)
const [ans, setAns] = useState([])

useEffect(() => {
  if (selectedValue) {
    // query db here!
    axios
      .get("/api/get", {
        params: {
          value: selectedValue,
        },
      })
      .then((res) => {
        setAns(res.data)
      })
  }
}, [selectedValue])

return <><Dropdown /> ... </>

Ideally, in the RSC world, I would imagine moving the <Dropdown /> to somewhere else and add use 'client' to the top of it, call <Dropdown /> in page.tsx server component and then query the database from page.tsx. This doesn't work because the useState would need to live in page.tsx because I need the <Dropdown /> client component to modify this value before I pass the value to the database to get the results.

How should I be solving this or is there an example of how this is solved?

Also, I do not understand why i cannot call the GET() in the route.ts in subdir of the parent folder that holds this page.tsx.

(item)/item
|-get/
|--route.ts # GET() here!
|-page.tsx

Thank you in advance.

Additional information

No response

Example

No response

[icyJoseph]

Interactivity and RSC are part of the rough edges.

It would seem that this is one of the cases, where you have to escape-hatch from RSC into 'use client', because the user selected dropdown value has to be used to fetch data.

Image if you could have a client component that just renders the dropdown and keeps track of the selected value, and that you could pass the selected value as props onto a server component. This is an interesting challenge, because you cannot have direct RSC children to a client component, rather you have to use composition, https://beta.nextjs.org/docs/rendering/server-and-client-components#importing-server-components-into-client-components.

Technically, either, you or the framework, would need to send a request with the props to the server, so that the RSC could use it..., not very straightforward

So, I think, you have to keep the useEffect+useState in this case. The proposed solution here is the use hook, which is still pretty much experimental.

Alternatively, you could add the selected value to the URL as a search param /my-page?value=selectedValue kind of thing, and use that from within an RSC.

Alternatively, you could use the current mutation strategy, which uses router.refresh() function as well. Though this one is more oriented to a case where you mutate server data, and would like to regenerate the page, with the newly mutate data.

Here's a small example:

import { Counter } from "@/components/Counter";
import { DropDown } from "@/components/Dropdown";

// This part is important!
export const dynamic = "force-dynamic";

const fetchPokemon = async (poke: string) => {
  if (!poke) return null;

  try {
    const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${poke}`);

    if (!response.ok) return null;

    const data = await response.json();

    return data;
  } catch (reason) {
    return null;
  }
};

export default async function Foo({
  searchParams,
}: {
  searchParams?: { [key: string]: string | string[] | undefined };
}) {
  const selectedSearch = searchParams?.selected ?? "";
  const selected = Array.isArray(selectedSearch)
    ? selectedSearch[0]
    : selectedSearch;

  const pokemon = await fetchPokemon(selected);

  return (
    <>
      <Counter />

      <DropDown selected={selected || ""} />

      {pokemon ? (
        <section>
          {pokemon.name} - {pokemon.id}
        </section>
      ) : (
        <p>Select a pokemon</p>
      )}
    </>
  );
}

And then the dropdown:

"use client";

import type { ChangeEvent } from "react";
import { usePathname, useRouter, useSearchParams } from "next/navigation";

const options = ["mew", "mewtwo", "pikachu"];

export const DropDown = ({ selected }: { selected: string }) => {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();

  const onSelect = (event: ChangeEvent<HTMLSelectElement>) => {
    const current = new URLSearchParams(searchParams);

    const value = event.target.value.trim();

    if (!value) {
      current.delete("selected");
    } else {
      current.set("selected", event.target.value);
    }

    const search = current.toString();
    const query = search ? `?${search}` : "";

    router.push(`${pathname}${query}`);
  };

  return (
    <select value={selected} onChange={onSelect}>
      <option value="">None</option>
      {options.map((opt) => (
        <option key={opt} value={opt}>
          {opt}
        </option>
      ))}
    </select>
  );
};

And the counter:

"use client";

import { useState } from "react";

export const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count}</p>

      <button onClick={() => setCount((x) => x + 1)}>{count} + 1</button>
    </div>
  );
};

And it works like this (production mode):

Screen.Recording.2023-03-17.at.08.46.35.mov

---

I do not understand why i cannot call the GET() in the route.ts in subdir of the parent folder that holds this page.tsx.

You cannot call it directly as GET() because it expects a network request, and you cannot call it as fetch("/my-pages/item/get") because the server is not running, that is, open to requests, during build time... If you page was generated on-demand, then you'd need to provide an absolute URL, which means your request will do an additional jump...

Just call the data you need from the RSC! These routes are meant to be outward facing APIs to server data for your client, and other consumers of non-pages data, like robots, sitemaps, etc.

[H-R-Wells2]

Just wanted to say a huge thanks for that comment you shared. It was like you read my mind! You saved me a ton of time and frustration. Much appreciated! 🙏😄

[prkagrawal]

This should be in the docs

[enzzzooo]

i'm having a similar issue of having to pass the search Parameters prop down to access a user selected value (client) in a server component and fetch additional data based on that. Made I should just mark the server component as client.

[NicolasGorga]

So is it only possible to pass data from a client component, like a dropdown or checkbox, to a server component, constructing search params and pushing to the router, while handling the params in the server to re issue the network request?

[lukeac123]

You can pass down data from a client component to server action, and store the data in a cookie. You can then read the cookie data in the server component. Note: you need to revalidate the path to prompt a reload of the server component.

[offwork]

Separating server and client components is pure crap!! Go with NodeJs if you can! Stop the Fullsatck lie, we're wasting our time...

[hk86]

Any new approaches to this?

Alternatively, you could add the selected value to the URL as a search param /my-page?value=selectedValue kind of thing, and use that from within an RSC.

This will make the full page dynamic. I would like to use SSG for pages without a search para and in case of search params to fall back to SSR. Is that somehow possible?

[enzzzooo]

Yeah fully dynamic right, that is a big downside

[apiel]

So I don't know if it is a bug but I managed to load a RSC in a client component using suspense after changing a state.

This is the client components, that is loading a server component passing the value from the state as props:

"use client";

import { Suspense, useState } from "react";
import { ServerComp2 } from "./ServerComp2";

export const ClientComp = () => {
  const [value, setValue] = useState("demo");

  return (
    <div>
      <input
        type="text"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
      <Suspense fallback={<div>Loading...</div>}>
        <ServerComp2 value={value} />
      </Suspense>
    </div>
  );
};

This is the server component, receiving the new state (note the use server on top):

"use server";

import { readFile } from "fs/promises";

export const ServerComp2 = async ({ value }: { value: string }) => {
  // read tsconfig content
  const tsconfig = await readFile("tsconfig.json", "utf8");

  console.log("My server component", { tsconfig });
  // Do some slow magic
  await new Promise((resolve) => setTimeout(resolve, 500));
  console.log("My server component timer done");

  return (
    <div>
      My server component2 with val: {value} <code>{tsconfig}</code>
    </div>
  );
};

Having use server on top of the function, oblige the component to render on the server. Usually this is used for server action and we could say that anyway a server component is a server action. What is more surprising is that combined with Suspense the RSC component can load in the child.

Find full example here https://github.com/apiel/demo-rsc

I think one problem of this solution is that server action doesn't have cache mechanism, therefor the component will have to be loaded on every state change, even if it was already loaded previously.

I couldn't find any official doc about this, so I would not rely on this solution :-/ however it is working :p

---

To avoid to the error: Server Functions cannot be called during initial render... we can use hook effect:

export const ClientComp = () => {
  const [value, setValue] = useState<string | undefined>(undefined);

  useEffect(() => {
    setValue("demo");
  }, []);

  return (
    <div>
      <input
        type="text"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
      {value !== undefined && (
        <Suspense fallback={<div>Loading...</div>}>
          <ServerComp2 value={value} />
        </Suspense>
      )}
    </div>
  );
};

[qinsong77]

It's true, it works. But it you change the ServerComp2 to another more complex one, eg, request some data, it will show error to say: rcc can't import rsc.