Stack Overflow
Stack Overflow

Questions tagged [react-server-components]

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.

123 questions
2
votes
0 answers

How to send Next-Auth session to an api request when requesting from React Server Component in Next 13

I'm using NextJs 13 beta version that has introduced /app directory. Along with this I'm using Next-Auth for authentication purpose. Basic login and logout functionality is working as expected, also in one of my server component if I do const…
Jawad
  • 103
  • 1
  • 8
2
votes
1 answer

Is it possible to access the DOM in a React Server Component?

React Server Components (RSC) render on the server, leaving no JS for the browser to run. My question is, can we access and manipulate the DOM in a RSC? For instance, let's say we want to manipulate CSS variables based on data fetched in a RSC. We…
Magnus
  • 6,791
  • 8
  • 53
  • 84
2
votes
1 answer

Next13 app folder not render html in page source

i've been testing Nextjs beta for a while now but i'm noticing that the page-source it's always empty no matter what. Example : import VisitProvider from "./(components)/VisitProvider"; import Visit from "./(components)/Visit"; import…
Miriam
  • 347
  • 1
  • 2
  • 19
2
votes
1 answer

How can I get the IP adress of a client in server component of the app directory in Nextjs 13?

For a personal project, I want to create a game. So if the user loose, he can’t access the game for 30 minutes, there’s no registration or anything like that I just want to store the IP in my database so I can check the last time the user loose. (I…
DOMESDAY
  • 23
  • 3
2
votes
0 answers

Is there a way to access the "request" and "response" within a server side layout, page or component in nextjs13's app directory?

I'm trying to apply server side authentication in a similar way to how getServerSideProps() works in the older /pages approach to nextjs. However with this approach getServerSideProps takes a context parameter which contains both the req and res…
Tristan Trainer
  • 2,770
  • 2
  • 17
  • 33
2
votes
0 answers

How to open/close a modal from my header component in Next.js 13?

I am building an e-commerce application with Next.js 13 for fun. I have difficulties when I try to make a Login modal that pops up when I click on a button in
component. My approach would be make a useState in the parent, which is the…
jethro-dev
  • 249
  • 1
  • 5
  • 12
2
votes
3 answers

Error: `experimental.runtime` requires `experimental.reactRoot` to be enabled along with React 18

I've a project with (next 12.1.6 + react 18.1 + react-dom 18.1). Now i want to add React Server Components to it. Updated my next.config.js like this const nextConfig = { distDir: '../../.next', reactStrictMode: true, experimental: { …
ORLVNI
  • 31
  • 1
  • 8
2
votes
1 answer

How to use TailwindCSS with React Server Components (Next.js)

Trying out the new React Server Components (with Next.js), but when renaming _app.tsx to _app.server.tsx, TailwindCSS styles are not loaded at all (html renders fine though). _app.tsx is the one importing the global index.css file with all the…
eagor
  • 9,150
  • 8
  • 47
  • 50
1
vote
1 answer

How to fetch data on server side using token from localStorage?

I am going through the Next.js official documentation. I am using the App router. On the data fetching patterns page, it's mentioned: Whenever possible, we recommend fetching data on the server So, I wrote this simple function: import…
Vikas Prasad
  • 3,163
  • 5
  • 28
  • 39
1
vote
1 answer

How to implement pagination in Next.js 13 using the App Router and Server Components

I started building a Next.js frontend for a WordPress website, using the App Router and GraphQL plugin to fetch data from WordPress. The homepage is all set up to display the latest posts, and it's a server component. import PostCard from…
Ioan
  • 25
  • 4
1
vote
0 answers

redirect inside NextJS AppRouter RSC

I've recently migrated my project to NextJS 13 AppDir and I'm encountering redirection issues. My category pages have dynamic URLs, and I need to validate whether a visitor types a brand name or a category name in the URL, such as…
T. Cem Yılmaz
  • 500
  • 9
  • 30
1
vote
1 answer

How to load NextJs config file and enable feature flags for Jest

I am not able to load my next.config file in Jest for tests. I am testing the submit function in a form which calls a server action. Form const Form = ({ mockSubmit }: { mockSubmit: () => void }) => { const handleSubmit = async (data) => { …
Re-Angelo
  • 217
  • 3
  • 15
1
vote
0 answers

How to choose between Nextjs 13 (app router) server & client component patterns

In my opinion one of the most difficult things about nextjs 13 (app router) is figuring out when to utilize the vast number of different features offered (Am I alone here?). There's not a ton of information yet about best practices in real world…
Alfred Madere
  • 21
  • 4
1
vote
1 answer

React Server Component in Next.js 13 not reloading data after build

I've got a simple React Server Component (below) that seems to get it's data at build time and never reloads it when the site is running. I would have thought that it would retrieve the data once when the server component first rendered. Without…
Peter Kellner
  • 14,748
  • 25
  • 102
  • 188
1
vote
0 answers

How to disable Next.js 13 React Server Components From Running at Buid

My React Server Components access mysql with Prisma from inside a local network. That is, I am running docker with mysql running in one container and my Next.js 13 RSC app running in another container. The connection string I use to mysql from the…
Peter Kellner
  • 14,748
  • 25
  • 102
  • 188
1 2
3
…
8 9