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
Next.js 13 app directory Error: Objects are not valid as a React child (found: [object Promise])
I'm using Next.js 13's new app directory feature and have a page component at app/page.tsx that contains the following code:
"use client";
import { useState } from "react";
export default async function IndexPage() {
const [count, setCount] =…
Yangshun Tay
- 49,270
- 33
- 114
- 141
1
vote
1 answer
How can I pass down a function that is found on the Server Component to the Client Component?
Need help, NEXTJS 13 'app Dir'
How can I pass a function that is found on the Server Component to the Client Component?
I have Button which is a Client component and Another Server Component that wraps it. when The Button is Clicked I want execute…
Yonatan Dejene
- 13
- 3
1
vote
0 answers
React: How to pass multiple server components to a client component?
Since React doesn't allow importing Server components inside Client components, one workaround is creating an outer Server component, and inside it rendering the Client component with the other Server component passed to it as a child. That's okay,…
noiseymur
- 761
- 2
- 15
1
vote
0 answers
Re-render Server Component every X seconds
I have a server component that reads from the database:
import { db } from "@utils/database";
export async function UsersLayout() {
let users = await db.query(...);
// ...
return (
-
{users.map(user =>
- 34,501
- 19
- 112
- 166
Tomasz Mularczyk
1
vote
0 answers
Next 13 with Mongoose is not working in server component
I just updated the next version to 13 in a project to test out the app dir.
I have a function called getData() :
export const getData = async () => {
await dbConnect()
return await DataModel.find()
}
My dbConnect() function is a generic…
elmgren
- 193
- 12
1
vote
1 answer
Pass date object from server component to client component in Next.js 13
I'm upgrading next.js project to app directory style project. I need to fetch data from api server that contains dates. Data then should be filtered and ordered by date field. Currently I'm using next-superjson library to serialize data that is sent…
gor
- 11,498
- 5
- 36
- 42
1
vote
1 answer
How can I run a component on server side?
I was working on personal projects month ago and I wanted to add a instagram feed on my site. I was building the site with Next.js,Tailwindcss, etc..
I couldn't found a good component that works how I wanted so I ventured to create one to get what I…
SalvaGR
- 11
- 1
0
votes
1 answer
Having Trouble using MUI with NextJS 13 App Router despite Following Examples
Using Nextjs 13 App Router with MUI 5. While setting up, followed these instructions carefully: https://mui.com/material-ui/guides/next-js-app-router/. My code looks much like this example:…
Noam Hudson
- 117
- 9
0
votes
1 answer
How to implement Firebase pagination in a NextJS 13 server component?
I'm currently trying to create a product page that displays all products and is a server component.
The problem that I've run into is that I can't find a way to pass the last visible document snapshot required by the startAfter() query.
This is the…
Beytula Smail
- 1
- 1
0
votes
2 answers
How to share information between two client components in nextjs?
I have two client components inside a server component. It is a date selector and a scoreboard that shows scores on that date. However, I do not want to have them in the same client component as I want them to be rendered in different parts of the…
ZachSal
- 43
- 5
0
votes
1 answer
how to conditionally render a server component depending on the state set in client component?
I'm trying to use a tailwinds css template sidebar, which updates the main div, with components, depending on the active sidebar tab. I need to use state to check which sidebar tab is active - so the dashboard menu has to be a client component.
I'm…
Mel
- 2,481
- 26
- 113
- 273
0
votes
1 answer
Nextjs13: loading.tsx files fallback on their ancestors and glitch
I'm trying to build a simple app with Nextjs 13.4.9, and there's this weird behaviour I'm facing among loading.tsx files while navigating between routes. It seems like when I navigate to a route which has a corresponding loading.tsx file, instead of…
Mister Killuminati
- 21
- 5
0
votes
1 answer
hooks in statically generated pages with NextJS app router
Short question: how do I get an action to take effect on page-load for the app router equivalent of statically generated pages from static paths in NextJS?
Longer version, my page generation is working fine:
// app/layout.js
import Providers from…
philolegein
- 1,099
- 10
- 28
0
votes
1 answer
Parallel route modal using Next.js 13's App Router returns 404 on refresh
I'm trying building modal using parallel routes in Next.js 13.4.
It works when I'm on the homepage (/) and open the modal (push to /login).
But when I refresh the /login page, instead of showing homepage with modal, it shows the 404 page with the…
Ruelle Paul
- 21
- 4
0
votes
1 answer
How to use localStorage in server components in NextJS 13 app directory?
So I am calling an API inside Metadata to fetch details on the URL entered. To access the URL, I am using next/headers.
export async function generateMetadata(
{ params, searchParams }: MetadataProps,
parent: ResolvingMetadata
):…
Ashutosh Dash
- 344
- 1
- 5
- 11