Correct use of ssr hybrid aproach | Angular Community | Page 1

sullen oracle Feb 27, 2025, 2:15 PM

#

it's just a button, why can't you render it on the server?

#

the only things i don't render on the server are ones that literally can't be (like chart.js stuff that requires a canvas) and instead i render a skeleton to avoid layout shifts

#

but in this case, i don't see any reason why you would do that

drowsy gorge Feb 27, 2025, 2:19 PM

#


<div class="mx-auto max-w-7xl">
  <div class="flex items-center justify-end p-8">
    @if (platformService.isBrowser) {
      @if (!editMode()) {
        <button
          mat-flat-button
          color="primary"
          i18n
          (click)="editMode.set(true)">
          Enable Edit Mode
        </button>
      } @else {
        <button mat-flat-button color="primary" i18n (click)="openDialog()">
          Add Card
        </button>
      }
    }
  </div>

  <!-- Keep existing layout but add drag-drop -->
  <div
    class="grid grid-cols-1 gap-4 lg:grid-cols-3"
    cdkDropList
    [cdkDropListDisabled]="!editMode() || platformService.isServer"
    cdkDropListOrientation="horizontal"
    (cdkDropListDropped)="drop($event)">
    @for (item of layoutService.layout(); track item.id) {
      <div
        cdkDrag
        [cdkDragDisabled]="!editMode() || platformService.isServer"
        class="h-[350px]">
        @if (platformService.isBrowser) {
          <div class="cdkDragPlaceholder" *cdkDragPlaceholder></div>
        }
        <app-cards
          [type]="item.type"
          (remove)="layoutService.removeItem(item.id)" />
      </div>
    }
  </div>
</div>

#

im still learning ssr on angular, sSo I thought that because it was an interactive element it would have to be run on the client?

#

what you think about my current logic?

#

maybe its bad

sullen oracle Feb 27, 2025, 2:21 PM

#

drowsy gorge im still learning ssr on angular, sSo I thought that because it was an interacti...

where did you read that?^^

#

if it can be rendered on the server, do it

drowsy gorge Feb 27, 2025, 2:21 PM

#

but its what im trying to learn

drowsy gorge Feb 27, 2025, 2:21 PM

#

sullen oracle where did you read that?^^

maybe old yt videos

#

so what you would change on my logic?

#

what about cdkDropList

sullen oracle Feb 27, 2025, 2:22 PM

#

remove the @if that checks if you're in the browser

#

and remove the || platformService.isServer too

drowsy gorge Feb 27, 2025, 2:23 PM

#

right

#

and what about incremental hydration?

sullen oracle Feb 27, 2025, 2:23 PM

#

drowsy gorge im still learning ssr on angular, sSo I thought that because it was an interacti...

more regarding this, there is no interactivity on the server, so your click handler doesn't matter for SSR

#

maybe that's what was being said or read

#

and you misunderstood it or something

sullen oracle Feb 27, 2025, 2:23 PM

#

drowsy gorge and what about incremental hydration?

what about it?

drowsy gorge Feb 27, 2025, 2:25 PM

#

sullen oracle what about it?


openDialog() {
    // ! if is rendering on server, ignore
    if (this.platformService.isServer) return;

    const dialogRef = this.dialog.open(CardSelectDialogComponent, {
      height: "400px",
      width: "600px",
    });

but on typescript i need to make this logic right?

sullen oracle Feb 27, 2025, 2:25 PM

#

no

#

as i said

#

the click handler doesn't matter

#

nobody is clicking it on the server

drowsy gorge Feb 27, 2025, 2:26 PM

#

right, do you recomend something where i can learn more ssr on angular? the docs are ok, but i need something more

sullen oracle Feb 27, 2025, 2:27 PM

#

no idea tbh sorry. i never did any tutorial

#

just suffered through it

#

it's not really complicated imo.
You just don't do anything special until it breaks

#

then you can add your isServer/isBrowser checks when required

next vault Feb 27, 2025, 2:28 PM

#

More specifically, you barely ever need those checks. And even if "something breaks" there are often better options than a direct "isServer" check.

sullen oracle Feb 27, 2025, 2:28 PM

#

and it usually only breaks when you or a 3rd party accesses browser only apis

#

like window/document

drowsy gorge Feb 27, 2025, 2:29 PM

#

right, do you recomend using incremental hydration?

sullen oracle Feb 27, 2025, 2:29 PM

#

that depends on your specific app

#

if there are scenarios where using it would make sense

#

personally i haven't come across something yet i had to defer

drowsy gorge Feb 27, 2025, 2:31 PM

#

It's an app that will be used more by users within companies, so as it's starting to be made from scratch, I'd like to learn and make it as performant as possible, so I don't go back later

next vault Feb 27, 2025, 2:31 PM

#

Incremental hydration is something you can add later if you want to squeeze out every last drop of performance

sullen oracle Feb 27, 2025, 2:31 PM

#

^ was about to say that

#

just build the app and add it later if you need to

next vault Feb 27, 2025, 2:31 PM

#

I wouldn't worry about it first when just starting out with SSR/SSG

drowsy gorge Feb 27, 2025, 2:33 PM

#

and when should i use ngSkipHydration

sullen oracle Feb 27, 2025, 2:33 PM

#

ideally, never

drowsy gorge Feb 27, 2025, 2:33 PM

#

yeah, but in what cases will require that?

sullen oracle Feb 27, 2025, 2:34 PM

#

i know one case where it's required lemme try to find the github issue

#

https://github.com/angular/angular/issues/50543

GitHub

ng-template gets rendered twice during hydration (when anchor comme...

Which @angular/* package(s) are the source of the bug? platform-browser Is this a regression? No Description when hydration is enabled and a component uses ngTemplateOutlet to render a template pas...

#

which is very visible when using the page

#

so i guess rule of thumb, if you don't see any visual errors or errors in the console, no need to use it

drowsy gorge Feb 27, 2025, 2:48 PM

#

ok, so i have this service that allow me save layout changes on localstorage, in that case we need to verifie if is running on browser right? but since that the helper methods like additem, does not manipulate localstorage direcly , but the signal, i need that if statment there?

sullen oracle Feb 27, 2025, 2:49 PM

#

if addItem is only called from user interactions, it doesn't need a check

#

just like the click handler

#

for the rest, yeah. you technically need some kind of check.
however, if it's layout changes, i would assume those affect how some pages look?

#

which would mean it will render differently on the server

#

cause you don't have that information there

drowsy gorge Feb 27, 2025, 2:51 PM

#

#

the additems is called from the openDialog i shared

sullen oracle Feb 27, 2025, 2:51 PM

#

then no check is needed there

next vault Feb 27, 2025, 2:52 PM

#

May I ask why you are even doing SSR? SSR for things that require login is an immensely more complicated task than otherwise.

sullen oracle Feb 27, 2025, 2:52 PM

#

sullen oracle cause you don't have that information there

so i would probably think about storing that layout information either in a cookie (if it isn't super large, as it will be included in every request) or with a proper backend/db storage

drowsy gorge Feb 27, 2025, 2:56 PM

#

the layout is basically an state for my dashboard items position, for allow user to save there preferences, and later i will also save this data on db or kv, to allow the user to always have the same layout on every device he login, maybe its overkill, but if you guys have some suggestions?

next vault Feb 27, 2025, 2:56 PM

#

Sure that's fine. The question is still why this app needs SSR.

drowsy gorge Feb 27, 2025, 3:00 PM

#

next vault Sure that's fine. The question is still why this app needs SSR.

I'm new to angular, because in this project it happened to be in angular, but I came from the react, next js, tanstack start ecosystem, and as the concept of SSR is very common there and in theory nowadays it is very good, so I decided to start this with ssr, it could be overkill, or I'm adding more complexity. but on the one hand, this way I learn a little bit about everything in angular

next vault Feb 27, 2025, 3:03 PM

#

SSR in general is a great tool. However when it comes to login suddenly the complexcity explodes. You now have to worry about:

Where to store the user login token / session
How to access any APIs using that token when you're rendering server side

This might sound trivial, but it is not at all, especially if you want to keep writing your normal HttpClient code in Angular, but it must now work server- and client-side.
For an app like this you have to ask yourself it that is worth it for what benefit. The most useful aspect of SSR is making your site more SEO-friendly. I would argue that is not really relevant for an app that you need to log in to.

drowsy gorge Feb 27, 2025, 3:12 PM

#

yh, maybe I'll have some difficulties doing the authentication part, but maybe it'll be worth it, and it's always a learning experience. But by chance I ended up here in an article, which seems to be a good starting point, using interceptors and middleware in the express server, and it seems to work the way I would need.

#Correct use of ssr hybrid aproach