SSR support with the React SDK

[pradel]

Is your feature request related to a problem? Please describe.

Ideally we should be able to make the react calls with apollo on the server as it's supported using the next.js app or page router to get the content indexed. Not sure what the best approach is here as the session is only client-side at the moment.

• should the SSR calls always be made without auth and then when the client is hydrated and ready the same calls are made with the user if it's logged in
• use a cookie to store the auth status to make authenticated calls on the server.

Just wanted to create the issue to open the discussion and see if there is a recommended way to approach this.

Describe the solution you'd like

The calls made with the React SDK should work on the server so we can get pages that are SEO indexed.

Describe alternatives you've considered

Create another app that is pre-rendered for SEO.

[cesarenaldi]

I am aware that one app in the Lens ecosystem implemented a custom IStorage provider that leverages cookies for the purpose of sharing, among other things, credentials with their code running on the server. I don't know if this is for SSR needs and I doubt it's a recent Next.js due to the 'use client' directive we have in the @lens-protocol/react-web entry point.

I'll ask around.

[cesarenaldi]

Turns out the cookie based implementation of IStorage served a different purpose than SSR, but still relevant for this conversation.

Here's an example implementation kindly shared by @abogacki.

import cookie from 'cookie';

export class LensCookieStorageProvider implements IStorageProvider {
  getItem(key: string) {
    const values = cookie.parse(document.cookie || '');
    return values[key] || null;
  }

  setItem(key: string, value: string) {
    const expires = new Date();
    expires.setMonth(expires.getMonth() + 1);

    const newCookie = cookie.serialize(key, value, {
      domain: SESSION_COOKIE_DOMAIN,
      secure: true,
      sameSite: 'strict',
      expires,
      path: '/',
    });
    document.cookie = newCookie;
  }

  removeItem(key: string) {
    document.cookie = `${key}=;expires=Thu, 01 Jan 1970 00:00:01 GMT ;domain=${SESSION_COOKIE_DOMAIN};path=/`;
    document.cookie = `${key}=;expires=Thu, 01 Jan 1970 00:00:01 GMT ;`;
  }
}