This is a generic example of server-side rendering of Questions and Answers

Depending on your CMS or platform, the implementation will vary. Below is a generic example using JavaScript to fetch and render the questions server-side.

// ==== Example: Server side JavaScript in a CMS Environment ====
 
// --- CMS utilities ---
var httpClient = require('HttpClient');
var cmsUtils = require('CmsUtils');
 
var URI = cmsUtils.getCurrentPageURI();
URI = '^' + URI + '$';
 
// --- Configuration ---
var baseDomain = 'https://your-domain.example.com';
var projectId = 'YOUR_PROJECT_ID';
var apiKey = 'YOUR_SECRET_KEY';
 
// --- Build the rek.ai prediction request URL ---
var predictionurl = 'https://predict.rek.ai/';
predictionurl += 'predict?p=' + encodeURIComponent(projectId);
predictionurl += '&secret=' + encodeURIComponent(apiKey);
predictionurl += '&entitytype=rekai-qna';
predictionurl += '&subtree=' + encodeURIComponent(URI);
predictionurl += '&unranked=true';
predictionurl += '&format=html';
 
// --- Main function ---
function start() {
    try {
        var requestOptions = {
            dataType: 'text',
            headers: {
                'Accept': 'text/html',
                'User-Agent': 'cms-backend-proxy',
                'Origin': baseDomain
            }
        };
 
        httpClient.get(predictionurl, requestOptions)
            .done(function (responseBody, statusCode) {
                try {
                    out.println(responseBody);
                } catch (e) {
                    out.println('Error rendering response: ' + e);
                }
            })
            .fail(function (errorMessage, status) {
                out.println('Request failed: ' + status + ' - ' + errorMessage);
            });
 
    } catch (e) {
        out.println('Unexpected error: ' + e);
    }
}
 
start();

In a front end script, you need to initialize the rek.ai question handling after the server-side rendering is done:

<script>
    __rekai.ready(function() {
        var options = {};
        var questionOptions = window.__rekai.getQuestionsOptions();
        questionOptions.serversideRendering = true;
 
        window.__rekai.addCssStylesForQuestions(questionOptions);
        window.__rekai.addEventListenersForQuestions(options, questionOptions);
    });
</script>

Add a header above the questions

To add a header above the questions, you can modify the server-side rendering code to include a header element before outputting the questions. For example, you can insert an <h2> tag before the questions are rendered:

  predictionurl += '&headertext=' + encodeURIComponent(headertext);
  predictionurl += '&headerid=' + encodeURIComponent(headerid);
  predictionurl += '&headerfontclass=' + encodeURIComponent(headerfontclass);
  predictionurl += '&headerheadinglevel=' + encodeURIComponent(headerheadinglevel);

Cache

If it is possible to cache the server-side rendered output, it is recommended to do so to improve performance and reduce load on the rek.ai servers. The caching strategy will depend on your CMS or platform capabilities.

Server side rendering for SEO and AEO Server-side in Sitevision