Is it possible to use all ReactiveComponents with SSR and nextjs?

[gionaico]

Discussed in https://github.com/appbaseio/reactivesearch/discussions/1861

^{Originally posted by **gionaico** February 3, 2022} ## Library Version: - @appbaseio/reactivesearch: 3.28.0 - next: 12.0.7 - react: 17.0.2 ## Describe the problem I am trying to initialize the state with initReactivesearch but I am not getting any data as a result of my aggregation from my server. I need the server to return my page with the aggregation results written. ## Code ```js const defaulReactiveBaseProps = { app: "myindex", url: "myHost", credentials: "user:password" } const defaultCategorySearchProps = { componentId: "myId", URLParams: false, showFilter: true, showClear: true, customQuery: function (props: any) { return {...myQuery}; }, defaultQuery: function () { return { _source: { includes: [...], }, query: { ... }, aggs: { ... }, }; } } const Main = ({ store }) => { {({ loading, error, rawData, aggregations, setQuery, value }) => { return ( <> {JSON.stringify( { loading, error, rawData, aggregations, setQuery, value }, null, 2 )} ); }} } Main.getInitialProps = async (context: any) => { const store = await initReactivesearch( [ { ...defaultCategorySearchProps, source: ReactiveComponent, }, ], null, defaulReactiveBaseProps ); /* Result of the store is store: { components: [ 'myId' ], dependencyTree: { }, queryList: { myId: [Object] }, queryOptions: { }, selectedValues: { myId: [Object] }, internalValues: {}, props: { myId: [Object] }, customQueries: { myId: [Object] }, defaultQueries: { myId: [Object] }, queryLog: { }, hits: { }, aggregations: { } } */ return { store }; }; ``` I am following this [guide](https://docs.appbase.io/docs/reactivesearch/v3/advanced/ssr/) and it only works with some component but not others. I have tried some [SSR examples](https://github.com/appbaseio/reactivesearch/tree/dev/packages/web/examples/ssr) and these are the results. - __It works__ - [SingleList](https://opensource.appbase.io/reactive-manual/list-components/singlelist.html) - [Example code](https://github.com/appbaseio/reactivesearch/blob/dev/packages/web/examples/ssr/pages/singlelist.js) - Store result ```js store: { components: [ 'BookSensor', 'SearchResult' ], dependencyTree: { BookSensor: [Object], SearchResult: [Object] }, queryList: { BookSensor: null, SearchResult__internal: undefined }, queryOptions: { BookSensor__internal: [Object], SearchResult: [Object] }, selectedValues: { BookSensor: [Object], SearchResult: [Object] }, internalValues: {}, props: { BookSensor: [Object], SearchResult: [Object] }, customQueries: {}, defaultQueries: {}, queryLog: { BookSensor: [Object], SearchResult: [Object] }, hits: { BookSensor: [Object], SearchResult: [Object] }, aggregations: { BookSensor: [Object] }, promotedResults: {}, customData: {}, rawData: { BookSensor: [Object], SearchResult: [Object] } } ``` - [MultiList](https://opensource.appbase.io/reactive-manual/list-components/multilist.html) - [Example code](https://github.com/appbaseio/reactivesearch/blob/dev/packages/web/examples/ssr/pages/multilist.js) - Store result ```js store: { components: [ 'BookSensor', 'SearchResult' ], dependencyTree: { BookSensor: [Object], SearchResult: [Object] }, queryList: { BookSensor: [Object], SearchResult__internal: undefined }, queryOptions: { BookSensor__internal: [Object], SearchResult: [Object] }, selectedValues: { BookSensor: [Object], SearchResult: [Object] }, internalValues: {}, props: { BookSensor: [Object], SearchResult: [Object] }, customQueries: {}, defaultQueries: {}, queryLog: { BookSensor: [Object], SearchResult: [Object] }, hits: { BookSensor: [Object], SearchResult: [Object] }, aggregations: { BookSensor: [Object] }, promotedResults: {}, customData: {}, rawData: { BookSensor: [Object], SearchResult: [Object] } } ``` - __It does not work__ - [CategorySearch](https://opensource.appbase.io/reactive-manual/search-components/categorysearch.html) - [Example code](https://github.com/appbaseio/reactivesearch/blob/dev/packages/web/examples/ssr/pages/categorysearch.js) - Store result ```js store: { components: [ 'BookSensor', 'SearchResult' ], dependencyTree: { SearchResult: [Object] }, queryList: { BookSensor: null, SearchResult__internal: undefined }, queryOptions: { SearchResult: [Object] }, selectedValues: { BookSensor: [Object], SearchResult: [Object] }, internalValues: {}, props: { BookSensor: [Object], SearchResult: [Object] }, customQueries: {}, defaultQueries: {}, queryLog: { SearchResult: [Object] }, hits: { SearchResult: [Object] }, aggregations: {}, promotedResults: {}, customData: {}, rawData: { SearchResult: [Object] } } ``` - [MultiDropdownList](https://opensource.appbase.io/reactive-manual/list-components/multidropdownlist.html) - [Example code](https://github.com/appbaseio/reactivesearch/blob/dev/packages/web/examples/ssr/pages/multidropdownlist.js) - Store result ```js store: { components: [ 'BookSensor', 'SearchResult' ], dependencyTree: { SearchResult: [Object] }, queryList: { BookSensor: null, SearchResult__internal: undefined }, queryOptions: { SearchResult: [Object] }, selectedValues: { BookSensor: [Object], SearchResult: [Object] }, internalValues: {}, props: { BookSensor: [Object], SearchResult: [Object] }, customQueries: {}, defaultQueries: {}, queryLog: { SearchResult: [Object] }, hits: { SearchResult: [Object] }, aggregations: {}, promotedResults: {}, customData: {}, rawData: { SearchResult: [Object] } } ``` With some components I get a result in the aggregations field but with others I don't. Maybe this is the normal behavior but I would like to understand why in some components I get results (aggregations) and in others I don't. I have been studying the [library](https://github.com/appbaseio/reactivesearch/blob/next/packages/web/src/server/index.js) and I have seen that some things are restricted to a list of components: ```js // lines 18 to 28 var componentsWithHighlightQuery = [_constants.componentTypes.dataSearch, _constants.componentTypes.categorySearch]; var componentsWithOptions = [_constants.componentTypes.reactiveList, _constants.componentTypes.reactiveMap, _constants.componentTypes.singleList, _constants.componentTypes.multiList, _constants.componentTypes.tagCloud].concat(componentsWithHighlightQuery); /** componentsWithOptions = [ 'REACTIVELIST', 'REACTIVE_MAP', 'SINGLELIST', 'MULTILIST', 'TAGCLOUD', 'DATASEARCH', 'CATEGORYSEARCH' ] */ ``` In line [182](https://github.com/appbaseio/reactivesearch/blob/next/packages/web/src/server/index.js#LC182) a filter is made and allows only some components.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.