Dynamic rendering with PHP / Server Side code (non JS)

[benyaminl]

Hello, I come across the sample from https://www.algolia.com/doc/guides/building-search-ui/going-further/server-side-rendering/js/

Dynamic rendering is now considered a workaround instead of a recommended approach and Rendertron, the tool mentioned in this guide, is deprecated. You can use server-side rendering with React InstantSearch and Vue InstantSearch.

I do see we need to make the search page to be SEO friendly and crawlable like by Bing or Yandex (other than google that support JS rendering).

The problem I see here, It refer to a tools rendertron and don't point to anything else, which is problematic in my humble opinion.

Is there anyway to use the instantsearch.js and keep using SSR so the Crawler or others can can see the page, hydrated, and go with the page with minimum effort? Or my assumption seems to be impossible to be implemented?

Any feedback really appriciated!

InstantSearch.js Library and Dynamic rendering or Server Side Rendering

[Haroenv]

We don't have more detailed instructions as technically this isn't a straightforward solution. In a node environment you can do server-side rendering using InstantSearch.js if you create the same widgets as you would on the frontend, then call waitForResults and getInitialResults functions exposed from /lib/server. To also get the final html, you'd need to use a library like JSDOM and then extract the html and inject it into the relevant parts of the page.

An approach showing similar problem-solving can be seen in https://github.com/algolia/instantsearch/pull/5579/files

Unfortunately the situation at the end of the day is that most consumers that use InstantSearch.js also have little control over their backend, and even if we'd have a tool to pre-generate the html, they couldn't use it (think of shopify for example). They usually therefore either use eg rendertron, or assume (in most cases correctly) that client-rendered pages also get handled by crawlers.

What is your exact backend environment, and what are your exact goals? Do you have InstantSearch on multiple pages, how much control do you have over the stack?

[benyaminl]

Hello @Haroenv thank you for reaching back.

The backend is based on PHP/Drupal, but the teams that will implement this want the velocity as low as possible.

Based on your information you provide just now, I see that seems the only lowest velocity we could probably use is only by the routing parameters/query parameters state, and let the crawler able to render.

I do see that rendertron already archived by Google and in Algolia documentation also mentioning the same things.

We do have control on the environment, but as the technical things wanted from the teams are lower velocity, I need to come up with a solution that don't add too much load to the team, but still deliver the result. *for now.

[benyaminl]

@Haroenv

I'm truly sorry seem my reply got cut, we aim to implement best practice for dynamic rendering in PHP/Drupal, as our stack doesn't use Vue SSR or ReactSSR (nextjs or remix). I going through the training Algolia has for ACD (Certified Developer, and looking into this case).

After some of thinking,

I just have some idea, but I need some feedback if possible.

Seems for PHP, we can generate the HTML manually using PHP with the algolia client on server side (as the data source), that mimic the result that Algolia instantsearch.js generate right ? And when the crawler/end user support to render the page using JS, let the JS take over and replace the div.container that targeted using instantsearch.js,

Does my idea seems silly?

I already seen the JSDOM MR you shared, that mean we need to spin up a new service that also works like rendertron and send it back to PHP and inject it when sending back the page right?

Looking for your reply. Thank you so much.

[Haroenv]

I don't think that's silly, but you'll have to recreate the whole dom InstantSearch creates in php. What you can do is the simpler version of the dom so that SEO can be happy in the server. We don't have a guide for that as it involves recreating quite a lot of the InstantSearch js code in php, but it's definitely possible and avoids spinning up the servers