React Server Components is a subset of React.js, it allows loading components from the backend. The components have already been rendered in the backend and can be seamlessly integrated into the running app. This feature is still in experiment.
Questions tagged [react-server-components]
123 questions
1
vote
1 answer
How to write a fetcher that works both on the server and the client in Nextjs 13?
I have a Nextjs 13 frontend (app router) that communicates with a Laravel-powered backend via api. For authentication in the api, I'm using Laravel Sanctum (as recommended by Laravel for SPAs): basically, authentication works by setting two cookies…
grazdev
- 1,082
- 2
- 15
- 37
1
vote
1 answer
How to share state between react client components with a parent server component?
In my next.js app I have a page with two components: A and B.
// page.tsx
import A from './A'
import B from './B'
const Page = () => {
return (
)
}
export default Page
// A.tsx
'use…
Eliot Hertenstein
- 135
- 9
1
vote
0 answers
Static page rendering(similar to getStaticProps) on nextJS app router
Im using nextJs for a while.
Now initiating a new project using the app router (where traditional behavior is called the pages router).
In the pages router, I could export getStaticProps to build pages on run time.
Which is very ideal for data that…
yoty66
- 390
- 2
- 12
1
vote
0 answers
`loading` route in NextJs 13 now working properly while using parallel intercepted routes?
I am creating an app to learn about the new Nextjs features. My app directory is structured like this-
-@modal
-(.)blog
-[title]
-page.tsx
-layout.tsx
-loading.tsx
-blog
-[title]
-page.tsx
…
Ajay Yadav
- 151
- 1
- 2
- 11
1
vote
0 answers
Next.js 13 - Accessing search params from a deeply nested server component in the same route segment?
I know that search params are accessible in page component props, but can the deeply-nested, non-page server components inside the same route segment also access search params somehow? For example, let's assume a scenario. We have the following…
barkin
- 179
- 2
- 12
1
vote
1 answer
Fetching Data from Nextjs13 Server Component
I am using NextJS and MongoDB (using Mongoose).
This is my Server Component:
import {
getPosts
} from "@/lib/mongoDb/post";
import PostsClientComponent from "./PostsClientComponent";
const fetchPosts = async () => {
let posts = await…
DaMatt91
- 544
- 1
- 7
- 18
1
vote
0 answers
Can I pass server actions as props to client components if they are doing mutations?
The docs on sever action have this line:
If you aren't doing Server Mutations, you can directly pass the function as a prop like any other function.
Source:…
Florian Walther
- 6,237
- 5
- 46
- 104
1
vote
0 answers
How to re-render server component in nextjs 13.x using api routes?
I have a very basic project structure with just a root route. In my page.tsx, which is a server component, I fetch and show a list of countries from REST countries API endpoint.
I also have a client component search-bar.tsx which has a search input…
Ajitesh Chhatani
- 25
- 1
- 7
1
vote
0 answers
Nextjs 13 revalidate only refreshes server component, and does not update props if sent to client component,
I have data, and for this example it is displayed in two ways. Firstly data is displayed on the server component. The second is data is passed down to a client component, and rendered inside of the client component. If the data changes, and I use…
Max K
- 41
- 4
1
vote
0 answers
Set up locale for date-fns and Nextjs app directory
I'm using NextJS 13.4 with app directory (server components) and date-fns. I also use next-intl as internationalisation library.
I want to set correct locale before the app starts rendering on server side and the user's timezone so that whatever is…
Tomasz Mularczyk
- 34,501
- 19
- 112
- 166
1
vote
1 answer
Why do server components needs to be Hydrated?
So, if I understood how server components work, it will return the html to clients, and then, after loading the initial javascript bundle, it will get from the server a json file to represent its virtual DOM node to hydrate the initial html from…
Vitor Figueredo Marques
- 159
- 8
1
vote
2 answers
Nextjs: Loading or Suspense fallback won't show in production
I've migrated my personal page to the app directoy with nextjs v13.
I was trying adding loaders for RSCs first in the fallback prop of the Suspense component and also adding a loading component located at path of each route from the app…
Fer Toasted
- 1,274
- 1
- 11
- 27
1
vote
1 answer
Using state in server components - Next13
I'm building a simple Next13 lottery app to learn more about the new App Router. I want to fetch data on a server component based on a dynamically-changing piece of state and I am not sure how to accomplish this.
LottosPage is a server component…
Adham
- 121
- 7
1
vote
3 answers
How to import async Server Components into Client Components in Nextjs 13?
I am experimenting with Next.js 13 app directory and React 18's Server Components. Following the documentation I put an async fetch() call inside a Server Component and I mark the component as async.
But then when I place it as a child of a Client…
Cla
- 1,810
- 3
- 22
- 36
1
vote
0 answers
Do I still need to use key prop when mapping an array in a React Server Component?
I don't think so, but just in case, does anyone know the answer and have a source?
When we map an array to React elements it's a good practice to add a key prop to each element (React will even warn you when you don't).
That's because it helps React…
gfpacheco
- 2,831
- 2
- 33
- 50