&

Data fetching modes implementation

This website's goal is to illustrate how to use Flagship React & Javascript SDKs in the context of Next.js.

You can see the source code here: Source code

Data fetching mode implementation:

CSR Example

Go to the Client-side rendering example

SSG Example

Go to the Static-Side generated example

SSR Example

Go to the Server-Side rendering example

NewAlpha

Middleware

Go to the Middleware example

What are data fetching modes?

Next.js offers multiple data fetching modes in order to be closest to website visitors needs. All those modes are well described in Next.js official documentation.

Server-Side Rendering (SSR)

On every request, first render of the page's HTML is done on the server. Then the browser takes over and handling dynamic interactions.

Client-Side Rendering (CSR)

The initial HTML returned by the server or CDN is minimal and does not include content. The Javascript code handles the content generation and dynamic interactions of the website.

Static-Site Generation (SSG)

The initial HTML with static content is generated on the build step of the website, and returned as a static file from a CDN or a static server. Then the browser takes over and handling dynamic interactions.

These different data fetching methods comes with advantages and drawbacks in the context of feature flagging:

Method	Advantages	Drawbacks
Client-side rendering	Fast loading of the page Everything handled in JS	No targeting context on page load (except technical such as browser info) Targeting context requires ajax calls Flag loading asynchronous (require loader state or flickering)
Server-side rendering	Flagging can be done on the server Targeting context fetched before rendering Renders an already flagged HTML page: No loading state or flickering on page load	Requires a server running to serve the pages Initial page load can be slower
Static-site generation	Fast loading of the page Generic pages (not specific to a visitor) can be flagged on page load	No visitor targeting context on page load (except technical such as browser info) Visitor context fetching requires ajax calls Visitor specific flagging asynchronous (require loader state or flickering)

Flagship configuration

For this demo, we have setup 2 flags on the Flagship platform:

Name: showBanner

Targeting: All users

Value: true

Default value: false

Name: showVIPBanner

Targeting: { "isVip": true }

Value: true

Default value: false

As you can see, the showBanner flag targets all users, and thus can be pre-loaded when building the page in SSG or rendering the page in SSR.
For Client-side rendered pages, an initial call to Flagship services will be required to get the flag, thus leading to a loading state or a flickering.

On the other hand, the showVIPBanner flag targets only VIP visitors.
To known whether the visitor is VIP or not, we simulate an API call to get the user profile. This API call can be done on the server (when using Server-side rendering) or on the client (for Client-side rendering or Static-site generation)
This means that the showVIPBanner will be available on page load for Server-side rendered page, and after a flickering or loading state for Client-side rendered or Static-side generated pages.