Skip to main content

Server side rendering

Configure Apollo Client for SSR#

Searchkit is able to do server side rendering with a few changes. Due to elastic-ui isn't SSR friendly, you will need to build your own components to do SSR. The first part is to configure apollo to be able to SSR. See Apollo Server side rendering guide. Take note on the uri, you will need it to be an absolute path instead of a relative path.

API URI#

You need to update the URI to one that can be universally accessed on both the client side and server side. Code below is an example of apollo Provider configuration where it needs the uri path to the GraphQL api.

const client = new ApolloClient({
ssrMode: true,
link: createHttpLink({
// uri: '/api/graphql', (example only work on client side)
// url: 'http://localhost:3000/api/graphql, (localhost development to test)
uri: 'https://my-domain/api/graphql',
credentials: 'same-origin'
}),
cache
})
const App = ({ children }) => {
return (
<ApolloProvider client={client}>
{children}
</ApolloProvider>
)
}

See Apollo's SSR docs for more information.

Searchkit Routing Configuration#

Then you must enable url synchronization.

An example of the configuration can be seen below. You can see it in action here

SEO#

See SEO tips for more information on how SSR and other features can improve SEO on your search.

Example#

import { useQuery, gql } from '@apollo/client'
import { withSearchkit, useSearchkitVariables, withSearchkitRouting } from '@searchkit/client'
import withApollo from '../hocs/withApollo'
import { getDataFromTree } from "@apollo/client/react/ssr";
const Search = () => {
const query = gql`
query resultSet($query: String) {
results(query: $query) {
summary {
total
}
hits {
page {
total
totalPages
pageNumber
from
size
}
sortedBy
items {
... on ResultHit {
id
fields {
title
writers
actors
plot
poster
}
}
}
}
}
}
`
const variables = useSearchkitVariables()
const { previousData, data = previousData, loading } = useQuery(QUERY, { variables })
if (data) // return the result only once data has been returned
return (
<div>
<h2>{data?.results?.summary?.total} Results</h2>
{data.results?.hits.items.map((hit) => {
return (
<div key={hit.id}>
<h4>{hit.fields.title}</h4>
<p>{hit.fields.plot}</p>
</div>
)
})}
</div>
)
else {
return null
}
}
export default withApollo(withSearchkit(withSearchkitRouting(Search)), { getDataFromTree })