docs(react): fix react-instantsearch SSR example and improve SSR docs (…

…#913) * docs(react): fix react-instantsearch SSR example and improve SSR docs * fix(next): revert naming changes
algolia · Feb 13, 2018 · ebb10a3 · ebb10a3
1 parent 4656858
commit ebb10a3
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 17 deletions.
diff --git a/docgen/src/guide/Server-side_rendering.md b/docgen/src/guide/Server-side_rendering.md
@@ -25,7 +25,7 @@ When called, `createInstantSearch` returns:
 * A dedicated [`<InstantSearch>`](widgets/<InstantSearch>.html) component accepting a `resultsState` prop containing the Algolia results.
 * A `findResultsState` function to retrieve a `resultsState`.
 
-The server-side reference is available in the [API docs](server-side-rendering/).
+More details are available in the [server-side API docs](server-side-rendering/).
 
 We split this guide in three parts:
 - App.js is the server and browser shared main React component from your application
@@ -52,7 +52,7 @@ class App extends Component {
         apiKey="apiKey"
         indexName="indexName"
         searchState={this.props.searchState}
-        resultsState={this.props.resultsState || {}}
+        resultsState={this.props.resultsState}
       >
         <SearchBox />
         <Hits />
@@ -82,7 +82,7 @@ import { App, findResultsState } from './app.js';
 import { renderToString } from 'react-dom/server';
 
 const server = createServer((req, res) => {
-  const searchState = {searchState: {query: 'chair'}};
+  const searchState = {query: 'chair'};
   const resultsState = await findResultsState(App, {searchState});
   const appInitialState = {searchState, resultsState}
   const appAsString = renderToString(<App {...appInitialState} />);

diff --git a/packages/react-instantsearch/examples/next-app/pages/index.js b/packages/react-instantsearch/examples/next-app/pages/index.js
@@ -17,15 +17,14 @@ export default class extends React.Component {
     searchState: PropTypes.object,
   };
 
-  constructor(props) {
-    super(props);
-    this.onSearchStateChange = this.onSearchStateChange.bind(this);
-  }
+  state = {
+    searchState: this.props.searchState,
+  };
 
   /*
      nextjs params.query doesn't handle nested objects
      once it does, params.query could be used directly here, but also inside the constructor
-     to initialize the searchState. 
+     to initialize the searchState.
   */
   static async getInitialProps(params) {
     const searchState = params.asPath.includes('?')
@@ -60,13 +59,9 @@ export default class extends React.Component {
         <Head title="Home" />
         <div>
           <App
+            searchState={this.state.searchState}
             resultsState={this.props.resultsState}
             onSearchStateChange={this.onSearchStateChange}
-            searchState={
-              this.state && this.state.searchState
-                ? this.state.searchState
-                : this.props.searchState
-            }
             createURL={createURL}
           />
         </div>

diff --git a/packages/react-instantsearch/src/core/findResultsState.js b/packages/react-instantsearch/src/core/findResultsState.js
@@ -9,16 +9,16 @@
  * component.
  * @name findResultsState
  * @kind server-side-rendering
- * @param {Component} App - You `<App>` component.
- * @param {object} props - Props to forward to the dedicated `<InstantSearch>` component. Use it to pass a `searchState` such as `{searchState: {query: 'chair'}}` when
- * dealing with [URL routing](guide/Routing.html)
+ * @param {Component} App - Your top level `<App>` component.
+ * @param {object} props - Props passed to `<App>` for computing `resultsState`. Use it to pass a your initial `searchState` such as `{searchState: {query: 'chair'}}`. You'll typically do this when
+ * dealing with [URL routing](guide/Routing.html) and pulling the initial search query from the URL. Make sure `<App>` passes the initial search state prop on to the `<InstantSearch>` component.
  * @returns {Promise} - Resolved with a `resultsState` object.
  */
 export function findResultsState() {}
 
 /* eslint valid-jsdoc: 0 */
 /**
- * The `createInstantSearch` let's you create a dedicated, server-side compatible, `<InstantSearch>` component along with a `findResultsState` function tied to this component.
+ * The `createInstantSearch` let's you create a server-side compatible `<InstantSearch>` component along with a `findResultsState` function tied to this component. You'll use this component on both the server and client.
  * @name createInstantSearch
  * @kind server-side-rendering
  * @returns {{InstantSearch: Component, findResultsState: function}} - returns {InstantSearch: Component, findResultsState: function}