improve protected layout

README.MD

@@ -30,21 +30,4 @@ All addons are optional, you may select some, you may select all and you may sel
 
 ![Screenshot_1](https://user-images.githubusercontent.com/91349014/201010596-4578b981-4183-4197-be43-6e01ed582954.png)
 
-### Folders And Why
-
-#### /env
-
-It adds nice type safety check and zod validation to your env (both client and server), so it is recommended to use it in your code (can be used to store JWT secret, etc).
-
-- /env/client - Client side env - `imort.meta.env`
-- /env/server - Server side env - `process.env`
-- /env/schema - Schema for env - `Zod Client Schema & Zod Server Schema`
-
-#### /server
-
-The server folder is where you put all of your server side code (anything that will not be imported by client), you may see this folder when you use `tRPC` or `Prisma`.
-
-- /server/trpc - tRPC server side code: routers, context, utils, etc.
-- /server/db - `client.ts` = Where the prisma client is being created.
-
 This project was inspired by [create t3 app](https://github.com/t3-oss/create-t3-app) and was created in order to make it easier to create a solid app. (and replace `npm init solid`)

src/installers/SolidAuth/utils/getProtectedLayout.ts

@@ -2,7 +2,9 @@ import { IUtil } from "~types";
 
 const getProtectedLayout: IUtil = (ctx) => {
   const usePrisma = ctx.installers.includes("Prisma");
-  return `import { Match, Switch, type Component } from "solid-js";
+  return `import { ${
+    ctx.ssr ? "Show" : "Match, Switch"
+  }, type Component } from "solid-js";
 import { useRouteData } from "solid-start";
 import { createServerData$, redirect } from "solid-start/server";
 import { authenticator${
@@ -26,11 +28,7 @@ export const withProtected = (Component: ProtectedRouter) => {
     Page: () => {
       const current = useRouteData<typeof routeData>();
       return (
-        <Switch fallback={<Component {...(current() as User)} />}>
-          <Match when={current.loading || current() instanceof Response}>
-            <h1>Loading...</h1>
-          </Match>
-        </Switch>
+${getInnerJsx(ctx.ssr)}        
       );
     },
   };
@@ -40,4 +38,17 @@ export type ProtectedRouter = Component<User>;
 `;
 };
 
+const getInnerJsx = (ssr?: boolean) => {
+  if (ssr) {
+    return `        <Show when={current()} keyed>
+          {(user) => <Component {...user} />}
+        </Show>`;
+  }
+  return `        <Switch fallback={<Component {...(current() as User)} />}>
+          <Match when={current.loading || current() instanceof Response}>
+            <h1>Loading...</h1>
+          </Match>
+        </Switch>`;
+};
+
 export default getProtectedLayout;