Integrate ssr #157

birkskyum · 2024-03-28T12:45:50Z

This work is to enable SSR, allowing loading pages outside of the "/" url

birkskyum · 2024-03-28T13:14:38Z

The landing page, docs and Most examples are working here now. The remaining issues with some examples are related to the ngOnRender() in the map.component still running server-side, as I mention in here, which it of course shouldn't, but I'm still not clear on how to make it client-only e.g. with afterNextRender/afterRender.

Effectively, I just take the content of ngOnInit and put it inside an afterNextRender in the constructor. I have had to disable the content of the ngOnDestroy on multiple occations, because it's being ran servers-side not having access to a global window object etc. - this is somewhat ad-odds when using the library in a SPA where it's important to do the cleanup, but I don't know how to conditionally disable it yet or mark the ngOnDestoy, or entire component for that matter, as client-only.

package.json

HarelM · 2024-03-28T13:32:58Z

projects/ngx-maplibre-gl/src/lib/control/control.component.ts

-    if (this.mapService.mapInstance.hasControl(this.control)) {
-      this.mapService.removeControl(this.control);
-    }
+    // if (this.mapService.mapInstance.hasControl(this.control)) {


I guess you could use "?" here so that if this is not initialized, then it won't do anything, can't you?
I'm not very worried about SSR memory leaks for this lib, right?

I'm more concerned about leaks on the client actually, where the objects are created, because the SSR apps today often do soft navigation where possible, so they won't necessarily clean up the client until a proper page refresh is performed. I can see this when debugging the examples - I had to go into each one and only when i hit refresh they'd trigger some error. Initializing on the client, and cleaning up on the server, or vice-versa, looks to me like asking for trouble.

Hmm, yea I get your point here.
I'll see if I can look into it in the next few days...
Documentation is so lacking that it makes this whole process very painful...

What about injecting the platform to check if its the browser and then do the clean up?

private readonly _isBrowser: boolean = inject(Platform).isBrowser; ngOnDestroy() { if(this._isBrowser) { ... } }

It's used by the angular team in the components repo too e.g.

https://github.com/angular/components/blob/5a327b6741701a00cd3a409236e3f98a470c3820/src/material/datepicker/calendar-body.ts#L274-L277

projects/showcase/src/app/app.config.ts

Co-authored-by: Harel M <harel.mazor@gmail.com>

angular.json

HarelM · 2024-04-03T08:18:55Z

@marcjulian this PR is against a branch to solve github SPA problem and allow SEO for the demo pages.
If you would like to work on it and solve this issue I can merge this to the branch and you can continue the work there.
I was planning to do it but haven't got to it yet...

marcjulian · 2024-04-04T08:26:27Z

@HarelM I can work on this, when I find more time. Yes I saw the Githup SPA issue, will be great when the library supports SSR anyways.

HarelM · 2024-04-04T19:04:10Z

I have no clue how to continue.
It seems that the ssr build is passing and I get all the examples with no console error message, but when I set prerender to true I get all the fun error message as before.
I've added a comment here:
angular/angular#54965
But I don't have high hopes to get a solution for this...

HarelM · 2024-04-04T19:05:31Z

@marcjulian feel free to tackle this. These error messages are too cryptic for me to understand and it seems like the prerender is in experimental state or something... IDK...

marcjulian · 2024-04-05T10:23:36Z

@HarelM I got prerendering working, however, only with routes.txt file at the moment.

I still had some issues with the MatIconRegistry behaving differently on the server. This was also due to the base-href used during build. Icons are now loaded with the custom loader option and that work on the server and browser.

I also removed the base-href from build, because the map wouldn't load otherwise when using npm run serve:ssr:showcase. The browser printed the following errors:

When I set prerender in angular.json to true and use npm run build:showcase it never ends. Maybe one of the demo pages is still making trouble during SSR prerendering. I added 4 routes to routes.txt for testing and when you build the showcase you can start just the browser page (e.g. npx serve dist/showcase/browser - open localhost:3000). There you can navigate around and a browser refresh will work on the prerendered pages.

I will try to find some time to add all routes to the routes.txt to see which route interferes with prerendering. Let me know what you think.

projects/showcase/src/app/demo/examples/live-update-feature.component.ts

HarelM · 2024-04-05T10:30:16Z

projects/showcase/src/app/shared/layout/layout-toolbar-menu.component.ts

  }

  ngOnDestroy() {
-    this.portalOutlet.detach();
+    if (this._isBrowser) {


Can't we simply check if portalOutlet os not null?

HarelM · 2024-04-05T10:41:53Z

Besides the above nit picking this is a good step forward.
I'll merge this to the branch so we can continue the work there.
I suggest to try and add it to the build and add routes one by one until everything is working.
If prerender will work for most of the routes it is good enough for the demo page.
Thanks for all the work on this!

…mponent.ts

* update to browser-esbuild * upgrade to application * bump deps * ng update changed tsconfig * Fix package version * update deploy path * fix lockfile * Integrate ssr (#157) * Enable SSR with migration script * Add zone.js to polyfills * Make Map component SSR compatible * Make "Scroll demo into view" client only * afterNextRender in layout-toolbar-menu * afterNextRender in control.component.ts - fixes terrain example * Lint - Update projects/showcase/src/app/app.config.ts Co-authored-by: Harel M <harel.mazor@gmail.com> * use withFetch to fix Error retrieving icon * add custom loader for svg, fix loading icons on server * fix loading map for ssr app by removing base-href * detach portal in browser only * remove polyfills * replace window functions * create popup in browser only with afterNextRender * cleanup unused lifecycle hooks, remove control only in browser * prerender with routes file * Update projects/showcase/src/app/demo/examples/live-update-feature.component.ts --------- Co-authored-by: Harel M <harel.mazor@gmail.com> Co-authored-by: Marc Stammerjohann <8985933+marcjulian@users.noreply.github.com> * Small changes to docs * Fix test due to change in life cycle * Added more routes * ignore problematic routes * Add ignore to another test * Allow prerender for all routes (46) * Fix live update of image source * Simplify code a bit * fix multiple selectors for clear search button --------- Co-authored-by: Harel M <harel.mazor@gmail.com> Co-authored-by: Marc Stammerjohann <8985933+marcjulian@users.noreply.github.com>

birkskyum force-pushed the integrate-ssr branch from b761f23 to 24a7aa5 Compare March 28, 2024 12:46

birkskyum added 2 commits March 28, 2024 13:57

Enable SSR with migration script

b8d9958

Add zone.js to polyfills

62b7a95

birkskyum force-pushed the integrate-ssr branch from d6e78e6 to 62b7a95 Compare March 28, 2024 12:57

birkskyum added 4 commits March 28, 2024 14:00

Make Map component SSR compatible

a93d765

Make "Scroll demo into view" client only

1b58482

afterNextRender in layout-toolbar-menu

7a3e2e3

afterNextRender in control.component.ts - fixes terrain example

7dc4425

HarelM reviewed Mar 28, 2024

View reviewed changes

package.json Show resolved Hide resolved

HarelM reviewed Mar 28, 2024

View reviewed changes

projects/showcase/src/app/app.config.ts Outdated Show resolved Hide resolved

Lint - Update projects/showcase/src/app/app.config.ts

b52e8dc

Co-authored-by: Harel M <harel.mazor@gmail.com>

birkskyum mentioned this pull request Mar 28, 2024

Allow prerender for all showcase routes and support for SSR/SSG #156

Merged

marcjulian reviewed Apr 3, 2024

View reviewed changes

angular.json Outdated Show resolved Hide resolved

marcjulian added 9 commits April 4, 2024 22:12

use withFetch to fix Error retrieving icon

af10a20

add custom loader for svg, fix loading icons on server

619d44e

fix loading map for ssr app by removing base-href

f16b1a4

detach portal in browser only

8431a01

remove polyfills

05b5424

replace window functions

aaf6446

create popup in browser only with afterNextRender

3e3dceb

cleanup unused lifecycle hooks, remove control only in browser

34fd4cc

prerender with routes file

b8c5073

HarelM reviewed Apr 5, 2024

View reviewed changes

projects/showcase/src/app/demo/examples/live-update-feature.component.ts Outdated Show resolved Hide resolved

HarelM reviewed Apr 5, 2024

View reviewed changes

Update projects/showcase/src/app/demo/examples/live-update-feature.co…

8a8da59

…mponent.ts

HarelM marked this pull request as ready for review April 6, 2024 10:26

HarelM merged commit ee2943d into maplibre:update-to-application Apr 6, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Integrate ssr #157

Integrate ssr #157

birkskyum commented Mar 28, 2024

birkskyum commented Mar 28, 2024 •

edited

Loading

HarelM Mar 28, 2024

birkskyum Mar 28, 2024 •

edited

Loading

HarelM Mar 29, 2024

marcjulian Apr 3, 2024 •

edited

Loading

HarelM commented Apr 3, 2024

marcjulian commented Apr 4, 2024

HarelM commented Apr 4, 2024

HarelM commented Apr 4, 2024

marcjulian commented Apr 5, 2024

HarelM Apr 5, 2024

HarelM commented Apr 5, 2024

Integrate ssr #157

Integrate ssr #157

Conversation

birkskyum commented Mar 28, 2024

birkskyum commented Mar 28, 2024 • edited Loading

HarelM Mar 28, 2024

Choose a reason for hiding this comment

birkskyum Mar 28, 2024 • edited Loading

Choose a reason for hiding this comment

HarelM Mar 29, 2024

Choose a reason for hiding this comment

marcjulian Apr 3, 2024 • edited Loading

Choose a reason for hiding this comment

HarelM commented Apr 3, 2024

marcjulian commented Apr 4, 2024

HarelM commented Apr 4, 2024

HarelM commented Apr 4, 2024

marcjulian commented Apr 5, 2024

HarelM Apr 5, 2024

Choose a reason for hiding this comment

HarelM commented Apr 5, 2024

birkskyum commented Mar 28, 2024 •

edited

Loading

birkskyum Mar 28, 2024 •

edited

Loading

marcjulian Apr 3, 2024 •

edited

Loading