Why I think SSR is a better approach

📘 T3 Stack Tutorial: 1017897100294.gumroad.com/l/j...
🤖 SaaS I'm Building: www.icongeneratorai.com/
💬 Discord: / discord
🔔 Newsletter: newsletter.webdevcody.com/
📁 GitHub: github.com/webdevcody
📺 Twitch: / webdevcody
🤖 Website: webdevcody.com
🐦 Twitter: / webdevcody

[@Dev-Siri]

Recently I made this SSR move, and although this caused every page to be SSRed like a traditional web app, the app was still surprisingly fast & the UX was so much better. Instead of showing a blue orb or loading spinner, the page loaded in with the correct Profile Picture or redirect("/auth"). This also means that it works without JavaScript + ships less JavaScript. I was a little hesitant at first, but then forgot this "performance issue" existed.

[@martijnjansen5388]

Now I understand why you still had that in your previous video that I mentioned about the use client and revalidation xD great job, love to see you start writing in app router now too. Good stuff mate.. Can you btw do another catch up on the business side of things of the micro SaaS that you build? Don't feel you have to do it, am just curious! Anyways, have a great rest of your day.

[@MrEpicGekko]

Cold start times are our biggest problems with SSR, it's a tough balance to strike between UI flashes and load times

[@codinginflow]

What about automatic revalidation tho? When I fetch the user client-side, I can synchronize logged-in/out state between tabs when they gain focus. Might not be that important tho.

[@waffensultan7670]

Thanks for the vid :) I'm doing something similar to this, so I find this vid particularly both helpful and insightful for my project.

[@Goyo_MGC]

Always great vid ! It's interessting to see how SSR can be slower and also fatser at the same time which can be confusing. Faster when shipping computed HTML to the client rather than plain JS but slower when "waiting" for potential other necessary services ( Backend, Database, ...). I was a bit confused at first because of this and how everyone is claiming "blazingly fast" all the time ^^ .

[@Rhxrrrr]

Dude please help. how do you handle data client cache. I have a page that is ssr. nextjs app router. the page fetches some data ssr and sends it. i mutate the data + optimisticly update client data. when i leave to another page and come back. nextjs uses cached ssr unmutated fetched data. it doesnt make sense to router.refresh. how do i refetch on subsequent visits. or minuplate the cached data to maintain the optimistic change.

[@remeow]

Actually I was doing something similar the other day, one thing that you can do, to even speed things up, is that your user component (basically whatever renders loggin/user info) be a server component, for all user data, so you not longer need to re-hydrate that component client side, on top of that if you know how to actually call the supabase API for the user's session, you can wrap that up to use the next cache mechanism, I remember a video where you moved to AWS using SST if that is not available with your config, you can still use react.cache, to cache your user session so successive request do not need to do it (mainly while navigating between pages), keep in mind you will need to invalidate the cache if the user decides to log out. To achieve this I used iron session so I could serialize (encrypt) all session info into a cookie and cache the un-encrypted value of the session in the server, by the cookie value

[@SamWagnerBeast]

I like to use service workers for caching when building SPAs. I end up with much faster subsequent loads as the pages and JavaScript is cached. Whenever the cache version in the service worker is updated the service worker replaces the cached files with the newest version and offers the user to refresh to load with the new content. I heavily utilize spinners and skeletons while frontend data is loading.

[@soumen_pradhan]

Unrelated, but at 1:39 on this line 34 setUser(activeSession?.user ?? null) Why even check for null, if assigned will be null as well.

[@RaghuprasaadIyer]

How about the useLayoutEffect instead of useEfrect?

[@Than.]

Pretty solid solution to the same problem that I have on my project atm. In my auth provider I'm also keeping track of the loading state of what happens in that useEffect. Do you think that's ever useful?

[@WebDevCody]

yeah sure that could be useful

[@iced2916]

I've been a victim of the sudden changes in UI like this example, from sign in btn to user information... never thought of this approach to fixing it. Can you make a video just focused on deployment for full stack apps, for example with express and a postgres db in the backend (docker, vps, etc...)? And possibly showing different platforms to use when deploying and giving your opinion on whats best

[@amasoharnold4762]

I don’t think it’s really that hard and bunch of people already have it out there just get node & progress image with docker make necessary connections and rsyn or clone the project to your vps

[@radam2447]

Is suspense instead of await a solution to the initial "longer" load time. I think it out of the box http streams updates when the suspense resolves

[@Euquila]

It's not slow because the JS is slow. It's slow because the auth client needs to hit the network. Basically, when you go to SSR you're simply trading a delay on the client for a delay on the server. The scenario with the one on the client (like in SPA) can be dealt with by implementing a simple hack to improve UX. Basically, you just need to do a little async hack of some sort: component mounts --> we don't know if the user is logged in or not --> wait 2 seconds to see if the auth client reports back --> if it does (great!) --> if it doesn't assume they are not signed in. It's actually a perfect use case to use both undefined, null, and the user object. undefined initially, null (not signed in), user object (signed in)

[@ভোমরা]

What advice would you give to someone who wants to explore coding and programming?

[@lukasmolcic5143]

do it, build small stuff, then larger stuff, spend more time building things then watching things

[@WebDevCody]

What Luka said.

[@ভোমরা]

@@WebDevCody thanks for advice love you

[@mo938]

we have come full circle!!!

[@rhysyw97]

Anyone know if Firebase has come out with any server-side auth like Supabase? I haven't seen anything and just feel like Firebase as a whole is falling behind?

[@vanjapopovic2959]

You will need to use the firebase-admin package, to handle SSR. Unfortunately it's not as easy to setup as supabase.

[@PitZza143]

How did you make your console.log look nice in terminal?

[@WebDevCody]

console ninja plugin

[@PitZza143]

@@WebDevCody thanks 🔥

[@priyanshuvishnoi]

Plz share your vscode theme

[@mpiorowski]

SSR give also some more amazing benefits, like streaming secondary data to client as promises. Very unused feature that is soooo amazing and underated.,

[@chebrubin]

Sample code please. It was not clear this is React Server Side components.

[@kalebschmottlach4877]

Is this possible with firebase auth?

[@WebDevCody]

I don’t use firebase

[@abdulrahmanmohamed8298]

curious, what theme is he using? lol

[@WebDevCody]

Bearded theme

[@johnpeterson8493]

Nice

[@ajzack983]

CSR makes the user stick around tho , I see it as a marketing tactic because most of us when we see UI we wait for the fetch to end. Vs if the userd sees a blank page with a spinner on top, there's bigger chance he bounces

[@FranzAllanSee]

Why not just visibility:hidden at the start instead? 😅

[@WebDevCody]

Lol that feels the same to me, if you don’t mind the user seeing a spinner or loader, that’s the second best option imo.

[@FranzAllanSee]

@@WebDevCody Or a placeholder/skeleton component just like how netflix or facebook does it when things are still loading 😁

[@merabc]

In the case of a web site it's better to approach, but in case of a web app it's necessary to be SPA 😊

[@roach_iam]

That’s the great thing about nextjs. Even if you’re using SSR you have all the features of an SPA still

[@merabc]

@@roach_iam aaaand steeel (like Bruce Buffer 😀): everything new is well-forgotten old

[@cas818028]

And we are full circle, just like when we used to builds web apps with cgi/perl, asp/vbscript, php and SSR was the only option

[@WebDevCody]

Technically every this in next is basically a hybrid of both SSR and csr. SSR for fetching initial data, and then csr for the interactive pieces on the page. So my title is a bit misleading

[@Caaqil239]

i used useEffect and loading method i think is better

[@bbfrancis23]

Except web crawlers don't read dynamic content.

[@ভোমরা]

hi

[@SeibertSwirl]

😒

[@JohnWilsonPanaligan-je1ft]

MICROSOFT , DISCONNECT !!!!!!! GET RID TREATY !!!!!! PHILIPPINES IS NO MORE OPERATING ! _FUNKMERCENARY

[@Antagon666]

Wait a minute... This is not OpenGL.

[@WebDevCody]

?

[@Antagon666]

@@WebDevCody SSR means screen space reflections.