Usung Instantsearch.js Server-Side rendering with PHP

Open Q&A
1

Although you care more about react users and ignore those who use instantsearch.js, there are still these “old school” developers in some places :slight_smile:

In order for Google to read the content, we need to load the HTML on the Server-Side. I did something like this for this.

$client = SearchClient::create( '', '' );
$index  = $client->initIndex( 'index_name' );
$hits   = $index->search( '' );

const search = instantsearch({
  indexName: 'index_name',
  searchClient,
})

trainingsSearch.addWidgets([
  hits({
    container: '.hits',
    templates: {
      item(hit, { html, components }) {
        return html`
          <h2>${components.Highlight({ attribute: 'name', hit })}</h2>
          <p>${hit.description}</p>
        `
      },
    },
  }),
])

But there is a problem here. Because instantsearch.js replaces the first HTML that I loaded with PHP. I don’t think this is a good idea, I think there should be a feature for Server-Side rendering that doesn’t replace the first loaded content. Or maybe there is, so I need your help.