Highest Voted 'react-server-components' Questions

0

votes

1 answer

Fetching isn't done in production build, while it is done in development for Nextjs server component

SOLVED I was about to use internationalization for translating the pages at the very beginning of the project. There are some codes for configuring internationalization in next.config.js like the following, all I need to do to get rid of the problem…

next.js nextjs-dynamic-routing react-server-components

asked Jul 16 '23 at 12:12

Mithat Akbulut

7
1
7

0

votes

0 answers

Does cloning React elements that are server components cancel the performance benefit?

I have been trying out React Server Components in NextJS 13. I have stumbled on a case when I need to use the pattern of passing server components as props in a client component. The thing is, this is a HOC wrapper that attaches an onClick handler…

javascript reactjs next.js react-server-components react-hoc

asked Jul 16 '23 at 10:14

guben

77
7

0

votes

1 answer

Next.js 13: Can this components use server component and client component together for better performance? How to achieve it?

Introduce I'm curently learning server and client components in Next.js 13 and wants to implement it in my project. I have a container component that uses react-intersection-observer to determine which section is in view and updates the active…

javascript next.js jsx nextjs13 react-server-components

asked Jul 16 '23 at 06:33

Leight

3
2

0

votes

0 answers

NextJS 13 Build-Time Data Fetching

I have NextJS 13 application and trying to deploy to docker via GitHub Actions And I use server component and doing some ec2 actions but I got error when I deployed to GitHub 31 550.4 > Build error occurred #31 550.4 Error: Collecting page data for…

javascript node.js reactjs next.js react-server-components

asked Jul 13 '23 at 23:24

이동헌

41
1
1

0

votes

0 answers

Is it possible to use Context values in Server Components?

In my apps my store is usually the main abstraction layer that sits between the app and the API. By ensuring my React tree only references store methods when making API calls, I have a clear separation of concerns and am able to edit API related…

javascript reactjs typescript next.js react-server-components

asked Jul 13 '23 at 14:31

styke

2,116
2
23
51

0

votes

0 answers

Next13 : How to update an API parameter in parent server component from child client component

I'm testing next13 and have the following code structure. A parent server component calls an API to generate a list of countries, passed to a child client component displaying a select. The parent component also calls another API to generate a list…

reactjs next.js react-server-components

asked Jul 11 '23 at 10:21

Antoine GUGLIELMI

139
6

0

votes

1 answer

NextAuth React Server Components Dynamic server usage Error

Been trying to use react server components, however, I'm stuck at retrieving session data from next auth. The recommended way to do this is getServerSession which throws an error: Error: Dynamic server usage: force-dynamic As per docs, I've set…

reactjs next.js next-auth react-server-components

asked Jul 10 '23 at 05:58

Exanubes

133
2
13

0

votes

1 answer

Trigger server action on click in next 13

In my client component I want to create a new Todo: "use client"; const ClientComp:FC<{ createTodo: (title:string) => void }> = ({ createTodo }) => { return ( ) } Now in my…

next.js react-server-components

asked Jul 08 '23 at 12:48

Sventies

2,314
1
28
44

0

votes

0 answers

Avoid redundant fetch in React Server Component

In a server component and using the fetch() API, is there an elegant way to check if the fetched resource is already cached on the nextJS server and to not fetch it from the remote server if it isn't? (remote server= not nextJS but a 3rd party…

reactjs next.js react-server-components

asked Jul 06 '23 at 17:01

AkiraNeutron

63
4

0

votes

1 answer

How to pass a component as a prop using Next 13

I have a client component called Tab: import * as React from "react"; import type { IconType } from "react-icons"; type TabProps = { Icon: IconType; label: string; isActive?: boolean; }; export default function Tab({ Icon, label, …

reactjs next.js react-server-components

asked Jul 04 '23 at 17:54

prismo

1,505
2
12
26

0

votes

0 answers

Next 13 Postgres client connection occurs after server components

I have a Next.js 13 project with the app directory which connects successfully to a postgres database. What I want to do is to connect to Postgres once, and then export the connection across my app so I will be able to perform queries from server…

database postgresql next.js react-server-components

asked Jul 04 '23 at 11:30

IdoBa

63
6

0

votes

1 answer

How to reuse functional components in Next.js 13 Server Components

I cannot separate the logic from the component with this error: Error: Event handlers cannot be passed to Client Component props.

^^^^^^^^^^
If…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/reactjs" class="post-tag grid--cell" title="show questions tagged 'reactjs'" rel="tag">reactjs</a> 
                
                <a href="../../questions/tagged/next.js" class="post-tag grid--cell" title="show questions tagged 'next.js'" rel="tag">next.js</a> 
                
                <a href="../../questions/tagged/nextjs13" class="post-tag grid--cell" title="show questions tagged 'nextjs13'" rel="tag">nextjs13</a> 
                
                <a href="../../questions/tagged/next.js13" class="post-tag grid--cell" title="show questions tagged 'next.js13'" rel="tag">next.js13</a> 
                
                <a href="../../questions/tagged/react-server-components" class="post-tag grid--cell" title="show questions tagged 'react-server-components'" rel="tag">react-server-components</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Jun 27 '23 at 15:09">asked Jun 27 '23 at 15:09</time>
    <a href="../../users/19338789/pringles" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/19338789.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Pringles" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/19338789/pringles" class="s-user-card--link">Pringles</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">9</li>
            
            
            <li class="s-award-bling s-award-bling__bronze" title="1 bronze badges">1</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-76551998">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>0</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status ">
                <strong>0</strong> answers
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/76551998/managing-variants-in-next-js-react-server-components" class="question-hyperlink">Managing Variants in Next.js / React Server Components</a></h3>
        <div class="excerpt">My Next.js application (app dir) powers multiple closely related brand websites, which are very similar.
In my application, each component has approximately two versions (variants). Depending on whether the THEME environment variable is set to "1"…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/next.js" class="post-tag grid--cell" title="show questions tagged 'next.js'" rel="tag">next.js</a> 
                
                <a href="../../questions/tagged/nextjs13" class="post-tag grid--cell" title="show questions tagged 'nextjs13'" rel="tag">nextjs13</a> 
                
                <a href="../../questions/tagged/react-server-components" class="post-tag grid--cell" title="show questions tagged 'react-server-components'" rel="tag">react-server-components</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Jun 25 '23 at 19:00">asked Jun 25 '23 at 19:00</time>
    <a href="../../users/11754767/simplecreator" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/11754767.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="simplecreator" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/11754767/simplecreator" class="s-user-card--link">simplecreator</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">393</li>
            <li class="s-award-bling s-award-bling__gold" title="1 gold badge">1</li>
            <li class="s-award-bling s-award-bling__silver" title="2 silver badge">2</li>
            <li class="s-award-bling s-award-bling__bronze" title="10 bronze badge">10</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-76489575">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>0</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status ">
                <strong>0</strong> answers
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/76489575/nextjs13-4-4-cannot-find-draggable-entry-with-id-1-data-rbd-draggable-context-" class="question-hyperlink">NEXTJS13.4.4 - Cannot find draggable entry with id [1] & data-rbd-draggable-context-id` didnot match. Server: "1"Client: "0"' with react-beautiful-dnd</a></h3>
        <div class="excerpt">How can I fix an issue in Next.js?
"use client"
import React, { useState, useEffect } from "react"
import { useFinalDataFromForm } from "@/store/useEventAddingData"
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"
import {…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/next.js" class="post-tag grid--cell" title="show questions tagged 'next.js'" rel="tag">next.js</a> 
                
                <a href="../../questions/tagged/nextjs13" class="post-tag grid--cell" title="show questions tagged 'nextjs13'" rel="tag">nextjs13</a> 
                
                <a href="../../questions/tagged/react-beautiful-dnd" class="post-tag grid--cell" title="show questions tagged 'react-beautiful-dnd'" rel="tag">react-beautiful-dnd</a> 
                
                <a href="../../questions/tagged/react-server-components" class="post-tag grid--cell" title="show questions tagged 'react-server-components'" rel="tag">react-server-components</a> 
                
                <a href="../../questions/tagged/app-router" class="post-tag grid--cell" title="show questions tagged 'app-router'" rel="tag">app-router</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Jun 16 '23 at 11:06">asked Jun 16 '23 at 11:06</time>
    <a href="../../users/18763978/shri" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/18763978.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Shri" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/18763978/shri" class="s-user-card--link">Shri</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">26</li>
            
            
            <li class="s-award-bling s-award-bling__bronze" title="4 bronze badges">4</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-76393856">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>0</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status ">
                <strong>0</strong> answers
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/76393856/next-13-and-mongoose-objectid-as-string" class="question-hyperlink">Next 13 and Mongoose - ObjectID as string</a></h3>
        <div class="excerpt">So, ideally i would be able to do this:
export default async function Home() {
  // const [services, categories] = await getData()
  const services = await Service.find().lean()
  const categories = await Service.distinct('category')

return (
   …</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/mongoose" class="post-tag grid--cell" title="show questions tagged 'mongoose'" rel="tag">mongoose</a> 
                
                <a href="../../questions/tagged/next.js" class="post-tag grid--cell" title="show questions tagged 'next.js'" rel="tag">next.js</a> 
                
                <a href="../../questions/tagged/react-server-components" class="post-tag grid--cell" title="show questions tagged 'react-server-components'" rel="tag">react-server-components</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Jun 02 '23 at 22:48">asked Jun 02 '23 at 22:48</time>
    <a href="../../users/470772/andre-alcada-padez" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/470772.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="André Alçada Padez" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/470772/andre-alcada-padez" class="s-user-card--link">André Alçada Padez</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">10,987</li>
            <li class="s-award-bling s-award-bling__gold" title="24 gold badges">24</li>
            <li class="s-award-bling s-award-bling__silver" title="67 silver badges">67</li>
            <li class="s-award-bling s-award-bling__bronze" title="120 bronze badges">120</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>

</div>
        </div>

</div>
        </div>
        <script src="../../static/js/stack-icons.js"></script>
        <script src="../../static/js/fromnow.js"></script>
        
    </body>
</html>

Questions tagged [react-server-components]