Rajneesh Mishra
Rajneesh Mishra
PostsComments
TTCTheo's Typesafe Cult
Created by Rajneesh Mishra on 2/13/2025 in #questions
Why is this component not fully SSRed, how can I do it and what learnings can I take from it?
And thank you very much for putting your time into it
30 replies
TTCTheo's Typesafe Cult
Created by Rajneesh Mishra on 2/13/2025 in #questions
Why is this component not fully SSRed, how can I do it and what learnings can I take from it?
Although, in the table there are multiple Login buttons in each row, actually I'll send you the original UI in the DMs
30 replies
TTCTheo's Typesafe Cult
Created by Rajneesh Mishra on 2/13/2025 in #questions
Why is this component not fully SSRed, how can I do it and what learnings can I take from it?
Sure, I'll try it
30 replies
TTCTheo's Typesafe Cult
Created by Rajneesh Mishra on 2/13/2025 in #questions
Why is this component not fully SSRed, how can I do it and what learnings can I take from it?
Okay I will try to mock it separately and then after that will put it into my codebase. Could you decipher why Next.js is behaving the way it is? Because oddly enough, I used to get Table Headers in the HTML itself before but after a few changes it stopped happening and even the table headers became client side rendered. Also, importing client components in a server component doesn't make it a client component right?
30 replies
TTCTheo's Typesafe Cult
Created by Rajneesh Mishra on 2/13/2025 in #questions
Why is this component not fully SSRed, how can I do it and what learnings can I take from it?
"use client";

import { persistor, store } from "@/store";
import React from "react";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import { SessionProvider } from "@/context/SessionContext";
export default function Providers({ children }: { children: React.ReactNode }) {
  return (
    <Provider store={store}>
      <SessionProvider>
        {persistor ? (
          <PersistGate loading={null} persistor={persistor}>
            {children}
          </PersistGate>
        ) : (
          <>{children}</>
        )}
      </SessionProvider>
    </Provider>
  );
}
"use client";

import { persistor, store } from "@/store";
import React from "react";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import { SessionProvider } from "@/context/SessionContext";
export default function Providers({ children }: { children: React.ReactNode }) {
  return (
    <Provider store={store}>
      <SessionProvider>
        {persistor ? (
          <PersistGate loading={null} persistor={persistor}>
            {children}
          </PersistGate>
        ) : (
          <>{children}</>
        )}
      </SessionProvider>
    </Provider>
  );
}
This is the Providers.tsx file in the components file, inside src but outside app
30 replies
TTCTheo's Typesafe Cult
Created by Rajneesh Mishra on 2/13/2025 in #questions
Why is this component not fully SSRed, how can I do it and what learnings can I take from it?
import localFont from "next/font/local";
import "./globals.css";
import { Toaster } from "@/components/ui/toaster";
import Providers from "@/components/Providers";

const geistSans = localFont({
  src: "./fonts/GeistVF.woff",
  variable: "--font-geist-sans",
  weight: "100 900",
});
const geistMono = localFont({
  src: "./fonts/GeistMonoVF.woff",
  variable: "--font-geist-mono",
  weight: "100 900",
});

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        <Toaster />
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}
import localFont from "next/font/local";
import "./globals.css";
import { Toaster } from "@/components/ui/toaster";
import Providers from "@/components/Providers";

const geistSans = localFont({
  src: "./fonts/GeistVF.woff",
  variable: "--font-geist-sans",
  weight: "100 900",
});
const geistMono = localFont({
  src: "./fonts/GeistMonoVF.woff",
  variable: "--font-geist-mono",
  weight: "100 900",
});

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        <Toaster />
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}
This is the root layout
30 replies
TTCTheo's Typesafe Cult
Created by Rajneesh Mishra on 2/13/2025 in #questions
Why is this component not fully SSRed, how can I do it and what learnings can I take from it?
In case its relevant I'll share you the root layout of my app and the providers file surrounding it.
30 replies
TTCTheo's Typesafe Cult
Created by Rajneesh Mishra on 2/13/2025 in #questions
Why is this component not fully SSRed, how can I do it and what learnings can I take from it?
Also, I have a python backend from where the data is being fetched. Before(like 15-20 days ago) when I used to make a request the data was literally engraved in the HTML itself, I remember the joy of seeing it inside the HTML but now all of a sudden this happened.
30 replies
TTCTheo's Typesafe Cult
Created by Rajneesh Mishra on 2/13/2025 in #questions
Why is this component not fully SSRed, how can I do it and what learnings can I take from it?
This is the file in which I want the 'tbody' tag to slowly stream while I show Loading Data, so should I add a Suspense Boundary there?
30 replies
TTCTheo's Typesafe Cult
Created by Rajneesh Mishra on 2/13/2025 in #questions
Why is this component not fully SSRed, how can I do it and what learnings can I take from it?
I was expecting the table tags to be in HTML and then the table body to be streamed in, is there a way to do it? I am gonna look into the docs link you shared after it. Thank you.
30 replies
TTCTheo's Typesafe Cult
Created by Rajneesh Mishra on 2/13/2025 in #questions
Why is this component not fully SSRed, how can I do it and what learnings can I take from it?
Hello, thank you for the reply and sorry for the late reply of mine, I was busy yesterday. Yes I do want to talk further. What I expected was that all the data will be in HTML once the axios call fetches it. Then the whole HTML file with the hardcoded initial data will be sent. I am showing a loading UI, I have a loading.tsx file in the root of my app directory so it works.
30 replies
TTCTheo's Typesafe Cult
Created by Rajneesh Mishra on 2/13/2025 in #questions
Why is this component not fully SSRed, how can I do it and what learnings can I take from it?
No description
30 replies
TTCTheo's Typesafe Cult
Created by Rajneesh Mishra on 2/13/2025 in #questions
Why is this component not fully SSRed, how can I do it and what learnings can I take from it?
This is the response in the "dashboard" document.
30 replies
TTCTheo's Typesafe Cult
Created by Rajneesh Mishra on 2/13/2025 in #questions
Why is this component not fully SSRed, how can I do it and what learnings can I take from it?
Directory structure:- |-> src |-> app |-> dashboard |-> layout.tsx(Server Component, don't worry I am not that big of a noob) |-> page.tsx(This contains the Dashboard Page component which a RSC and makes the backend call) |-> components (at the same level as app) |-> Dashboard.tsx (This contains the table with hardcoded headers) |-> DashboardLoginButton.tsx(The client component getting rendered inside the Dashboard.tsx server component)
30 replies
TTCTheo's Typesafe Cult
Created by Rajneesh Mishra on 2/13/2025 in #questions
Why is this component not fully SSRed, how can I do it and what learnings can I take from it?
And the below is DashboardLoginButton component's code
30 replies
TTCTheo's Typesafe Cult
Created by Rajneesh Mishra on 2/13/2025 in #questions
Why is this component not fully SSRed, how can I do it and what learnings can I take from it?
import DashboardLoginButton from "./DashboardLoginButton";
import { User } from "@/types/user";

export default function Dashboard({ userDetails }: { userDetails: User }) {
  return (
    <div className="h-[90vh] p-5 bg-purple-50 flex flex-col">
      <div className="bg-white shadow-sm rounded-md flex-grow overflow-hidden flex flex-col">
        <div className="overflow-x-auto flex-grow">
          <table className="w-full text-left">
            <thead className="bg-gray-200">
              <tr>
                <th className="py-3 px-4 text-xs">GSTIN</th>
                <th className="py-3 px-4 text-xs">State</th>
                <th className="py-3 px-4 text-xs">Company</th>
                <th className="py-3 px-4 text-xs">Action</th>
              </tr>
            </thead>
            <tbody>
              {userDetails?.gstins?.map((gstin, index) => (
                <tr key={index} className="border-b hover:bg-gray-100">
                  <td className="py-3 px-4">
                    <div className="font-semibold text-xs">{gstin.gstin}</div>
                  </td>
                  <td className="py-3 px-4 text-xs">{gstin.state}</td>
                  <td className="py-3 px-4 text-xs">{gstin.company_name}</td>
                  <td className="py-3 px-4">
                    <DashboardLoginButton gstin={gstin} />
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}
import DashboardLoginButton from "./DashboardLoginButton";
import { User } from "@/types/user";

export default function Dashboard({ userDetails }: { userDetails: User }) {
  return (
    <div className="h-[90vh] p-5 bg-purple-50 flex flex-col">
      <div className="bg-white shadow-sm rounded-md flex-grow overflow-hidden flex flex-col">
        <div className="overflow-x-auto flex-grow">
          <table className="w-full text-left">
            <thead className="bg-gray-200">
              <tr>
                <th className="py-3 px-4 text-xs">GSTIN</th>
                <th className="py-3 px-4 text-xs">State</th>
                <th className="py-3 px-4 text-xs">Company</th>
                <th className="py-3 px-4 text-xs">Action</th>
              </tr>
            </thead>
            <tbody>
              {userDetails?.gstins?.map((gstin, index) => (
                <tr key={index} className="border-b hover:bg-gray-100">
                  <td className="py-3 px-4">
                    <div className="font-semibold text-xs">{gstin.gstin}</div>
                  </td>
                  <td className="py-3 px-4 text-xs">{gstin.state}</td>
                  <td className="py-3 px-4 text-xs">{gstin.company_name}</td>
                  <td className="py-3 px-4">
                    <DashboardLoginButton gstin={gstin} />
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}
The above is the Dashboard.tsx component which is getting used in the "page.tsx" file inside the "/dashboard" folder
30 replies
TTCTheo's Typesafe Cult
Created by Rajneesh Mishra on 2/13/2025 in #questions
Why is this component not fully SSRed, how can I do it and what learnings can I take from it?
import Dashboard from "@/components/Dashboard";
import axiosInstance from "@/lib/axiosInstance";
export const dynamic = "force-dynamic";

export default async function DashboardPage() {
  try {
    const response = await axiosInstance.get(
      `${process.env.NEXT_PUBLIC_API_URL}/api/users/user-details-dashboard`
    );
    if (response.status === 200) {
      return <Dashboard userDetails={response.data} />;
    }
  } catch (error) {
    throw new Error(JSON.stringify(error));
  }
}
import Dashboard from "@/components/Dashboard";
import axiosInstance from "@/lib/axiosInstance";
export const dynamic = "force-dynamic";

export default async function DashboardPage() {
  try {
    const response = await axiosInstance.get(
      `${process.env.NEXT_PUBLIC_API_URL}/api/users/user-details-dashboard`
    );
    if (response.status === 200) {
      return <Dashboard userDetails={response.data} />;
    }
  } catch (error) {
    throw new Error(JSON.stringify(error));
  }
}
The above is page.tsx inside the dashboard which is just inside the app folder for the "/dashboard" route.
30 replies
TTCTheo's Typesafe Cult
Created by Rajneesh Mishra on 2/13/2025 in #questions
Why is this component not fully SSRed, how can I do it and what learnings can I take from it?
I wanted to know if I was completely wrong
30 replies
TTCTheo's Typesafe Cult
Created by Rajneesh Mishra on 2/13/2025 in #questions
Why is this component not fully SSRed, how can I do it and what learnings can I take from it?
Okay, now I can send code of the concerned files.
30 replies