prerender urls for dynamic routes

[vorobey]

trafficstars

Hello guys. I'm trying to create prerender-urls with some simple metadata for routes in my website, but looks like it's impossible now.

My prerender-urls.js looks like:

module.exports = function() {
  return [
    {
      url: "/",
      title: "Main page"
    },
    {
      url: "/catalog/:id",
      title: "Catalogue"
    }
  ];
};

But it is not working. My route in application also defined for path /catalog/:id. If i replace :id with some existing id for my catalog page, for example, 3031 it works as expected. How can I achieve this with preact-cli for dynamic urls? Thank you.

[ForsakenHarmony]

I'm not entirely sure what you'd expect preact-cli to prerender if it doesn't know which data to take

You can make the function async and fetch the data for specific ids you want to prerender

[vorobey]

Maybe I've chosen wrong tool for my goals. I just need to inject to template some custom text for meta tags (title, description, etc)

[vorobey]

I can use preact-helmet for this, but it is worked only for client-side rendering

[fagyikaa]

I would expect preact to prerender what it can so like a page skeleton? Dynamic content can be fetched in useEffect later... The way of prerender.js using fetch is only a semi-solution as you always have to build and deploy if the data set of ids changes.. E.g. if you have a cms how will you serve dynamic posts? It would be obvious to simply ignore these pages from prerendering and render them client side but then how can you reach those pages directly (due to SEO e.g.)? If you are not prerender something then enabling --single flag for sirv will result in serving the home page.

I tried to solve the porblem by set into prerender-urls "/catalog/:id" then set up an nginx proxy which would forward requests to that route but i got back a skeleton with only prerender data json in body so not quite the result i was looking forward.

[c01nd01r]

Hey! My case maybe not related, but looks similar.

Initial state: I have this url's in my app:

/
/check/
/check/:id

I build app with prerender /, /receipt/ urls and then go to /check/:id. At the first thing what I see - the home page (/) flickering (different layout instead of target /check/:id) and next moment, client side JS replaced content on page to /check/:id layout.

In next step, I created additional static route - /check/prerender in my prerender-urls.js. Static route component for /check/prerender just contains Loading... text. Next, I created location /check/:id directive for Nginx config:

location ~ ^(/check/[^/]+)   {
  try_files $uri $uri/ /check/prerender/index.html;
}

And now, when I go to /check/<some-id> in browser, first I see static HTML with Loading... text from prerendered build/check/prerender/index.html file and then client side JS run fetchCheck(<some-id>) from useEffect hook and update component.

It might not be flexible and tricky, but for the first time it help me to avoid flickering of the homepage. p.s. sorry for my English.

[prateekbh]

@c01nd01r your shall be addressed in the next release as we now fallback on 200.html which is a blank page so the home page will not flicker on these routes anymore. instead we'll start with a blank page annd then render the actual route

[fagyikaa]

Hey! My case maybe not related, but looks similar.

Initial state: I have this url's in my app:

/
/check/
/check/:id

I build app with prerender /, /receipt/ urls and then go to /check/:id. At the first thing what I see - the home page (/) flickering (different layout instead of target /check/:id) and next moment, client side JS replaced content on page to /check/:id layout.

In next step, I created additional static route - /check/prerender in my prerender-urls.js. Static route component for /check/prerender just contains Loading... text. Next, I created location /check/:id directive for Nginx config:

location ~ ^(/check/[^/]+)   {
  try_files $uri $uri/ /check/prerender/index.html;
}

And now, when I go to /check/<some-id> in browser, first I see static HTML with Loading... text from prerendered build/check/prerender/index.html file and then client side JS run fetchCheck(<some-id>) from useEffect hook and update component.

It might not be flexible and tricky, but for the first time it help me to avoid flickering of the homepage. p.s. sorry for my English.

I went on with this solution as well but it's a pain in the ass to setup an nginx proxy just because of this and also hacky to add a fake url just to render. Of course we could also create a http server with express or so instead of using sirv but would be nice to handle this usecase (which is not an edge case nor unusual usecase i believe).

[saurabhck12]

I am also trying prerender urls for dynamic routes & I also want to use the data defined in prerender-urls.js

const data = ["Shiba", "Golden", "Husky"];

module.exports = function() {
  return [
    {
      url: "/",
      title: "Home",
      data
    },
    {
      url: "/home",
      title: "Home",
      data
    },
    {
      url: "/profile",
      title: "Profile",
      data
    },
    {
      url: "/profile/:id",
      title: "User ID"
    }
  ];
};

Can someone please guide me on how to achieve this?

[rschristian]

@saurabhck12 What are you trying to achieve?

If your profile page relies on having a user ID, then preact-cli can't prerender the page as your prerender data hasn't provided an ID. The best really you can do is prerender a skeleton of the page by handling the situation in which no user ID has been provided gracefully, though you'd then need to do some nginx/web server shenanigans (as mentioned above) for full support.

[saurabhck12]

@saurabhck12 What are you trying to achieve?

If your profile page relies on having a user ID, then preact-cli can't prerender the page as your prerender data hasn't provided an ID. The best really you can do is prerender a skeleton of the page by handling the situation in which no user ID has been provided gracefully, though you'd then need to do some nginx/web server shenanigans (as mentioned above) for full support.

@rschristian Thanks for quick response. I actually have no idea about how to setup nginx/web server. Do you have any examples or demo setup I can follow through?

[rschristian]

I do not. As I said though, above there's some discussion on how you may set this up.

Config depends heavily on your hosting method of choice.

[saurabhck12]

Okay. I have seen prerender-data-provider. Don't we have documentation for it?

[rschristian]

I think this is all we have really: https://preactjs.com/guide/v10/cli/pre-rendering#using-preactprerender-data-provider

Alternatively, can take a peek at this test subject: https://github.com/preactjs/preact-cli/tree/master/packages/cli/tests/subjects/multiple-prerendering-with-provider

[saurabhck12]

Thanks @rschristian. This is helpful.