What we are trying to do is,
-
Create code components, register on plasmic and then by using those code components we will create pages on plasmic and publish them from there.
- With Nextjs apps directory and by using plasmic loader.
-
Currently everything is working fine its just pages are rendering on client side. i want them to load complete page on server side.
How we have done that,
-
We have 3 code components, A wrapper which fetches data, and other 2 components will be added as its children on plasmic which uses data fetched in the Wrapper.
- data is fetched using
usePlasmicQueryData
- data is fetched using
-
Earlier i was passing fetched data in children like this
inside Wrapper
return (
<div>
{children &&
React.Children.map(children, (child) => {
if (!React.isValidElement(child)) return child;
if (child.type === ChildOne) {
return React.cloneElement(child, {
...<child one data evaluated from fetched data>
...child.props,
});
}
if (child.type === ChildTwo)
return React.cloneElement(child, {
...<child two data evaluated from fetched data>
...child.props,
});
return React.cloneElement(child, child.props);
})}
</div>
);
now i am doing like this
inside Wrapper
return (
<div>
<DataProvider name="data-key" data={fetchedData}>
{children}
</DataProvider>
</div>
);
- and using
useSelectorin the child component for required data. - both of the methods are not working to render page completely on server side. UI is still created on client side.
What have you tried so far?
- I have tried making component
asyncand tried fetching data usingawaitthat is not letting me loading the page. If i add that component in a page then,- if i wrapped data fetching function with
React.cache, then page loads on client side. - If i remove
React.cachethen- It loads the page → loads the data server side → then again loads the page and it keeps happening again and again
- if i wrapped data fetching function with
- tried these as well. →
Relevant links: