evertonrobertoauler / cli-universal-demo

80 stars 18 forks source link

Not quite understand what's the server side render from this code #1

Closed hintcnuie closed 7 years ago

hintcnuie commented 7 years ago

Hi, Would you please help me get more understanding about the Angular Universal? I cloned your code and got it run, but I can't get what's the exactly meaning which is the server side render from the code. my page started from Angular Cli:

snip20170330_1

page from npm start:

snip20170330_2

I also notice there is a server.ts for node express , and a AppServerModule for Anguar universal, but I can't connect these two picecs, when will the AppServerModule be invoked? please help to give me answer, much thanks!

NKjoep commented 7 years ago

In this setup the main point is when accessing the localhost you are actually calling the nodejs webserver.

There, the Expressjs will be triggered and will execute all the angular code but server side producing a full html page.

if you look at this code from server.ts:

app.engine('html', (_, options, callback) => {
  const opts = { document: template, url: options.req.url };

  renderModuleFactory(AppServerModuleNgFactory, opts)
    .then(html => callback(null, html));
});

you can see here we introduce a new rendering engine for the Expressjs library and few lines below:

app.get('*', (req, res) => {
  res.render('index', { req });
});

we instruct it to use it whenever a HTTP Get call arrives.

From there on, the ball goes to app.server.module.ts which bootstraps the angular app.

hintcnuie commented 7 years ago

yes, I get a little more understandings by your exploration, thank you!

And I think this example is a little simple and tricky, maybe another more common and meaningful story using the Angular Universal is better. I have another idea and think if the Server render is useful for this case. There is an GenericError page in my project, which displays the Apologies information and give an link for customers for help. Besides this, it displays a timestamp information , which is the timestamp from server. This timestamp is using Server timezone and used for developers to diagnose the tracing log, since customer maybe from different country and timezone is varying, we can't use JavaScript to generate this. See the last line of the below screenshot:

snip20170331_5

I wonder if this line of code can leverage the Angular Universal function, please give me your comments, thanks.

NKjoep commented 7 years ago

I see.

Actually there aren't many robusts and good ways to know the local user timezone from the server. With the client-side code you can do that actually only because the browser exposes that information and the code is running in the user machine.

But, if you know your audience is coming always from the same timezone then you could transform it no matter what. (I am thinking more of an intranet where you team is located in a specific geo area). In that way you would improve the server timestamp with a more meaningful representation.

hintcnuie commented 7 years ago

well, the application we are developing is working for different geo areas, support many countries.

The issue is not to get the user timezone from server, but display the server timezone 's time into user browser.

If using Angular purely, the timezone information will be the local user's timezone, which is useless for us; Another solution is to publish a time service on the server side, the client side will retrieve this time information when needed. But I think the Angular Universal can also do the same job.

NKjoep commented 7 years ago

Honestly I think this problem is not connected to angular. You would face this with any other server-side framework.

And yes, you should rely in some custom logic to translate the information in something useful.

hintcnuie commented 7 years ago

you are right, it's just an scenario I thought, thanks for your reply!