How to dev with prerender-data-provider?

[orangecoloured]

I decided to use prerender-data-provider to load a JSON for a specific route.
I added the <Provider value={props}> wrapper in the App component.

But when I run the app I get an error Error: The prerender-data provider expects current URL in props. This is required to give the pre-render data to the correct instance only.
And when I look at the props contents in the App component, it's {CLI_DATA: {preRenderData: {}}}.

What did I miss in the setup?

[rschristian]

Did you set --prerender?

Prerendering in dev will only run on first build, you will not get refreshed prerender data/HTML without restarting the dev server, but this will provide the prerender data that you can use in your app.

[rschristian]

But if I load localhost:8080/something, should I get the { url: '/something' }?

Yes, if you're opening that URL directly in your browser (as opposed to opening / and clicking a link to get to /something), and you prerender /something, then you should be seeing that. Are you not?

Sorry, I'm a bit confused with how the prerender provider works

Basically, prerendering will output a data file (/<route>/preact_prerender_data.js) that the provider will then request when you open the page.

Can I use the data from prerender-urls.js in dev?

Yes, but as mentioned, it will only run once. If you alter your prerender data, you'll need to restart the dev server.

[rschristian]

Maybe this demo will help: https://github.com/rschristian/preact-cli-prerender-data-provider-demo

[orangecoloured]

I don't think I'm getting proper props.
Here's a screencast. I'm refreshing the page being on /graphics but the url in the props is /.

Screen.Recording.2023-07-27.at.9.38.21.AM.mov

About the example you provided. I set up the Provider in the same way. But I don't see there the use of the hook usePrerenderData. From my understanding that's how we use the data from the provider in different routes. Is there a complete example?

[rschristian]

Here's a screencast. I'm refreshing the page being on /graphics but the url in the props is /.

That looks like you're not prerendering /graphics then.

Can you provide a reproduction? It's hard to diagnose an issue that I cannot see.

From my understanding that's how we use the data from the provider in different routes.

That's one way to use it, sure. Just need a slight modification to a route to use it:

// src/routes/home/index.js
import { usePrerenderData } from '@preact/prerender-data-provider';

const Home = (props) => {
    const [value] = usePrerenderData(props);
    ...
}

value will then have your prerender data for that route. props will come from the router, but just needs to be an object containing a URL.

Is there a complete example?

Best bet is in the CLI's test suite, here

I should also be clear: preact-cli isn't maintained. I'm the only one who's done anything with it in years, and I really don't have time to invest anymore, especially seeing as how Webpack is effectively dead these days. If you've just picked up preact-cli, I'd definitely look elsewhere (we have a Vite initializer called create-preact which may be of interest).

This area especially, prerendering and how it bleeds into dev, was never something that was really fleshed out in a great way. It's pretty rough, as seen by the fact that you'll need to run a build before running preact watch --prerender.

[orangecoloured]

Thank you for a thorough and clear answer.

Yeah, I started using preact not long ago.
Alright, seems like I'll need to update my setup and, considering the preact-cli is unlikely to be maintained, I may switch to something else.

Thank you!

[rschristian]

I'm really sorry for the hassle.

We did update the docs to point at create-preact over preact-cli rather recently, not sure if you created your project before then or something. Right now it doesn't support prerendering out of the box but we're working to set that up. You can of course set it up yourself, it's quite simple, but will probably require looking into vite-plugin-ssr.

Certainly let me know if i can be of any further help though.

[rschristian]

We should shortly have SSG support in create-preact (preactjs/create-preact#1), giving an out-of-the-box similar experience to preact-cli FWIW.

[orangecoloured]

Is there a documentation I can refer to to migrate from preact-cli to create-preact?