Angular Vienna, Server Side Rendering and Pre Rendering with Angular Universal, July 2019
ฝัง
- เผยแพร่เมื่อ 10 ก.ย. 2024
- Talk by Ferdinand Malcher
Single page applications in their pure form have one conceptual problem: the JavaScript code runs in one single "empty" HTML page. Search engines like the Google Bot don't like rendering JavaScript and see nothing but a blank page. SEO becomes almost impossible! What is more, before the user can interact with our app, the code must be downloaded and rendered. This extends loading time and makes users frustrated.
You last couple of minutes about lazy loading in server are gold, I, of course, forgot to add that. Thanks a lot :)
Please be aware that this is not necessary anymore with Angular 9 and Ivy 🙂
@@ferdinandmalcher7434 how to apply ssr in angular 9?
@@chicagoboy279 The same way I showed in the video. ng add and then use the provided NPM scripts.
@@ferdinandmalcher how to apply it on a specific route in our application?
Great Explanation on Angular Universal. Thanks for Sharing 💖
can we do ssr on a specific route?
need help, I am using angular 10, when I applied the angular universal SSR and pre-rendering, but I got window is not defined I tried all the ways by injecting it and use it globally , and by use isPlatformBrowser but nothing solve the problem , i need to know how i can know the root cause of the problem in order to know what's the solution for it , Thank you :)
Really clear, beautifully explained.
Great talk, helped me a lot! Thanks for sharing!
Hi Ferdinand, Its a serious matter here! I've been working on SSR since 30+ days, and still stuck on somewhere.
Actually I'm working on an angular project where all the DOM operations, localStorage, sessionStorage, cookeis etc. are widely used. But for SEO purpose and Social Platform sharing, I need to update meta tags dynamically, which is only possible by using SSR. So I've implemented this, I got a lot of errors and challenges but I've resolved all those one by one. Even for lazy loading with http calls server was not working fine, then I changed it by switching the platformbrowser. Now project is running with SSR and seems ok with existing functionalities. But what I saw, if I see view source of the page there's not all rendered html showing up inside ... .
And also there, meta tags are not dynamically added as per page needed.
I've figured out something, its making all http requests at platformbrowser, and not updating meta tags dynamically.
Finally I'm lost and confused. So plz help me out step by step to achieve this SSR stuff.
Hi,
Did the prerendered with: ng run App:prerender
and then Server that app for SSR with: node dist/app/server/main.js
But not getting the statics routes as pre-rendered. Any help on this
Thanks in Advance
It was quite interesting talk and very useful. It was good I chose to go though this rather than boring documentation. If you might have covered or pointed out any resource on how we can differentiate between bot request and actual user request to redirect request to express server.
To difefrentiate between bot and actual user you need to analyze the user agent string from the request. You should use a useragent parser for this, of course, like this one: www.npmjs.com/package/useragent
@@ferdinandmalcher7434 Thank you, just wanted to know that there is nothing fancy to be done after the server and client files generation. I need to setup my web server to redirect based on useragent string to node server or the actual server hosting client site.
@@ShaikhShariq Yep, there is no built-in mechanism to determine the user agent. The Node.js server is the only instance that can read the useragent from the request. If you want to pass this to the application (e.g. to not render some parts for a bot) you can provide that information via the "providers" array within the ngExpressEngine.
@@ferdinandmalcher7434 I do have my main server as apache, which will host client site and additional node express server I will configure to host site for bots. Does this sound correct ?
Brilhant talk!!
My project on angular 8 compile successfully with npm run compile:server. But when i tried it run it with command node dist/server it shows me an error like "ReferenceError: window is not defined". Can anyone help me!
I did not mention this in the talk but: You can not use the "window" object in your code on the server because there is just a DOM emulation, no real DOM. You need to create a platform switch and ignore the code that uses window when the app runs on the server. You can use the functions "isPlatformBrowser()" and "isPlatformServer()" for this.
Thanks you very much, good job!!
Thank you Ferdinand :)
prerender not load
I am unable to compile it is not generating server.js file what to do sir
so I doubt this after 4 years😂. because now I gonna implement this. The thing is that if I use Django as the back end, is it mandatory to use the express engine?
You save my life!
I want to like that 100 times
Great talk. Thank you for the tutorial
thanks for sharing, It was very practical
Hi Ferdinand, this is very helpful, thanks. quick question, how can we trigger the node backend rendering from a Java/spring based platform. Any link you can share?
In fact I never did this before... here's two links that might help:
github.com/angular/universal/issues/280
github.com/swaechter/angularj-universal
Me ajudou muito! Obrigado!
please how to deploy angular universal in IIS ...its bit confusing ....every only making tutorial on development mode..no one show after deployment ..please sir ....
The deployment works the exact same way as without pre-rendering. After running the pre-renderer, your "dist" folder will contain all the files, HTML and JS. You can deploy this folder as is.
Superb talk
Hi Ferdinand, Good explanation. I was trying to implement CSR and SSR in my application. But i was not clear how to move forward. Could you please provide any sample code where few components as client side rendering and few components as server side rendering. (Tried Hybrid approach but i was not clear about it).
It would be the great help. Thanks in Advance
Hello! I tried to add prerender technic into my Angular 8 Universal application (29:07 timeline in the video), but I caught an error. Can anybody help me?
node dist/prerender
ERROR TypeError: Cannot read property 'load' of undefined
Please provide your code so we can see the context!
crazy talk. was expecting lot of claps. :D
Definitely crazy talk
Wouldn't it be just faster and easier to use wordpress instead?
Hello and Thank you.. that was so great. But I'm getting "Unable to extract routes from application". and I'm using lazy loading for my routes. Also I'm using angular 9 and ivy. I added ang../univ.. but when I type "ng run [project_name]:prerender" I get this error!. I would be thankful if anyone could help me.
Can we use this in ionic Project
good overview
before of this run ng serve?
You don't need to run ng serve with Server-Side Rendering. You first need to build the client app (ng build) and the server app. The Node.js server then serves both the client and server app. Meanwhile there is also a dev server (like ng serve) for SSR. Use the generated NPM script "npm run dev:ssr" for this.
clear but still nextjs is more easier
👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻💖💖💖💖💖💖
where can I get github repo ???
github.com/angular-schule/demo-ssr-playground
where is prerender.ts file !
It was in the repo. However, as for Angular 9 the pre-rendering is integrated into the Angular CLI. You just need to provide a list of routes and the CLI will take care of the rest.
i ve been there too