How can I show dynamic title in Meta function in loader suspense case? #6073
-
|
I saw remix don't navigate until the loader completely fetch the data. For that reason I implemented Suspense, defer in that page. Which is working fine. Now the question is how can I show that fetched promise product title into dynamic meta tag? as I can see the Meta function has no option to handle such situations. here is the code I am using now. Please help me export const meta: V2_MetaFunction = ({ data }) => {
const product = data.product;
return [
{
title: data.product.then((prod: Product) => prod.title),
},
];
};
export const loader: LoaderFunction = async ({ params }: LoaderArgs) => {
const productId = params.productId;
const product = axios
.get("http://fakestoreapi.com/products/" + productId)
.then((res) => res.data);
return defer({ product: product });
}; |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 4 replies
-
|
If you need the data from the loader to set the title, then that piece of data can’t be deferred because it’s critical data, so add an await for it to work. Another option can be to use an effect to change the document.title once the promise is resolved. |
Beta Was this translation helpful? Give feedback.
-
|
The reason I am doing the suspense way, to navigate instantly. As the default behaviour of loader function stoping to navigate instantly. For example, If I want to navigate to a particular page which contains loader function to fetch data using await, it's taking time to navigate to that page and finally it's navigating to that page when the loader function complete the fetching process. Please give me a solution how to navigate instantly, so that I can get rid of suspense. and document.title is showing but not in source code, in source code it's showing undefined. It means, not good for seo Please help me. And I hope this wired behaviour will be fixed in next versions of remix. |
Beta Was this translation helpful? Give feedback.
-
|
Can't you separate what's critial from what can wait? const critical = await getCriticalData() // to be used in the <head></head>
const dataFromExpensive = getDataFromExpesiveProcessing() // to be used elsewhere
return defer({
critical,
dataFromExpensive
}) |
Beta Was this translation helpful? Give feedback.
-
|
Yes, I tried it and got my answer but if I use await in loader for critical data then again the navigation state keep pending until it finished. However, It it ok as the response is coming pretty fast , and I can compromise navigation. |
Beta Was this translation helpful? Give feedback.
-
I'm not sure what you mean by wired here, but the behavior where Remix waits for the loader before doing the actual navigation is intentional to match browsers behavior, usually the recommendation is to add a server-side cache to your slow data if you want to reply immediately. Another option could be to rely on the useNavigation hook, that lets you know when a navigation is pending and do something, for example replace the current UI with a placeholder/skeleton UI // routes/a.tsx
export default function Component() {
let navigation = useNavigation()
if (navigation.state === "loading") {
return <LoadingUI />
}
return <ActualUIOfTheRoute />
}And if you want to customize the LoadingUI per route you can use the Our that condition in |
Beta Was this translation helpful? Give feedback.
Can't you separate what's critial from what can wait?