header component
Answered
JJSenpai posted this in #help-forum
JJSenpaiOP
I have a header component which renders the logo company name and current tab open for a dynamic route /[ticker]/compare,insights,team . So my header component should take ticker name from params and render the header. It also shows which route I am currently on like compare or insights.
Is it possible I write this logic in layout.tsx of [ticker] and this header component works fine for all sub routes?
P.s. I have to call an api to fetch info from ticker
Is it possible I write this logic in layout.tsx of [ticker] and this header component works fine for all sub routes?
P.s. I have to call an api to fetch info from ticker
Answered by American Crow
I'd do somth. in the likes of
// server component
export default function TickerLayout({children, params}) {
// params is automatically passed from props-----^
if (params.ticker) ...
// Use Logic from fetchInfoFromTicker directly inside here
// Don't call the action from a server component but use the logic in here (don't need the action)
// const data = fetch ...
return (
<TickerHeader info={data} />
)
}29 Replies
JJSenpaiOP
@averydelusionalperson
yes, you should be able to fetch ticker in layout.tsx ig, I also have similar thing, I don't fetch tho, just getting userDetails cookies, and passing it to the layout, which is a client component.
JJSenpaiOP
It's possible to fetch and render in page as it can be async, but can I fetch server side in layout?
I'm pretty sure you can
try it out
@JJSenpai were you able to achieve it?
JJSenpaiOP
Aah, will try it soon. I'll let you know
American Crow
dude i was refactoring that code
JJSenpaiOP
"use client";
import { TickerHeader } from "@/components/TickerHeader";
import { useParams } from "next/navigation";
import { useEffect, useState } from "react";
import { fetchInfoFromTicker } from "../action";
import { companyInfoType } from "./insights/page";
export default function TickerLayout({
children,
}: {
children: React.ReactNode;
}) {
const params = useParams();
const [companyData, setCompanyData] = useState<companyInfoType>();
useEffect(() => {
const getCompanyData = async (ticker: string) => {
const companyData = await fetchInfoFromTicker(ticker);
setCompanyData(companyData);
};
if (params?.ticker) {
getCompanyData(params.ticker as string);
}
}, []);
return (
<section>
{/* <Navbar /> */}
<TickerHeader info={companyData} />
{children}
</section>
);
}oh sry my bad
I wanted to deleted the other msg :'(
American Crow
I'd do somth. in the likes of
// server component
export default function TickerLayout({children, params}) {
// params is automatically passed from props-----^
if (params.ticker) ...
// Use Logic from fetchInfoFromTicker directly inside here
// Don't call the action from a server component but use the logic in here (don't need the action)
// const data = fetch ...
return (
<TickerHeader info={data} />
)
}Answer
American Crow
I coded that thing entirely wrong at first i thought
useParams()is searchParams that would have made it a lot more complicatd because Layouts can't have searchParams ... But useParams is just returns the dynamic route parameters (slug)JJSenpaiOP
@American Crow I have this header component with links. The file structure is like this
/[ticker]/compare,insights,team,documents each have their own pages.tsx
The header is in /[ticker]/layout file. If I click on a tab like compare and then team, does it refrest the entire page or the part excluding the header?
/[ticker]/compare,insights,team,documents each have their own pages.tsx
The header is in /[ticker]/layout file. If I click on a tab like compare and then team, does it refrest the entire page or the part excluding the header?
American Crow
Server Layout do not rerender between navigations
JJSenpaiOP
Mine isnt server layout ig
American Crow
That's why i showed you how to make it one
JJSenpaiOP
how can I make a fetch call without use effect?
American Crow
in a server component you can just fetch
https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating
export default async function Page() {
const res = await fetch('https://...')
const data = await res.json()
// ...
}JJSenpaiOP
the thing is, page.tsx can be async
but layout cannot
American Crow
same for layout
@American Crow same for layout
JJSenpaiOP
ooooooooh
bro I thought I cannot
American Crow
JJSenpaiOP
Thanks dude @American Crow big help
American Crow
you welcome, glad i could help