First Time Using Nextjs with React - Confused :(
Answered
Palomino posted this in #help-forum
PalominoOP
The main benefit of nextjs ive seen is with the routing as ive seen so far it used the folder based system for routing using App router so i dont need to be using React Router anymore i guess!
what i dont understand is the Server Side Components + Server Actions and Client Components, I wont be having the backend on the same next app so its gonna have its own repo and gonna be completely separate from the frontend so in that case i dont need server actions with my forms right??
whats the main use of server components i know it helps with SEO and i can make the fetch call to the backend directly in the component without useEffect but then how do i update state etc when i use useState/redux? as those hooks arent available in server components as far as i know?
also im confused about loading states during an async function, ive seen streaming with the <Suspense> and/or loading.tsx
but i dont really understand how things like prefetching works when say a link is available at the viewport with regards to static/dynamic routes
id appreciate if anyone could go in depth as to how i could move to using nextjs in react seamlessly, like any stuff i should really look into
what i dont understand is the Server Side Components + Server Actions and Client Components, I wont be having the backend on the same next app so its gonna have its own repo and gonna be completely separate from the frontend so in that case i dont need server actions with my forms right??
whats the main use of server components i know it helps with SEO and i can make the fetch call to the backend directly in the component without useEffect but then how do i update state etc when i use useState/redux? as those hooks arent available in server components as far as i know?
also im confused about loading states during an async function, ive seen streaming with the <Suspense> and/or loading.tsx
but i dont really understand how things like prefetching works when say a link is available at the viewport with regards to static/dynamic routes
id appreciate if anyone could go in depth as to how i could move to using nextjs in react seamlessly, like any stuff i should really look into
Answered by Anay-208 | Ping in replies
so in that case i dont need server actions with my forms right??Correct
whats the main use of server components i know it helps with SEO and i can make the fetch call to the backend directly in the component without useEffect but then how do i update state etc when i use useState/redux? as those hooks arent available in server components as far as i know?Server components allow server-side rendering, and yes, you can fetch data there.
You can pass it over to the client component, and it can create a useState with it as the default value
but i dont really understand how things like prefetching works when say a link is available at the viewport with regards to static/dynamic routeshttps://nextjs.org/docs/app/guides/prefetching
15 Replies
@Palomino The main benefit of nextjs ive seen is with the routing as ive seen so far it used the folder based system for routing using App router so i dont need to be using React Router anymore i guess!
what i dont understand is the Server Side Components + Server Actions and Client Components, I wont be having the backend on the same next app so its gonna have its own repo and gonna be completely separate from the frontend so in that case i dont need server actions with my forms right??
whats the main use of server components i know it helps with SEO and i can make the fetch call to the backend directly in the component without useEffect but then how do i update state etc when i use useState/redux? as those hooks arent available in server components as far as i know?
also im confused about loading states during an async function, ive seen streaming with the <Suspense> and/or loading.tsx
but i dont really understand how things like prefetching works when say a link is available at the viewport with regards to static/dynamic routes
id appreciate if anyone could go in depth as to how i could move to using nextjs in react seamlessly, like any stuff i should really look into
so in that case i dont need server actions with my forms right??Correct
whats the main use of server components i know it helps with SEO and i can make the fetch call to the backend directly in the component without useEffect but then how do i update state etc when i use useState/redux? as those hooks arent available in server components as far as i know?Server components allow server-side rendering, and yes, you can fetch data there.
You can pass it over to the client component, and it can create a useState with it as the default value
but i dont really understand how things like prefetching works when say a link is available at the viewport with regards to static/dynamic routeshttps://nextjs.org/docs/app/guides/prefetching
Answer
@Anay-208 | Ping in replies > so in that case i dont need server actions with my forms right??
Correct
> whats the main use of server components i know it helps with SEO and i can make the fetch call to the backend directly in the component without useEffect but then how do i update state etc when i use useState/redux? as those hooks arent available in server components as far as i know?
Server components allow server-side rendering, and yes, you can fetch data there.
You can pass it over to the client component, and it can create a useState with it as the default value
> but i dont really understand how things like prefetching works when say a link is available at the viewport with regards to static/dynamic routes
https://nextjs.org/docs/app/guides/prefetching
PalominoOP
im kind of confused with the differences between loading.tsx / <Suspense> / useLinkStatus()
when and where should each of them be used?
when and where should each of them be used?
@Palomino im kind of confused with the differences between loading.tsx / <Suspense> / useLinkStatus()
when and where should each of them be used?
Loading.tsx because wraps a suspense around your page.tsx IIRC
@Anay-208 | Ping in replies Loading.tsx because wraps a suspense around your page.tsx IIRC
PalominoOP
i mean does useLInkStatus and loading.tsx display together?
@Palomino i mean does useLInkStatus and loading.tsx display together?
You can try it out.
I personally have never used
I personally have never used
useLinkStatus@Anay-208 | Ping in replies You can try it out.
I personally have never used `useLinkStatus`
PalominoOP
True I saw that it’s normally used on extremely slow networks as per the documentation so I guess it’s barely ever used
Yes, no one really uses it much, this was my first time I heard about
useLinkStatus@Anay-208 | Ping in replies Yes, no one really uses it much, this was my first time I heard about `useLinkStatus`
PalominoOP
okay dude tysm ! i had 1 last question! im planning to create an app where im gonna have a sepaarte backend and frontend all this time ive been working with react + react router would u recommed id have advantages with nextjs ?
Before, I also used to use react + React Router
Next.js was so much better, like SSR(Which Vite + React also has).
And if you use Next.js, you can just fetch the Backend data in the Next.js server component, so that is a advantage
And if you use Next.js, you can just fetch the Backend data in the Next.js server component, so that is a advantage
@Anay-208 | Ping in replies Next.js was so much better, like SSR(Which Vite + React also has).
And if you use Next.js, you can just fetch the Backend data in the Next.js server component, so that is a advantage
PalominoOP
makes sense !! react vite has SSR?? how isnt that only in nextjs ??
also ive seen theres <Image /> component in nextjs that optimises images can i use normal tailwind in them to style using className??
also ive seen theres <Image /> component in nextjs that optimises images can i use normal tailwind in them to style using className??
i think nextjs handles lazy loading and all of that automatically whereas react needs it to be done manually right?? so i guess nextjs is the way to go !
@Palomino i think nextjs handles lazy loading and all of that automatically whereas react needs it to be done manually right?? so i guess nextjs is the way to go !
If you mean lazy loading of routes, yes, otherwise in react, you've to like execute some React.lazy and import