search

fullstackproltd / AspNetCoreSpa

Asp.Net 7.0 & Angular 15 SPA Fullstack application with plenty of examples. Live demo:
https://aspnetcorespa.fullstackpro.co.uk
MIT License
1.48k stars 465 forks source link

Server Side Rendering #55

Closed BitFlipp3r closed 3 years ago

BitFlipp3r commented 7 years ago

Hi @asadsahi Your template is really great, thanks for the hard work! The only thing missing would be SSR. Do you think it's possible to implement it like this? Kind Regards, Michael

asadsahi commented 7 years ago

@BitFlipp3r Had some issues with SSR initially, but now its a little stable, will give it another try.

asadsahi commented 7 years ago

I dont fully understand SSR or have seen a complete example where there are alot of client side dependencies in an application like this one. How easy SSRS. Help appreciated.

pgvr commented 7 years ago

Hey @asadsahi, any progress on the SSR?

asadsahi commented 7 years ago

Still quite complex, no idea. Help welcome. :)

asadsahi commented 7 years ago

@patrickgoeler @BitFlipp3r I have made some SSR progress in netcore2 branch of this project. But there are few libraries that aren't supported for SSR yet, e.g ng-bootstrap and material2 etc. So thought of updating you guys that those features are coming.

BitFlipp3r commented 7 years ago

Awesome. Thank you very much for your efforts. Please take your time :)

asadsahi commented 7 years ago

Hi guys, just to update you on this one. I still can't see a clean way to make it work with SSR. With more features and libraries it breaks on SSR mode. So it is a trade off between having more functionality with 3rd party libraries or getting SSR working in a small demo project. So we'll have to wait until it gets more stability around third party libraries like ng-bootstrap or SignalR etc.

isaacrlevin commented 6 years ago

@asadsahi I am intrigued by this project as I contribute to a similar project here. I see that you have gotten some basic SSR and SEO concepts to work. Have you had any issues with bundling size or performance issues when doing SSR in production configs?

asadsahi commented 6 years ago

hi @isaac2004, as of now, SSR work in few basic scenarios and it work in SSR branch of this project as well.

But, based on my personal experience it isn't as streamlined as it should be. e.g I come across this issues https://github.com/angular/universal/issues/877, for which I have to use --aot flag for SSR build to make it work but the issue is still unanswered. Long discussion for same issue is here. Also, deployment of SSR isn't quick/ideal because of node_modules need to be packaged as part of deployment as explained in this issue.

isaacrlevin commented 6 years ago

I would love for npm to move to a package store like Dot Net Core has. I know it isn't as easy as that, but the need to have node_modules on the server or to bundle and deploy.

crh225 commented 6 years ago

@isaac2004 why do you need node_modules on the server? just curious

asadsahi commented 6 years ago

For SSR to work 😊

crh225 commented 6 years ago

good to know!

Daeamon commented 6 years ago

SSR is necessary for SEO optimization (for example, for the correct indexing of your site by search engines)

latchezar-kostov-ascendlearning-com commented 6 years ago

Fyi, when I enabled SSR, I have seen a few issues:

  1. package.json npm script build:ssr. I had to change this to "build:ssr": "ng build --prod --project=ssr", as it seems that "build:ssr": "npm run build --project=ssr" is just executing ng build --prod and the --project=ssr parameter doesn't seem to get added onto this command.

  2. I seem to have to change Startup.cs options.BootModulePath = $"{spa.Options.SourcePath}/dist-server/main.bundle.js"; to options.BootModulePath = $"{spa.Options.SourcePath}/dist-server/main.js"; in order to get this to work.

  3. Even after making these changes, when the project is debugged, I receive NodeInvocationException: Http failure response for (unknown url): 0 Unknown Error.

rezabay commented 6 years ago

Please take a look at this example here: Link

rezabay commented 6 years ago

Finally I have managed to run SSR by angular cli 7 and material2. Here is the demo app using ASP.Net Core 2.2+Angular 7+Material2: Link

sajidali2444 commented 6 years ago

Greate @rezabayesteh can you please share your code.

tung238 commented 5 years ago

Fyi, when I enabled SSR, I have seen a few issues:

  1. package.json npm script build:ssr. I had to change this to "build:ssr": "ng build --prod --project=ssr", as it seems that "build:ssr": "npm run build --project=ssr" is just executing ng build --prod and the --project=ssr parameter doesn't seem to get added onto this command.
  2. I seem to have to change Startup.cs options.BootModulePath = $"{spa.Options.SourcePath}/dist-server/main.bundle.js"; to options.BootModulePath = $"{spa.Options.SourcePath}/dist-server/main.js"; in order to get this to work.
  3. Even after making these changes, when the project is debugged, I receive NodeInvocationException: Http failure response for (unknown url): 0 Unknown Error.

I think because you running on local host and node did not accept self sign ssl. One way is add this line in to main.server.ts.

process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0';

I was able to see html response after that. However css style not work and elements not show, still figuring out :(

tung238 commented 5 years ago

Btw, this thing is pre-rendering only, not actual server site rendering. It is only able to pre-render index page at build time, other pages still render by client at run time so not really useful.

asadsahi commented 3 years ago

I think server side rendering in a complex angular app is challenging, especially when there are may external dependencies with SSR issues. and I have decided not to add SSR support in this repo. Hence closing this. Feel free to support in this area for another branch which might be useful for someone. Thanks