Server Side Rendering

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 {
} 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">

					<div className="col">
						<SelectedFilters />

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(renderToString(<App

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: