Universal pre-rendered styles are not correct

[cyrilletuzi]

With last nightly build, there are no more blocking errors with Flex Layout in Universal, but the pre-rendered styles are not correct.

Repro :

• git clone https://github.com/cyrilletuzi/nguniversal-expressengine-httpinterceptor.git
• git checkout -b flexlayoutissue
• npm install
• npm start
• go to localhost:3000 : rendered correctly with JavaScript (vertical in small screens, horizontal in desktop screens with 3 stretched items by row)
• disable JavaScript to test what the server is pre-rendering and refresh : not rendered correctly (horizontal with the 4 items on the same line, on all screen sizes)

The only flex relative code is in src/app/app.component (the other files are just Universal boilerplate, and innerHTML is just to quickly test different heights) :

<div fxLayout.xs="column" fxLayoutWrap.xs="nowrap">
  <div class="test" fxFlex.gt-xs="calc(100% / 3)" *ngFor="let item of list" [innerHTML]="item"></div>
</div>

Javascript-Enabled:

Mobile Viewport

Desktop Viewport

---

Javscript-Disabled (prerender version only):

Mobile Viewport

Desktop Viewport

[ThomasBurleson]

This is a known issue.

Issue:

Current SSR must handcraft the flexbox CSS for the initial rendered page.

Reason:

The flex-layout directives use the browser viewport size to determine the active breakpoint and generate the inline styles. Current SSR does not have access to remote viewport size.

@vikerman - We should discuss possbile solutions to this.

[cyrilletuzi]

Isn't it possible the render classic/static responsive CSS ? I mean something like this, according to the template above :

@media all {
  display: flex;
  flex-wrap: wrap;
}

@media all and (max-width: 599px) {
  flex-direction: column;
  flex-wrap: nowrap;
}

Why is the real viewport size needed ? The browser knows how to take care of that by itself.

[ThomasBurleson]

@cyrilletuzi - angular/flex-layout does not generate CSS stylesheet. Instead, it dynamically generates and injects inline CSS based on breakpoint activation.

I see two (2) issues (based on snapshots of your sample):

• The layouts for desktop versions [for javascript ON or OFF] should the same.
• The layout for mobile PRE-RENDER is obviously not correct (as expected with known issue).

[cyrilletuzi]

The layouts for desktop versions [for javascript ON or OFF] should the same.

Could it be related to how default values are managed in Flex Layout ? Because when I first tried this package I was quite surprised.

First, I tried to do this : as the default CSS behavior (vertical display) was fine for mobile, I tried this :

<div fxLayout.gt-xs="row"></div> 

I expected only desktop screens to be impacted, but the result of this code is to generate display: flex by default, and as flex-direction default CSS value is row, then in mobile the content was horizontal too ! That's why I inverted the logic (like in the issue initial message).

It's the same for all other flex layout properties (it's why I need to do fxLayoutWrap.xs="nowrap" despite it is the default value in CSS).

[ardatan]

It is possible to predict screen information by using user-agent. However, it requires another implementation in platform-server, because it just gives "Fake user agent" in platform-server.
On the other hand, matchMedia and getComputedStyle mocks can be used for SSR instead of using user-agent without waiting for platform-server update.

[ThomasBurleson]

@ardatan - matchMedia + getComputedStyle on SSR will not be using the viewport size of the remote client so the generated, injected inline styles will mostly likely be wrong for mobile.

[ardatan]

@ThomasBurleson Sorry, you are right. We still need some information about screen sizes from somewhere like user-agent. Unfortunately, it needs a change in platform-server, does it?

[ThomasBurleson]

I think the platform server needs to seed the remote client with micro-script to report the viewport size (and perhaps other information).

[alirezamirian]

Anything new on this thread?
We've widely used this library and currently it's the only big issue preventing our server-side rendering :)

[naveedahmed1]

Since #353 has been merged, I assume that responsive utilities (media-query) should now work with server side rendering.

But below doesn't work with latest version of flex-layout:

media.isActive('xs')
media.isActive('gt-xs')
fxHide.md
fxLayoutGap.gt-xs="15px"
etc