Understanding the SSR/CSR Timing #1462

dresch86 · 2024-05-01T15:23:07Z

dresch86
May 1, 2024

Howdy all,
My understanding of the SSR/CSR entries is that the entry-server.tsx is where server side code is loaded. Furthermore, in the route files, if we use

"use server;"

In a function, that will only be run on the server. Here is what I did....

entry-server.tsx

import { DatabaseProvider } from "@components/DatabaseProvider";
import { ConfigurationServiceProvider } from "@components/ConfigurationServiceProvider";

export default createHandler(() => (
    <StartServer
      document={({ assets, children, scripts }) => (
        <ConfigurationServiceProvider>
          <DatabaseProvider>
            <html lang="en">
              <head>
                <meta charset="utf-8" />
                <meta name="viewport" content="width=device-width, initial-scale=1" />
                <link rel="icon" href="/favicon.ico" />
                {assets}
              </head>
              <body>
                <div id="my-app" class="h-screen flex">{children}</div>
                {scripts}
              </body>
            </html>
          </DatabaseProvider>
        </ConfigurationServiceProvider>
      )}
    />
));

My ConfigurationService.ts

import { SameSiteOption } from "@services/SessionService";

export type ApplicationSettings = {
    name: string,
    domain: string,
    adminContact: string
}

export type SessionSettings = {
    cookieName: string,
    cookieDomain: string,
    cookiePath: string,
    cookieMaxAge: number,
    cookieHttpOnly: boolean,
    cookieSecure: boolean,
    cookieSameSite: SameSiteOption
}

export type Configuration = {
    app: ApplicationSettings,
    session: SessionSettings
};

export class ConfigurationService {
    private appCfg: Configuration;
    private static instance: ConfigurationService;

    private constructor(defaultCfg: Configuration) { 
        this.appCfg = defaultCfg;
    }

    public static getInstance(): ConfigurationService {
        if (!ConfigurationService.instance) {
            let sessionCookieSameSite: string = process.env.SESSION_COOKIE_SAMESITE ?? 'Lax';
            sessionCookieSameSite = sessionCookieSameSite.toLowerCase();
            sessionCookieSameSite = sessionCookieSameSite[0].toUpperCase() + sessionCookieSameSite.slice(1);

            if (!(sessionCookieSameSite in SameSiteOption)) {
                sessionCookieSameSite = 'Lax';
            }

            ConfigurationService.instance = new ConfigurationService({
                app: {
                    name: process.env.APP_NAME ?? 'My App',
                    domain: process.env.APP_DOMAIN ?? 'mysite.com',
                    adminContact: process.env.SESSION_COOKIE_NAME ?? 'admin@mysite.com'
                },
                session: {
                    cookieName: process.env.SESSION_COOKIE_NAME ?? 'js_session',
                    cookieDomain: process.env.SESSION_COOKIE_DOMAIN ?? 'localhost',
                    cookiePath: process.env.SESSION_COOKIE_PATH ?? '/',
                    cookieMaxAge: Number(process.env.SESSION_COOKIE_PATH ?? 86400),
                    cookieHttpOnly: Boolean(process.env.SESSION_COOKIE_HTTPONLY ?? true),
                    cookieSecure: Boolean(process.env.SESSION_COOKIE_SECURE ?? false),
                    cookieSameSite: SameSiteOption[sessionCookieSameSite as keyof typeof SameSiteOption]
                }
            });
        }
        
        return ConfigurationService.instance;
    }

    public getSessionSettings(): SessionSettings {
        return this.appCfg.session;
    }

    public getApplicationSettings(): ApplicationSettings {
        return this.appCfg.app;
    }
}

My SessionService uses Redis so it has a redisclient. I am seeing that turn up, albeit with an error, in my browser on the client side. I tracked it down to the "import { SameSiteOption } from "@services/SessionService";" which is only an enum.

This is my index.tsx route:

const Index = () => {
  const configurationHandler = useContext<ConfigurationService>(ConfigurationServiceContext);
  const [searchParams, setSearchParams] = useSearchParams();
  const loginResult = useAction(doLogin);

  const submit = (e: MouseEvent) => {
    //e.preventDefault();
    console.log('test');
  };

  return (
    <MetaProvider>
      <Title>{ 'Login | ' + configurationHandler.getApplicationSettings().name + ' - Registration System' }</Title>
      <div class="flex flex-auto justify-center items-center">
        <div class="flex flex-col">
          <form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4" action={doLogin} method="post">
            <input id="redirect" type="hidden" value={ searchParams?.redirectTo } />
            <div class="mb-4">
              <label class="block text-gray-700 text-sm font-bold mb-2" for="email">
                Email
              </label>
              <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="email" name="email" type="text" placeholder="Email" />
            </div>
            <div class="mb-6">
              <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
                Password
              </label>
              <input class="shadow appearance-none border border-red-500 rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="password" name="password" type="password" placeholder="******************" />
              <p class="text-red-500 text-xs italic">Please choose a password.</p>
            </div>
            <div class="flex items-center justify-between">
              <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit" onClick={ submit }>
                Sign In
              </button>
              <a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800" href="#">
                Forgot Password?
              </a>
            </div>
          </form>
          <p class="text-center text-gray-500 text-xs">
            &copy;{ new Date().getFullYear() } { configurationHandler.getApplicationSettings().name }. All rights reserved.
          </p>
        </div>
      </div>
    </MetaProvider>
  );
}

Any thoughts on why the client is loading server code?

ryansolid · 2024-05-01T21:36:34Z

ryansolid
May 1, 2024
Maintainer

Where is the "use server"; in the code?

1 reply

dresch86 May 1, 2024
Author

Just above my Index functional....forgot to include that.

const doLogin = action(async (formData: FormData) => {
  "use server";
  const email = formData.get('email')?.toString() ?? '';
  const password = formData.get('password')?.toString() ?? '';

  try {
    const userHandler: UserService = new UserService();
    let result = await userHandler.authenticate(email, password);
  
    if (result == UserServiceStatus.INVALID_CREDENTIALS) {  
      return json({
        statusCode: 403,
        message: "Invalid Credentials"
      });
    } else if (result == UserServiceStatus.ERROR) {
      return json({
        statusCode: 500,
        message: "System Error"
      });
    }
  } catch (error) {console.log(error);
    return json({
      statusCode: 500,
      message: "System Error"
    });
  }
});

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Understanding the SSR/CSR Timing #1462

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Understanding the SSR/CSR Timing #1462

Uh oh!

Uh oh!

dresch86 May 1, 2024

Replies: 1 comment · 1 reply

Uh oh!

ryansolid May 1, 2024 Maintainer

Uh oh!

dresch86 May 1, 2024 Author

dresch86
May 1, 2024

Replies: 1 comment 1 reply

ryansolid
May 1, 2024
Maintainer

dresch86 May 1, 2024
Author