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
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>
);
and using useSelector in 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 async and tried fetching data using await that 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.cache then
It loads the page → loads the data server side → then again loads the page and it keeps happening again and again
We will soon be launching a new way to fetch data that is compatible with Next.js app router and React Server Components. If you’d like to be a guinea pig, we can let you have early access and give us feedback on it.
I’m very sorry for the delay, but we are still finalizing some changes to make sure you have a good experience. My original estimate was a quite a bit optimistic as we’ve uncovered some more details that need to be addressed. I think end of next week we can give you something to test out.
Quick follow-up question: does this new approach allow registering server components as code components? And relatedly — does it reduce the client JS bundle, or is it primarily a DX improvement for data fetching?
A server-renderable plasmic loader would be absolutely fantastic. Would greatly reduce setup complexity for next.js. Is this something that’s on the roadmap or is it a very big technical challenge?
@lokesh_mudgal@wytze_sligting Hi, we are finishing up a few minor things before the release. I will send an update to Slack and post on the forum announcements!
App router SSR is possible now, but the APIs are still subject to change. We’ll release an official example once everything is stabilized, but if you want to try it out now you can take a look at this test project, and specifically the catchall page here.
In order to test the new data queries & hostless functions, you need to append a serverQueries=true query param to your project when opening in Plasmic Studio, for example: https://studio.plasmic.app/projects/<project_id>?serverQueries=true
Once it’s released, the unstable__ prefixes will be removed from the library functions.