Why I think SSR is a better approach

[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.

[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.

[MrEpicGekko]

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

[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 ^^ .

[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

[RaghuprasaadIyer]

How about the useLayoutEffect instead of useEfrect?

[martijnjansen]

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.

[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.

[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)

[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.

[iced]

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

[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.

[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 😊

[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.,

[waffensultan]

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

[radam]

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

[FranzAllanSee]

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

[chebrubin]

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

[ভোমরা]

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

[ajzack]

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