To provide maximum flexibility, Firebase Remote Config supports both client-side and server-side SDK integrations for web applications. This means your app can:
- Fetch and evaluate Remote Config templates on your server:Your server can download the Remote Config template and evaluate targeting conditions directly.
- Optimize initial page load performance:For server-side rendering scenarios, the server can provide the evaluated configuration to the client during the initial page load. This improves performance by delivering the necessary configuration data upfront.
This approach empowers you to manage your app's behavior and configuration dynamically, particularly in server-side rendering setups.
Set up server-side rendering for your apps
To configure server-side rendering with Remote Config in your web app, update your client and server apps using the steps that follow.
Step 1: Update your server-side application
In your server app, where you implemented the Firebase Admin Node.js
SDK, include a RemoteConfigFetchResponse
class that accepts the existing ServerConfig
. You can use this to serialize config values that can be passed to your client.
export
default
async
function
MyServerComponent
()
{
const
serverApp
=
initializeApp
();
const
serverSideConfig
=
getRemoteConfig
(
serverApp
);
const
template
=
await
serverSideConfig
.
getServerTemplate
();
const
config
=
template
.
evaluate
({
randomizationId
:
'
some
-
uuid
'
});
const
fetchResponse
=
new
RemoteConfigFetchResponse
(
serverApp
,
config
);
return
(
< div
>
< MyClientComponent
initialFetchResponse
=
{
fetchResponse
}
>< /
MyClientComponent
>
< /
div
>
);
}
Step 2: Update your client app
On your client app, which implements the Firebase Javascript SDK, include an initialFetchResponse
configuration option to accept the serialized values
passed from your server app. This manually hydrates the config state without
making an async fetch request.
Additionally, you must include an initialization option that lets you set the firebase-server
as the templateId
on the client SDK. This configures the SDK
to use the initial server-side template for subsequent fetches, ensuring
consistent parameters and conditional values between client and server.
export
default
function
MyClientComponent
({
initialFetchResponse
=
''
}
=
{})
{
const
app
=
initializeApp
(
firebaseConfig
);
const
config
=
getRemoteConfig
(
app
,
{
templateId
:
'
firebase
-
server
'
,
initialFetchResponse
});
const
paramValue
=
getString
(
config
,
'
my_rc_parameter_key
'
);
return
(
< div
> {
paramValue
}
< /
div
>
);
}
