How can I fetch data from remoteConfig into an SSR NextJs component?
On my site, I use NextJs, and I want it to be static but also use dynamic routes. For this, the dynamic route is wrapped into an SSR component that creates the routes on build with generateStaticParams
. Inside this component, I also need to get the data from remoteConfig, and I need it to generate those routes but I can't find a solution to do it.
So war in my app I fetch data from remoteConfig un CSR like so
const [dara, setData] = useState([]);
const configKey = 'data';
useEffect(() => {
const remoteConfig = getRemoteConfig(firebaseApp);
fetchAndActivate(remoteConfig)
.then(() => {
const value = getValue(remoteConfig, configKey);
const valueString = value.asString();
const data = JSON.parse(valueString);
setDara(data);
})
.catch((err) => {
console.log(err);
});
}, [data]);
I tried to move this code into a utils function,but it does not work
export async function getDataFromRemoteConfig(configKey: string) {
try {
const remoteConfig = getRemoteConfig(firebaseApp);
await fetchAndActivate(remoteConfig);
const value = getValue(remoteConfig, configKey);
const valueString = value.asString();
return JSON.parse(valueString);
} catch (error) {
console.error('Error fetching projects from Remote Config:', error);
return [];
}
}
const data = await getDataFromRemoteConfig('data')
You seem to be trying to use the client-side SDK for Firebase Remote Config in server-side code, which won't work. Since Remote Config tailors parameter values to the specific user, it needs information that is only available client-side. There is currently no API to retrieve all values in server-side code.
There is a server-side API to read the templates that Remote Config uses, but not all values will be populated here.