How to implement SSR with Next.js pages router with third party providers

[branislav-brincko]

I'm struggling with implementing SSR in Next.js using the Pages Router. Specifically, I don’t understand how to avoid errors when rendering a page with getServerSideProps when the page needs to be wrapped in providers, such as those used for an i18n library like next-intl.

For example, when I include useTranslations in the following scenario, I encounter the error:
"Error: No intl context found."
As a result, the page fails to render.

import { instantMeiliSearch } from '@meilisearch/instant-meilisearch'
import { GetServerSidePropsContext } from 'next'
import singletonRouter from 'next/router'
import { renderToString } from 'react-dom/server'
import { InfiniteHits, InstantSearch, InstantSearchSSRProvider, InstantSearchServerState, SearchBox, getServerState } from 'react-instantsearch'
import { createInstantSearchRouterNext } from 'react-instantsearch-router-nextjs'
import { useTranslations } from 'use-intl'

import { env } from '@/env'
import { getMessages } from '@/i18n/getMessages'

import searchClient from '@/utils/searchClient'
import Hit from '@/components/Hit'

type SearchPageProps = {
	serverState?: InstantSearchServerState
	serverUrl: string
}

const SearchPage = ({ serverState, serverUrl }: SearchPageProps) => {
	const t = useTranslations() // 💥💥💥  when I add this, the getServerState() fails because SearchPage is not wrapped in an IntlProvider

	return (
		<InstantSearchSSRProvider {...serverState}>
			<InstantSearch
				searchClient={searchClient}
				indexName='common'
				routing={{
					router: createInstantSearchRouterNext({ singletonRouter, serverUrl }),
				}}
			>
				<h1>{t('search')}</h1>
				<SearchBox />
				<InfiniteHits hitComponent={Hit} />
			</InstantSearch>
		</InstantSearchSSRProvider>
	)
}

export default SearchPage

export async function getServerSideProps({ req, locale }: GetServerSidePropsContext) {
	const protocol = req.headers.referer?.split('://')[0] || 'https'
	const serverUrl = `${protocol}://${req.headers.host}${req.url}`

	const serverState = await getServerState(<SearchPage serverUrl={serverUrl} />, { renderToString })

	return {
		props: {
			serverState,
			serverUrl,
			messages: await getMessages(locale),
		},
	}
}

Wrapping pages in various providers (e.g., for next-intl or UI libraries) is a common practice, and this is typically handled in _app.tsx. However, when rendering the page with getServerSideProps, these providers are not available.

How to deal with this issue?

Thank you in advance for any help! 🙏🙏🙏

[Haroenv]

You need to wrap your SearchPage in the Intl provider if you're using those, or make the code conditional so they don't need the intl, for the contexts of InstantSearch, your SearchPage doesn't technically need to be exactly the same as your real implementation, only need to have the same widgets with the same options.

[branislav-brincko]

Thanks, for anyone stumbling upon this question - I ended up using the second advice;
I prepared custom Search component that internally uses various instant search hooks and it accepts renderChildren prop.
On the server I leave this prop as undefined, so no providers are missing (since only children use providers, like next-intl or Mantine providers...) and on the client I pass it in with custom search inputs, list etc.

[Haroenv]

This approach definitely works if all your search components can easily be consolidated. Thanks for sharing!