React-instantsearch: Error: Error serializing `.resultsState.state` returned from `getServerSideProps` in "/search".

[francisrod01]

Describe the bug 🐛

This is also related to: #2958 and #2949

I can't reproduce the Next.js SSR example with getStaticProps or getServerSideProps instead of getInitialProps. It won't work. I only turn the getInitialProps into getServerSideProps:

I have 2 debugs into the getServerSideProps functions which means:

export const getServerSideProps = async ({ req, res, query, ...restProps }) => {
  console.log('[SSR] get server-side props: ', req.url, query, restProps);

  const searchState = pathToSearchState(restProps.asPath);
  const resultsState = await findResultsState(SearchApp, {
    searchClient,
    indexName: '...',
    searchState,
  });

... 

console.log('[SSR] search page: ', searchState, resultsState);

and it doesn't work and show the following bug:

event - compiled successfully
[SSR] get server-side props:  /search?query=fras&page=1&configure%5BhitsPerPage%5D=12 { query: 'fras', page: '1', 'configure[hitsPerPage]': '12' } {}

[SSR] search page:  { query: 'fras', page: '1', configure: { hitsPerPage: '12' } } { rawResults: [ { hits: [], nbHits: 0, nbPages: 0, processingtimeMS: 0 } ],
  state:
   SearchParameters {
     facets: [],
     disjunctiveFacets: [],
     hierarchicalFacets: [],
     facetsRefinements: {},
     facetsExcludes: {},
     disjunctiveFacetsRefinements: {},
     numericRefinements: {},
     tagRefinements: [],
     hierarchicalFacetsRefinements: {},
     index: 'customers',
     highlightPreTag: '<ais-highlight-0000000000>',
     highlightPostTag: '</ais-highlight-0000000000>' } }
Error: Error serializing `.resultsState.state` returned from `getServerSideProps` in "/search".
Reason: `object` ("[object Object]") cannot be serialized as JSON. Please only return JSON serializable data types.
    at isSerializable (/home/paneladm/projects/paneladm-dev/medina-app/node_modules/next/dist/lib/is-serializable-props.js:9:7)
    at Object.entries.every (/home/paneladm/projects/paneladm-dev/medina-app/node_modules/next/dist/lib/is-serializable-props.js:7:503)
    at Array.every (<anonymous>)
    at isSerializable (/home/paneladm/projects/paneladm-dev/medina-app/node_modules/next/dist/lib/is-serializable-props.js:7:304)
    at Object.entries.every (/home/paneladm/projects/paneladm-dev/medina-app/node_modules/next/dist/lib/is-serializable-props.js:7:503)
    at Array.every (<anonymous>)
    at isSerializable (/home/paneladm/projects/paneladm-dev/medina-app/node_modules/next/dist/lib/is-serializable-props.js:7:304)
    at isSerializableProps (/home/paneladm/projects/paneladm-dev/medina-app/node_modules/next/dist/lib/is-serializable-props.js:9:219)
    at renderToHTML (/home/paneladm/projects/paneladm-dev/medina-app/node_modules/next/dist/next-server/server/render.js:37:395)

A live example helps a lot! We have a simple online template for you to use for your explanations:

https://github.com/algolia/react-instantsearch/blob/master/examples/next/pages/index.js

Expected behavior 💭

A result without any serialize errors like in the getInitialProps example:

Environment:

• OS: Linux debian 4.9.0-13-amd64 #1 SMP Debian 4.9.228-1 (2020-07-05) x86_64 GNU/Linux
• Browser: Google Chrome - Version 84.0.4147.105 (Official Build) (64-bit)
  
  
  
  • node: 10.20.1
  
  
  • npm: 6.14.4
  
  
  • react-instantsearch-dom: 6.6.0
  
  
  • react: 16.13.1
  
  
  • react-dom: 16.13.1
  
  
  • next: 9.5.0
  
  

Additional context

Add any other context about the problem here.

[Haroenv]

This seems related to the SearchResults class. It's serialisable to JSON, but Next.js might not do it by default. Does the situation change if you call JSON.parse(JSON.stringify(resultsState))? If that's the case, we need to use the toJson method ourselves directly

[francisrod01]

Hey @Haroenv, thanks for reaching out!
Yes, I don't see any errors after doing a parse in this way.

But I continue fetching via browser also. Maybe I'm not following the docs appropriately (but it's another case).

[Haroenv]

Yes, it's expected that the results are also fetched frontend once the query changes. Do you have a sandbox with unexpected behaviour?

[francisrod01]

Not unexpected behaviour but I thought the first query might be done on the server-side instead, in case I refresh the browser.

[Haroenv]

Ah, that's unexpected, the first query on the browser is supposed to already be cached, and that's the case with our demo, if that's not the case for your project, could you make an example with that please?

[francisrod01]

Maybe is because the mock request I'm doing for empty query. I don't know the cause.
Here's a codesandbox: https://codesandbox.io/s/nextjs-instantsearch-ohphp
And here's the doc I followed: algolia.com - building search UI - mocking-a-search-request

[Haroenv]

Your application on codesandbox does not seem to include the code from the guide, are you saying it's solved or not? thanks

[francisrod01]

About the error "yes". For what you just asked about the SSR "no".
I'm going to ask separately. Thanks for helping me. :)