Server Side Rendering enables us to pre-render the results on the server enabling better SEO for the app, and faster delivery of relevant results on an initial render to the users.

Reactivesearch internally runs on a redux store. With Server Side Rendering, you can handle the intial render when a user (or search engine crawler) first requests your app. To achieve the relevant results on an initial render, we need to pre-populate the redux store of ReactiveSearch.

ReactiveSearch offers SSR via initReactivesearch() method which takes three params:

  • an array of all components (with their set of props) we wish to render at the server side
  • url params
  • base component (reactivebase) props


This is a three-steps process:

First, import initReactivesearch:

import initReactivesearch from '@appbaseio/reactivesearch/lib/server';

Then, evaluate the initial state:

const initialState = await initReactivesearch(...);

and finally, pass the computed initial state to ReactiveBase component.

<ReactiveBase {...props} initialState={initialState}>


We will build a simple booksearch app with next.js as an example to get started with:

Note that you can also use react-dom/server to implement SSR. We are using next.js here for simplicity.


Set up next.js - Refer docs here


Use the package manager of your choice to install reactivesearch:

yarn add @appbaseio/reactivesearch

Since reactivesearch internally uses emotion-js for styling, we will also need to install emotion-server:

yarn add emotion-server

We will also utilise babel-plugin-direct-import and babel-plugin-emotion primarily to generate an optimised build for our app. So make sure that you install:

yarn add -D babel-cli babel-core babel-loader babel-plugin-direct-import babel-plugin-emotion babel-plugin-transform-class-properties babel-plugin-transform-object-rest-spread babel-preset-env babel-preset-next babel-preset-react


Create .babelrc with the following configuration to generate an optimised build for your react app:

    "presets": ["next/babel"],
    "plugins": [
                "name": "@appbaseio/reactivesearch",
                "indexFile": "@appbaseio/reactivesearch/lib/"

Create an index.js file in the pages directory:

import initReactivesearch from '@appbaseio/reactivesearch/lib/server';

and we will also import the other relevant component from the reactivesearch library:

import { ReactiveBase, DataSearch, SelectedFilters, ReactiveList } from '@appbaseio/reactivesearch';

Set the props for all the components we are going to use:

const settings = {
    app: 'good-books-ds',
    credentials: 'nY6NNTZZ6:27b76b9f-18ea-456c-bc5e-3a5263ebc63d',

const dataSearchProps = {
    dataField: ['original_title', ''],
    categoryField: 'authors.raw',
    componentId: 'BookSensor',
    defaultSelected: 'Harry',

const reactiveListProps = {
    componentId: 'SearchResult',
    dataField: 'original_title.raw',
    className: 'result-list-container',
    from: 0,
    size: 5,
    renderItem: data => <BookCard key={data._id} data={data} />,
    react: {
        and: ['BookSensor'],

Next step is to evaluate the initial state in the getInitialProps lifecycle method:

export default class Main extends Component {
    static async getInitialProps() {
        return {
            store: await initReactivesearch(
                        source: DataSearch,
                        source: ReactiveList,

    render() {
        return (
            <ReactiveBase {...settings} initialState={}>
                <div className="row">
                    <div className="col">
                        <DataSearch {...dataSearchProps} />

                    <div className="col">
                        <SelectedFilters />
                        <ReactiveList {...reactiveListProps} />

Since ReactiveSearch runs on emotion-js internally, we will need to extract and inject styles properly by creating a _document.js:

import React from 'react';
import Document, { Head, Main, NextScript } from 'next/document';
import { extractCritical } from 'emotion-server';

export default class MyDocument extends Document {
    static getInitialProps({ renderPage }) {
        // for emotion-js
        const page = renderPage();
        const styles = extractCritical(page.html);
        return {, ...styles };

    constructor(props) {
        // for emotion-js
        const { __NEXT_DATA__, ids } = props;
        if (ids) {
            __NEXT_DATA__.ids = ids;

    render() {
        return (
            <html lang="en">
                    <link rel="stylesheet" href="/_next/static/style.css" />
                    <meta charSet="utf-8" />
                    <meta name="viewport" content="initial-scale=1.0, width=device-width" />
                    {/* for emotion-js */}
                    <style dangerouslySetInnerHTML={{ __html: this.props.css }} />
                    <Main />
                    <NextScript />

Finally, you can now run the dev server and catch the SSR in action.

Using with react-dom

You can also use ReactiveSearch with react-dom/server. Check out the example app for a detailed setup.

The concept remains the same, after gettting a request, we'll use initReactiveSearch to compute the results and populate ReactiveSearch's redux store. We'll use renderToString from react-dom/server and renderStylesToString from emotion-server to generate a html paint for our app. For example:

const html = renderStylesToString(

We'll send this markup along with the computed store object so that it can be pre-loaded in client side while hydrating the app.

Example apps

We've covered all the existing components as an example app here: