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
23
votes
4 answers
How can I get the url pathname on a server component next js 13
So basically I have a server component in app dir and I want to get the pathname. I tried to do it using window.location but it does not work.
Is there any way I can do this?
Updater XD
- 261
- 1
- 3
- 8
10
votes
3 answers
Testing an async server component with Jest in Next 13
In NextJs 13+ using the experimental App folder, async server components can be written, as described by the documentation:
export default async function Page({ params: { username } }) {
// Initiate both requests in parallel
const artistData =…
Felipe
- 10,606
- 5
- 40
- 57
10
votes
2 answers
React Server Components Performance on SEO
So this is a fairly new topic, React Server Components has recently been released, comparing to SSR/Next.js, how does it affect SEO?
Since the component is rendered in the server dynamically when it is requested, it is not really as static as SSR…
kennysliding
- 2,783
- 1
- 10
- 31
9
votes
2 answers
Can't Access Values from Next Server Actions | Next.js 13.4
I'm curious how we'd be able to go about accessing returned values from Next.js 13's alpha release of server actions. Here's the documentation from the Next team for reference.
Let's say I have the following example server action to perform input…
ricarn1
- 91
- 3
7
votes
1 answer
How to provide context to React Server Components (Next.js 13.2) ? (e.g. theme)
I’ve been playing with React Server Components for nearly 2 weeks now and this question has been making my brain hurt: how do you provide context to server components? Like for example, providing a theme (e.g dark | light mode) ? Ive checked the…
Jack Oats
- 71
- 4
7
votes
2 answers
Why is `fetch` called twice during build in Nextjs 13?
I am fetching (using Nextjs 13's fetch with {cache:'force-cache'}) from an api that returns a random joke. I noticed that fetch is being called twice during build.
Here's my code:
// page.js
import {RefreshButton} from './RefreshButton'
async…
jalen_blue
- 165
- 1
- 2
- 12
6
votes
1 answer
If useState is not supported by React server components how do we assign component state for rendering
Im trying to understand React server components and how to render component state without the use of useState and useEffect. I have created a server component with an embedded client component and both fetch a small amount of data and display as…
Laurence Fass
- 1,614
- 3
- 21
- 43
5
votes
2 answers
NextJS 13 - how to get NextApiRequest object in async component?
According to the NextJS 13 documentation, writing the async components is the new way of prefetching some data on the server - all the getStaticProps, getInitialProps, and getServerSideProps should be replaced by async components.
My problem is that…
Greg
- 99
- 4
5
votes
1 answer
nextjs 13 generateStaticParams used with next/header causes unhandled runtime error in dev mode
I am working on a new project, and recently used nextjs13 for my frontend application.
When using the function generateStaticParams with the next/header library function headers(),
I get an error in dev mode.
Unhandled Runtime Error - Dynamic…
Jihoon Choi
- 73
- 5
4
votes
0 answers
How to make fetch call again in React Server Components with new state like UseEffect with Next 13.4
In Next 13 with React Server Components we can fetch data directly in our Components. but how to refetch that data when the state changes in the client component.
For example in Tree Structure Above. Suppose we have some data in Navbar…
Muhammad Bilal
- 113
- 2
- 8
4
votes
1 answer
Infinite scroll with NextJS13 server components (app directory)
Currently trying to refactor our project to use Server components (app directory), and the first challenge is how to implement infinite scroll pagination with new "app" directory.
This is an oversimplified page example:
import OrganisationInterface…
RomkaLTU
- 3,683
- 8
- 40
- 63
4
votes
1 answer
NextJS Property 'set' does not exist on type 'ReadonlyRequestCookies'
I'm trying to set cookies inside the server actions function in Next.js 13.4.1.
Example code
import { cookies } from 'next/headers';
async function create(data) {
'use server';
cookies().set('name', 'lee');
// or
cookies().set('name',…
yamada kun
- 61
- 1
- 4
4
votes
3 answers
Next.js 13 Server and Client Components Confusion
I have a server component InitView;
const InitView = () => {
useEffect(() => { });
return (
<>
utkuonursahin
- 249
- 4
- 10
4
votes
0 answers
Will vite work with react server components
Since RSC(React Server Components) is using server + client components with a use client keyword to split them out from each other.
I was wondering how vite will behave. How it will work there?
I know that vite has SSR support with some built-in…
SayJeyHi
- 1,559
- 4
- 19
- 39
4
votes
2 answers
Does MUI require all pages to be CSR when using the new app directory in NextJS 13
I just started my first NextJS app and followed this guide to add MUI. The only difference I can see is that I'm using the experimental app directory of NextJS 13.
When following the guide, I get a server error of Uncaught TypeError:…
suamikim
- 5,350
- 9
- 40
- 75