How to get Nextjs 13.4 SSR and Client components to render properly
Unanswered
Pollock posted this in #help-forum
PollockOP
Hi,
Apologies if I use the wrong terminology when explaining.
I am wondering how to get SSR components and client components to work together and what would be the 'standard/ideal' method to go about this.
I have an application page under /services/page.tsx which is the parent and is SSR.
Under this route there are similarities so some content is rendered by services/layout.tsx and the code is attached.
This chunk loads fine and there aren't any issues. Issues start appearing within the nested route which is /services/[serviceId]/page.tsx.
This page is ssr and is doing the data fetching to then pass that into the client side components. Code screenshot attached.
ServicesHomePage is marked as a client component using 'use client' and has other client components loaded into it. The first error point is in the 'SearchBar'. This component renders fine however the moment a hook or async/await function needs to be called the following error will populate:
' Unhandled Runtime Error
Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding
For reference the files marked as 'use server' and ' use client' are:
- layout.tsx = 'use server'
- services/page.tsx = 'use server'
- services/[serviceId]/page.tsx = 'use server'
- ServicesHomePage.tsx = 'use client'
- SearchBar = 'use client'
Any of the await functions that are called inside the client are server actions marked with 'use server' and prior to shifting the main pages into SSR these all worked without any issues however now, it is like the /services/[serviceId]/page.tsx file is trying to make everything else down the tree server rather than client.
Reference to stacked overflow question - https://stackoverflow.com/questions/77165201/how-to-get-nextjs-13-4-srr-and-client-components-to-render-properly
Thanks for your help
Apologies if I use the wrong terminology when explaining.
I am wondering how to get SSR components and client components to work together and what would be the 'standard/ideal' method to go about this.
I have an application page under /services/page.tsx which is the parent and is SSR.
Under this route there are similarities so some content is rendered by services/layout.tsx and the code is attached.
This chunk loads fine and there aren't any issues. Issues start appearing within the nested route which is /services/[serviceId]/page.tsx.
This page is ssr and is doing the data fetching to then pass that into the client side components. Code screenshot attached.
ServicesHomePage is marked as a client component using 'use client' and has other client components loaded into it. The first error point is in the 'SearchBar'. This component renders fine however the moment a hook or async/await function needs to be called the following error will populate:
' Unhandled Runtime Error
Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding
'use client' to a module that was originally written for the server' For reference the files marked as 'use server' and ' use client' are:
- layout.tsx = 'use server'
- services/page.tsx = 'use server'
- services/[serviceId]/page.tsx = 'use server'
- ServicesHomePage.tsx = 'use client'
- SearchBar = 'use client'
Any of the await functions that are called inside the client are server actions marked with 'use server' and prior to shifting the main pages into SSR these all worked without any issues however now, it is like the /services/[serviceId]/page.tsx file is trying to make everything else down the tree server rather than client.
Reference to stacked overflow question - https://stackoverflow.com/questions/77165201/how-to-get-nextjs-13-4-srr-and-client-components-to-render-properly
Thanks for your help
12 Replies
Alfonsus Ardani
"use server" is not the opposite of use client. Please do not confuse that to mark your component as server component.
Where is
SpecificServicesPage being imported to?You can't import async components into a file thats already marked as "use client".
The reason is that all component imported inside "use client" will be acted as client component and client component can't be async (yet). Therefore it will throw an error.
The reason is that all component imported inside "use client" will be acted as client component and client component can't be async (yet). Therefore it will throw an error.
PollockOP
Thanks for the reply!
Noted!
SpecificServicePage would only be imported into the layout.tsx of /services/ as a child (I believe - again apologies if i use wrong terminology etc. Still a noob).
SpecificServicePage is rendered when a link is clicked thereby pushing the user to the nest. This page does the data fetch which is then passed as props to ServiceHomePage (bad name) -This is the first 'use client'. ServiceHomePage has a component PatientSearchBar (this is marked as 'use client' as well) which uses a useFormik hook which has an async function and inside that async function there is an await which is when the error occurs - interacting with that searchbar & error - which makes sense right if it BUT the useFormik hook was working when the 'parent' was marked as 'use client' and the data fetch all occurred via useEffect hooks.
Noted!
SpecificServicePage would only be imported into the layout.tsx of /services/ as a child (I believe - again apologies if i use wrong terminology etc. Still a noob).
SpecificServicePage is rendered when a link is clicked thereby pushing the user to the nest. This page does the data fetch which is then passed as props to ServiceHomePage (bad name) -This is the first 'use client'. ServiceHomePage has a component PatientSearchBar (this is marked as 'use client' as well) which uses a useFormik hook which has an async function and inside that async function there is an await which is when the error occurs - interacting with that searchbar & error - which makes sense right if it BUT the useFormik hook was working when the 'parent' was marked as 'use client' and the data fetch all occurred via useEffect hooks.
Didn't upload those 2 blocks of code. Attached now 🙂
Alfonsus Ardani
which one is your layout.tsx?
can you simplify it since its hard to keep track of this many components
PollockOP
attached. Layout sits at /services/layout.tsx and puts the sidebar in as every page in or within the nest should have that and then renders the children which is the page of /services/page.tsx which only renders a Grid2 piece - the /services/page.tsx doesn't need to do anything else
Alfonsus Ardani
So which component causes the unhandled runtime error error?
PollockOP
Hey Alfonsus - thanks for patience. Its the PatientSearchbar where the error occurs. The useFormik.onSubmit hook fires which is async and does an await server action and updates some states.
Everything loads fine until that interaction occurs
Everything loads fine until that interaction occurs
Alfonsus Ardani
try without async/await then
PollockOP
Yeah this will still return the error when PatientSearch is interacted with or any async / await function is used anywhere such as inside a useEffect / useMemo hook. In the PatientSearch useFormik hook will use await / asyncs under the hood.
My question is more so when 'use client' was used and all data was fetched via useMemo / useEffect hooks - I never had any issues. Now that I am fetching data on a server component (the page) and pushing this down into other components I am getting errors with async / await calls.
I get that the client can't can't be async but you can load server actions inside client components and have these fire like the attached but in this scenario everything downstream should be rendering as a client component and not as a server component.
My question is more so when 'use client' was used and all data was fetched via useMemo / useEffect hooks - I never had any issues. Now that I am fetching data on a server component (the page) and pushing this down into other components I am getting errors with async / await calls.
I get that the client can't can't be async but you can load server actions inside client components and have these fire like the attached but in this scenario everything downstream should be rendering as a client component and not as a server component.
