Next.js Discord

Discord Forum

layout dynamic for serverside render

Answered
Balinese posted this in #help-forum
Open in Discord
BalineseOP
@aardani

context im upgrading to use the app directory

I have a route watchlist/[company]/info

I have a layout I want to use for watchlist/[company]/info, news, and so on.

I want to use a component that can be used specific for each users which is call ListCompanies. This component is based on each specific user data which they perform crud operations on.

I would like to take advantage of the serverside rendering of these pages so that I can be efficient with my builds. But also add in the ListCompanies component for each specific user.

Trying todo this in layout with 
import dynamic from "next/dynamic";
for the layout that is being used to serverside render pages.

Seems like I will be forced to only pre render the data at this point and use limited jsx server side with this new setup .
Answered by Balinese
ah okay I see now from that video that "use client" is still rendered on the server. So all my hooks and javascript stuff was pre rendered server side. just need to explicitly set it now with the app directory.
View full answer

25 Replies

aardani
I dont think you need to use dynamic from "next/dynamic"
thats for lazy loading component in client hydration
ListCompanies can be a component that accepts user type prop that conditionally render based ont he type of user
BalineseOP
Okay got it. I think this is just exposing me to the idea that a lot of my code was really not being server side rendered in the past. Only my data was being server side rendered. Which is okay cause this should still speed up my app I believe.
Thanks for the support
BalineseOP
Could react hooks work serverside in the pass with the pages? or was it just running getStaticPaths and getStaticProps and then running my react code on the client? Cause my react pages using hooks and what not was working with a wonky loading state with pages. Not sure what is going on exacly.
import React from "react";
import { CompanyOverview } from "@prisma/client";

import KeyStats from "./KeyStats";
import { Box } from "@mui/material";

type Props = {
  companyOverviewData: CompanyOverview;
};

export default function Overview({ companyOverviewData }: Props) {
  return (
    <>
      <Box sx={{ p: 5 }}>
        <KeyStats companyOverviewData={companyOverviewData} />
      </Box>
    </>
  );
}
aardani
Could react hooks work serverside in the pass with the pages?
No, you need to work towards finalizing your server component to produce 1 static html to the user
you need to use client component to provide hydration or interactivity during runtime.

The mental model is different in the app directory
Florian released a new video at #community-content on how to convert from pages to app dir, might be relevant to you
BalineseOP
Okay so i was just pre rendering the data. I'll take a look for that video.
@Balinese Okay so i was just pre rendering the data. I'll take a look for that video.
aardani
yes just get the data and render the data directly.
you shouldn't need to use hook just to prerender data
BalineseOP
Well everything depends on my theme context for styles. using a dark and a light.
aardani
hm
then just prerender the data :v
BalineseOP
Yeah I'll do that, thanks. This has already helped me understand my app better.
@Balinese Well everything depends on my theme context for styles. using a dark and a light.
aardani
this is still doable in app dir. Just wrap your server component with client component
just understand the general composition between server-client.
Client components are NOT meant to be a deoptimization so use it in conjunction with server component in order for you to migrate from your old project
BalineseOP
wait what is still doable? pre rendering client side code like my theme context?
aardani
sir, in app dir, your theme context provider is separated from server-side prerendered data
there is 0 need for your theme context to be prerendered
BalineseOP
ah okay I see now from that video that "use client" is still rendered on the server. So all my hooks and javascript stuff was pre rendered server side. just need to explicitly set it now with the app directory.
Answer