Next.js Discord

Discord Forum

SSR and form handling

Answered
African Slender-snouted Crocodil… posted this in #help-forum
Open in Discord
Avatar
African Slender-snouted CrocodileOP
I want to know how to fetch data in the following components
Main Component that would have a "Select template" each selected template would render different forms, then for the forms I will have 3-6 tabs ( diff components ) based on selected template where I select videos from and other 4-5 input fields, for the 3-6 tabs where I select videos from I need to fetch some data from the backend and also they have to be searchable
I want to know if it's possible to fetch the data server side based on selected template
What i was thinking is the following approach : Select template use searchParams to set up a new URL based on selectedTemplate, then get server-side the SearchParam and fetch data inside Main component ( server component ) based on the search param, then make another Client component inside the main component that will use the initialData ( fetched data server-side ) to display the selecting tabs with videos, for the search since I don't want to make other server requests for filtering the data I will either useSWR for revalidation or client re-fetching or simple array/object filtering since I already fetched the data from server as InitialData. Is my approach correct
Is my approach correct ?
Is there any better version ?
@Arinji Is this better? 👀 Sorry i can't get it shorter just tried to be more straight forward is a pretty complex task overall
Answered by Arinji
Push state is handy for filtering when you are working with multiple filters and need to add and delete them very fast.
View full answer

55 Replies

Avatar
Arinji
Why make another forum smh
Avatar
African Slender-snouted CrocodileOP
😂 Thought it would be better, just delete the old one
Avatar
Arinji
Didn't understand the useSwr part
Why do you need that?
Avatar
African Slender-snouted CrocodileOP
Hmmm, Firstly I was thinking to help me to filter data, but then I realised I can simply filter the array/object that i got from server based on the search bar state
Avatar
@Arinji Didn't understand the useSwr part
Avatar
African Slender-snouted CrocodileOP
Overall would be a good approach without the useSWR part?
Avatar
Arinji
Yea, so you need help with filtering right?
One sec have a video of an implementation I made.. somewhere
Do you want something like that @African Slender-snouted Crocodile
Avatar
@Arinji Yea, so you need help with filtering right?
Avatar
African Slender-snouted CrocodileOP
No no, I wanted to know if my approach was correct because my knowledge about server side rendering and how to make use of server side rendering is pretty rusty. I moved recently to Next.js and I'm still trying to understand how to fetch data server side and then using it on client
Avatar
@Arinji Do you want something like that <@588814479438118913>
Avatar
African Slender-snouted CrocodileOP
Uuu and something like this would be good to know, how did u make this filtering?
Avatar
Arinji
How much do you know about window.history.pushState?
Avatar
@Arinji How much do you know about window.history.pushState?
Avatar
African Slender-snouted CrocodileOP
First time i hear about it 😅
Avatar
Arinji
Ok no worries
That's a more simpler search feature i made
Read from there to the bottom
Ask me questions
Dosent use any external hooks, it's a pure nextjs implementation
Avatar
African Slender-snouted CrocodileOP
@Arinji I'm bit confused, why you decide to use window.history.pushState, instead of simply setting a state at top level of the client component, and use the onChange from the input to set the state to the input value and then on the button u simply call the router.replace with that state? 🤔 wouldn't be the same output? U just don't replace the URL in the real time
The url is considered a better global state manager
Avatar
Arinji
@African Slender-snouted Crocodile solved?
Avatar
@Arinji <@588814479438118913> solved?
Avatar
African Slender-snouted CrocodileOP
Nope, I just wanted to ask u something
"use client";
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { usePathname, useSearchParams } from "next/navigation";
import { useRouter } from "next/navigation";
import { useTransition } from "react";

export function Selector() {
  const searchParams = useSearchParams();
  const params = new URLSearchParams(searchParams);
  const router = useRouter();
  const pathname = usePathname();
  const [isLoadingTemplate, startTransitionTemplate] = useTransition();

  return (
    <Select
      onValueChange={(value) => {
        startTransitionTemplate(() => {
          router.replace(`${pathname}?template_type=${value}`);
        });
      }}
    >
      <SelectTrigger className='w-[180px]'>
        <SelectValue placeholder='Select a Template' />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <SelectLabel>Templates</SelectLabel>
          <SelectItem value='apple'>Apple</SelectItem>
          <SelectItem value='banana'>Banana</SelectItem>
          <SelectItem value='blueberry'>Blueberry</SelectItem>
          <SelectItem value='grapes'>Grapes</SelectItem>
          <SelectItem value='pineapple'>Pineapple</SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
  );
}
Avatar
Arinji
Sure, wassup
Avatar
African Slender-snouted CrocodileOP
Is this thing the same as using window.pushState? 🤔
in the example u provided u were calling the router.replace on click, but also using the pushState to update in real time
Avatar
Arinji
I only see the router.replace, you mean that right?
Avatar
African Slender-snouted CrocodileOP
yeap
pushState is used if for example if I want to make a searchbar filtering data in real time based on the param without the user to press on a "search" button, right? 🤔
Ahhh, it's so confusing a bit 😂 I don't understand the role of pushState if you call router.replace anyway
on some google search I understood that pushState is used to not call a useless full re-fetch/re-render and simply update url in real time, but at the same time in the code u provided above, U were using pot router.replace ( that will call a re-fetch/re-render ) AND pushState
Avatar
Arinji
Ok so basically, what I was doing
I wanted it so I can update the url, but not update the server to like refetch data
So that all my client components can use the url as a state manager and figure out which params to add and delete etc
But if I kept calling the server, I would have to add a loading spinner etc
That's why I have router.replace at the end purely to make the server refetch according to the new url
Since pushState will only update the url and the useSearchParams hooks into this pushState and will also update
Your implementation will directly call the server to rerender
Avatar
African Slender-snouted CrocodileOP
I'm so ashamed to say that, I don't understand... ,
What I understand is that, PushState updates URL in real time -> changing URL in real time would "trigger" the useSearchParams hook and filter the data based on the new search params without the need of a re-fetch ( server call )
If you need a re-fetch tho or a server call, you added the button so when u press u use router.replace that would trigger a server re-fetch.
So pushState is used only if u have the data already and you want to filter through it without having to re-fetch it every time, but if for example you would need a different data you would need to explicitly call router.replace to trigger a server call.
In my case tho with the Select, I would need to fetch different type of data based on the selected template, so that would trigger a server call ( which I want, cause I'm not going to filter through some data, I will need to fetch data based on the selected template ), but If I want to filter some data that I already have I would use PushState, correct? 👀 @Arinji
I would recomend... Splitting up your questions a bit, again had a stroke reading all that lmao
But it's fine
But yes your correct
Push state is purely meant to handle quick client changes
Replace is meant to call the server to rerun all the page backend code
Makes sense?
For your case, don't use pushState
Avatar
Arinji
Push state is handy for filtering when you are working with multiple filters and need to add and delete them very fast.
Answer
Avatar
@Arinji Makes sense?
Avatar
African Slender-snouted CrocodileOP
Yeap, totally !! thank you very much for the help!! I finally can say that I got it!
I will mark this as finished
Avatar
Arinji
Awesome, make another forum if you get any other question :))
Avatar
African Slender-snouted CrocodileOP
👍 😂