feat(ssr): update the SSR API (#2555)

* feat(ssr): only expose findResultsState [PART-1] (#2536)

* feat(ssr): hydrate client [PART-2] (#2537)

* feat(ssr): update usage of the API [PART-3]

examples/server-side-rendering/src/App.js

@@ -0,0 +1,51 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import {
+  InstantSearch,
+  RefinementList,
+  SearchBox,
+  Hits,
+  Configure,
+} from 'react-instantsearch-dom';
+
+class App extends Component {
+  static propTypes = {
+    indexName: PropTypes.string.isRequired,
+    searchClient: PropTypes.object.isRequired,
+    searchState: PropTypes.object,
+    resultsState: PropTypes.oneOfType([
+      PropTypes.arrayOf(PropTypes.object),
+      PropTypes.object,
+    ]),
+  };
+
+  static defaultProps = {
+    searchState: {},
+  };
+
+  state = {
+    searchState: this.props.searchState,
+  };
+
+  onSearchStateChange = nextSearchState =>
+    this.setState({ searchState: nextSearchState });
+
+  render() {
+    const { searchState } = this.state;
+
+    return (
+      <InstantSearch
+        {...this.props}
+        searchState={searchState}
+        onSearchStateChange={this.onSearchStateChange}
+      >
+        <Configure hitsPerPage={3} />
+        <SearchBox />
+        <RefinementList attribute="brand" />
+        <Hits />
+      </InstantSearch>
+    );
+  }
+}
+
+export default App;

examples/server-side-rendering/src/app/index.test.js → examples/server-side-rendering/src/App.test.js

@@ -1,10 +1,17 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
-import { App } from './index';
+import App from './App';
 
 describe('Server-side rendering recipes', () => {
   it('App renders without crashing', () => {
-    const component = renderer.create(<App />);
+    const props = {
+      indexName: 'index',
+      searchClient: {
+        search() {},
+      },
+    };
+
+    const component = renderer.create(<App {...props} />);
 
     expect(component.toJSON()).toMatchSnapshot();
   });

examples/server-side-rendering/src/app/__snapshots__/index.test.js.snap → examples/server-side-rendering/src/__snapshots__/App.test.js.snap

@@ -66,15 +66,15 @@ exports[`Server-side rendering recipes App renders without crashing 1`] = `
       </button>
     </form>
   </div>
+  <div
+    className="ais-RefinementList ais-RefinementList--noRefinement"
+  />
   <div
     className="ais-Hits"
   >
     <ul
       className="ais-Hits-list"
     />
   </div>
-  <div
-    className="ais-RefinementList ais-RefinementList--noRefinement"
-  />
 </div>
 `;

examples/server-side-rendering/src/browser.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { hydrate } from 'react-dom';
+import { createApp } from './createApp';
+
+const { App, props } = createApp();
+
+const __APP_INITIAL_STATE__ = window.__APP_INITIAL_STATE__;
+
+delete window.__APP_INITIAL_STATE__;
+
+hydrate(
+  <App {...props} {...__APP_INITIAL_STATE__} />,
+  document.getElementById('root')
+);

examples/server-side-rendering/src/createApp.js

@@ -0,0 +1,22 @@
+import algoliasearch from 'algoliasearch/lite';
+import App from './App';
+
+export const createApp = () => {
+  const indexName = 'instant_search';
+  const searchClient = algoliasearch(
+    'latency',
+    '6be0576ff61c053d5f9a3225e2a90f76'
+  );
+
+  const props = {
+    indexName,
+    searchClient,
+  };
+
+  return {
+    App,
+    props,
+  };
+};
+
+export default App;

examples/server-side-rendering/src/server.js

@@ -2,29 +2,47 @@ import { join } from 'path';
 import express from 'express';
 import React from 'react';
 import { renderToString } from 'react-dom/server';
-import { App, findResultsState } from './app';
+import { findResultsState } from 'react-instantsearch-dom/server';
+import { createApp } from './createApp';
 import template from './template';
 
 const server = express();
 
 server.use('/assets', express.static(join(__dirname, 'assets')));
 
-server.get('/', async (req, res) => {
-  const resultsState = await findResultsState(App);
-  const initialState = { resultsState };
-  const appString = renderToString(<App {...initialState} />);
+server.get('/', async (_, res) => {
+  const { App, props } = createApp();
+
+  const searchState = {
+    query: 'iPhone',
+    page: 5,
+    refinementList: {
+      brand: ['Apple'],
+    },
+  };
+
+  const resultsState = await findResultsState(App, {
+    ...props,
+    searchState,
+  });
+
+  const initialState = {
+    searchState,
+    resultsState,
+  };
+
+  const plainHTML = renderToString(<App {...props} {...initialState} />);
 
   res.send(
     template({
-      body: appString,
+      body: plainHTML,
       title: 'Hello World from the server',
       initialState: JSON.stringify(initialState),
     })
   );
 });
 
-server.listen(8080);
-
-/* eslint-disable no-console */
-console.log('listening on 8080');
-/* eslint-enable no-console */
+server.listen(8080, () => {
+  // eslint-disable-next-line no-console
+  console.log('Listening on: http://localhost:8080');
+});

examples/server-side-rendering/webpack.config.js

@@ -39,7 +39,7 @@ module.exports = [
   },
   {
     mode: 'development',
-    entry: ['@babel/polyfill', './src/app/browser.js'],
+    entry: ['babel-polyfill', './src/browser.js'],
     output: {
       path: path.join(__dirname, 'dist/assets'),
       publicPath: '/',

package.json

@@ -131,7 +131,7 @@
     },
     {
       "path": "packages/react-instantsearch/dist/umd/Connectors.min.js",
-      "maxSize": "41 kB"
+      "maxSize": "41.25 kB"
     },
     {
       "path": "packages/react-instantsearch/dist/umd/Dom.min.js",
@@ -143,7 +143,7 @@
     },
     {
       "path": "packages/react-instantsearch-dom/dist/umd/ReactInstantSearchDOM.min.js",
-      "maxSize": "53 kB"
+      "maxSize": "53.25 kB"
     },
     {
       "path": "packages/react-instantsearch-dom-maps/dist/umd/ReactInstantSearchDOMMaps.min.js",