Feature: Allow loading flags in React SSR

[ukabu]

Is there anyway I can use the JS client in React App that uses Server Side Rendering?

Right now, the seems the client requires a window object to work. Which prevent it from being used in an app that uses SSR (our apps uses Next.js).

[ukabu]

Resolved

[kyle-ssg]

Resolved

[ukabu]

When using the client with react, I would expect to be able to render from the server (initial render - we use Next.js and this is what happens).
Ideally, SSR would load the feature flags just like when using the nodejs client. But just being no-op on the server-side (when there is no ; window` global) would be enough. As long just requiring/importing the client does not throw an exception, it would be good.

[kyle-ssg]

This has been split into 2 issues. Firstly, the client shouldn’t break when being imported on the server. This can be tracked here #9. This has been resolved as of 0.70, there's a nextjs example in this repository.

This issue will be for adding the ability to retrieve flags on the server. The difficulty here is the bulletTrain init function has a success callback.

One option would be to have the init function return a promise with the initial flags. However, the problem is a bit more complex than that as with SSR you may want to include an identity in your initial fetch to flags. For this to work on next you’d need to use a cookie implementation that can be accessed from both the client and server. Rather than bloat the client I’ll add an example react next app on how to do this.

[kyle-ssg]

This has now been implemented in the latest 0.7x.x version of the client, an example of SSR with nextjs can be found here.
https://github.com/SolidStateGroup/bullet-train-js-client/tree/master/examples/nextjs

It was a bit trickier than I thought, in order to make this possible, the client needed a way to restore state on the client. The readme in the above example should explain everything.

Any questions, feel free to reopen.

[kyle-ssg]

To people stumbling across this, as of 0.80.0, you will need to do.

import bulletTrain from 'bullet-train-client/isomorphic';

This has been reflected in the nextjs example in this repository.