Hi there, first of all I'm really glad to be using Prismic for my new project.
I've encountered my first problem at the beginning of the week and wish to share it with the community.
I've got Slices that need data from a third party (an API). When not in the simulator my "server slices" work perfectly fine. But in the simulator it does not work : the slice doesn't load in the simulator (Fun fact : the client slices do not work either in the simulator as soon as I import the server slice).
I've started to investigate and here is what I've found so far :
slice-simulator/page.tsx
'use client';
/**
* Client component because the <SliceSimulator /> comp listens
* to event emitted by SliceMachine to udpate the data of the slice
*/
import { SliceZone } from '@prismicio/react';
import { SliceSimulator } from '@slicemachine/adapter-next/simulator';
import { components } from '@/slices/client-slices';
export default function SliceSimulatorPage() {
return (
<SliceSimulator
sliceZone={(props) => <SliceZone {...props} components={components} />}
/>
);
}
By design, a client component cannot render server components if they're not passed as children of the said client component.
So now i'm locked.
As a "mitigation solution" i've created a copy of slices/index.ts file called slices/client-slices.ts excluding server components in order to still be able to use the SliceSimulator with my other Slices.
I know I could create API routes providing the data I need for my server components and retrieve it with useEffect in order to keep my slices "client", but that's not something I want to do because it would mean using bad pattern in order to make a dev-tool work, and I'm not found of that.
Aditional information :
package.json
{
"dependencies": {
"@prismicio/client": "latest",
"@prismicio/next": "latest",
"@prismicio/react": "latest",
"next": "^14.0.4",
},
"devDependencies": {
"@slicemachine/adapter-next": "latest",
}
}
Kind regards,
Julien.
