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
4
votes
1 answer
How “hydration” works with react server components?
With SSR, JavaScript must be fetched for interactivity, which is often achieved via hydration. How will this be achieved with server components?
Mari Goto
- 81
- 6
3
votes
2 answers
useEffect() in React Server Components
I have an account page, which the user ends up after signing up. As soon as they hit this page, I would like to create a profile row with a 1-1 mapping to a (Supabase) users table.
If this would be a client side page, I would do something like…
Sventies
- 2,314
- 1
- 28
- 44
3
votes
0 answers
NextJS 13.4 Pass an handleSubmit function from a server component to client component
So basically I got my page.js skeleton using the default server component and return a reusable form component inside.
So I need the handleSubmit to be inside the page component and not inside the form component, so I can use the same form for…
AdrienQua
- 31
- 2
3
votes
0 answers
How to use generateStaticParams with searchParams in Next.js 13 (app router) page?
Lets consider this example of fetching first 3 pages of pagination during build time:
app/listing-params/[page]/page.jsx
const getData = async (page) =>
new Promise((resolve) => {
setTimeout(() => {
resolve(`You are on page ${page}`);
…
Everettss
- 15,475
- 9
- 72
- 98
3
votes
1 answer
Why does a 204 response to a fetch() in a React Server Component throw a TypeError (Invalid response status code)?
Consider the following simple Next.js app: https://codesandbox.io/p/sandbox/next-js-app-router-1bvd7d?file=README.md
We have a API route (/api/hello):
export default function handler(req, res) {
res.status(204).end();
}
And a fetch in a React…
Magnus
- 6,791
- 8
- 53
- 84
3
votes
2 answers
How can server-side components communicate with client-side components in React?
I'm working with Next.js and am testing their new way of data fetching but this can be a general React 18+ question too as the library itself is shifting towards a distinction between client and server components.
Suppose I have the setup:
//…
driftingaway
- 39
- 1
3
votes
1 answer
window is not defined - Next.js 13 - Client Component in Server Component -
Leaflet is imported in a file that's imported into a client component, so why is the server running it and throwing this error?
It actually does work after a retry and eventually renders site fine.
I tried using a dynamic import inside useEffect...…
orangesoda
- 97
- 1
- 8
2
votes
1 answer
useEffect not running in nextJS 13.4 (app router) app
i am trying to fetch data from next api route but the useEffect method is not firing up on page reload.
also i can't make this component async as nextJS does'nt allow async functions on client components(use client)
page.tsx:
"use client";
import {…
Warrior
- 23
- 4
2
votes
0 answers
How to do barrel export with react server components and client components in a package?
If we have a package called @company/ui, how we should export components in a barrel index.js file in order to not mix client and server components?
like imagine I have:
import Button from '../components/Layout/segmentedControl'; // -> client…
SayJeyHi
- 1,559
- 4
- 19
- 39
2
votes
1 answer
Server components: Can we use webpack to add "use client" in modules from compponent library?
React server components make us use the "use client" directive on top of files. This basically breaks react components library (like ReactBootstrap and PrimeReact) and makes us create wrapper files just to add "use client" in each module exported by…
Vitor Figueredo Marques
- 159
- 8
2
votes
0 answers
GenerateStaticParams Not Working (404) when opting out of DynamicParams (Next13)
I feel like I must be missing something or misunderstand something.
I am using generateStaticParams:
export async function generateStaticParams() {
let blogPosts = await prisma.posts.findMany({
where: {
category: "POLITICS",
},
…
antonwilhelm
- 5,768
- 4
- 19
- 45
2
votes
1 answer
How to use Env variables on server components and also client components in nextjs
I am using nextjs app Dir. I need to send emails which I am sending with nodemailer, and I am required to use server components since you cannot send with clientside.
I am using typescript in this project and I have some issues using a function that…
daniel sas
- 257
- 2
- 9
2
votes
0 answers
Convenient display for console logs from Next js server components in vscode
In Nextjs some time i need to console.log() / .dir from a server components
so the logs appears in the terminal.
Now, in the Chrome console, I can toggle and explore object properties, which helps when dealing with nested objects. However, VScode…
moshe rivkin
- 21
- 4
2
votes
3 answers
How to make server component reflect data changes, made with server actions?
I have a server component ChatList, that fetches data from the database and displays it:
// server component
import Link from "next/link";
import db from "@/prisma";
export const ChatList = async () => {
const chats = await db.chat.findMany();
…
eagor
- 9,150
- 8
- 47
- 50
2
votes
0 answers
Using web components in React sever components
Prior the /app router and default server components in Next.js 13, I was able to use web components generated via StencilJS as per the with-stencil starter, by defining the custom elements in _app.tsx.
import { useLayoutEffect } from 'react'
import…
5tormTrooper
- 893
- 7
- 21