server components for seperated backend
Answered
Kurilian Bobtail posted this in #help-forum
Kurilian BobtailOP
Hey everyone, I’ve been working on my project for quite some time. I'm using the latest next js version and app directory.
The stack is:
• Laravel backend
• Next.js frontend
I was wondering if I’m doing something wrong because 98% of my pages and components are rendered as client components. Of course, I’ve read about server components, but I couldn’t apply them to my pages that have API calls because my backend URL API is set as a NEXT_PUBLIC environment variable. If I’m not mistaken, the page has to be set as a client component to get the value from NEXT_PUBLIC environment variables.
Is it practically normal for pages with a separated backend to render pages and components as client components?
Are there any examples of this kind of setup (where the backend is separated from the Next.js frontend)?
The stack is:
• Laravel backend
• Next.js frontend
I was wondering if I’m doing something wrong because 98% of my pages and components are rendered as client components. Of course, I’ve read about server components, but I couldn’t apply them to my pages that have API calls because my backend URL API is set as a NEXT_PUBLIC environment variable. If I’m not mistaken, the page has to be set as a client component to get the value from NEXT_PUBLIC environment variables.
Is it practically normal for pages with a separated backend to render pages and components as client components?
Are there any examples of this kind of setup (where the backend is separated from the Next.js frontend)?
Answered by James4u
@Kurilian Bobtail it's not an issue to have a Laravel backend with your next.js frontend project.
7 Replies
@Kurilian Bobtail Hey everyone, I’ve been working on my project for quite some time. I'm using the latest next js version and app directory.
The stack is:
• Laravel backend
• Next.js frontend
I was wondering if I’m doing something wrong because 98% of my pages and components are rendered as client components. Of course, I’ve read about server components, but I couldn’t apply them to my pages that have API calls because my backend URL API is set as a NEXT_PUBLIC environment variable. If I’m not mistaken, the page has to be set as a client component to get the value from NEXT_PUBLIC environment variables.
Is it practically normal for pages with a separated backend to render pages and components as client components?
Are there any examples of this kind of setup (where the backend is separated from the Next.js frontend)?
@Kurilian Bobtail it's not an issue to have a Laravel backend with your next.js frontend project.
Answer
also it's not an issue with server components
I BELIEVE your pages and components don't need to be client component! unless they have event listeners or effects (user interactions)
The reason we have NEXT_PUBLIC in environment variables is because we wanted to make them accessible from the client. Making your components client component to get value from envs is a misconception.
You can access to the env in server components, and you don't need to prepend NEXT_PUBLIC in your env vars
so let say your component has some data which is from your laravel backend endpoint
your data-fetching can be done in the server component, let say your laravel backend endpoint is an env var. It doens't have to start with NEXT_PUBLIC, as it's getting accessed from servver component