reactjsfirebasenext.jsfirebase-remote-config

Fetch data from FireBase remoteConfig into a SSR NextJs Component


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')

Solution

  • 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.