Angular Universal SSR Double Loading

Technical Questions
1

Hello,

I’m testing out Builder.IO for my app and I am noticing some interesting behavior. We use Server Side Rendering with Angular Universal and when the fully rendered app is delivered to the browser Builder does another load of the data on the init of the component. The user experience is a little strange because on the initial load the user sees the fully rendered page, then a blank screen, and then the final page. I want to only see the server-side rendered page. Here is a video showing this behavior. https://i.imgur.com/r7tM3EI.mp4

We are running on Angular 10.

Is there any way to control this with Builder?

2

Thanks for reaching out! Would you mind sending the Builder page url you’re working on? It should start with “builder.io/content…” Feel free to direct message me with the url if you’d like.

3
4

Thanks for sending that! The first thing I’ve noticed is that your Builder pages are not yet connected to your site. Here’s a guide to get that setup.

Screen Shot 2021-03-02 at 5.13.42 PM
Screen Shot 2021-03-02 at 5.13.42 PM1374×302 77.7 KB

5

Just wanted to follow up to let you know the flash is definitely not expected behavior. We us angular’s TransferState to transfer the server side content to the browser so that this flashing doesn’t occur. If you haven’t already, I’d recommend seeing if you can reproduce your issue on our angular universal example. If you can reproduce the issue there, or can create a small example repo like that where you can reproduce the issue and share that (ie github, sandbox, etc) we’ll happily investigate further

6

I’m unable to run your example with SSR. ng serve and npm run serve:prerender commands work fine, but npm run build:ssr && npm run serve:ssr do not. Getting an error with a window reference

ERROR Error: Uncaught (in promise): ReferenceError: window is not defined

ReferenceError: window is not defined
at BuilderComponentComponent. (/Users/test/Downloads/builder-master/examples/angular-universal/node_modules/@builder.io/angular/dist/bundles/builder.io-angular.umd.js:1002:29)

7

If you could create a CodeSandbox with some minimal code that reproduces/triggers the problem and send the link to us, that could help us a lot when debugging the error. Thanks!

8

Hi new to the form and been attempting to use builder’s Vue RenderContent as well and experiencing the same issue. Here’s a github repo with a minimal setup that is reproducing the issue. GitHub - launchupio/flicker-builder: Simple Nuxt 2.15.8 + Builderio demo to show components disappearing

We’ve definitely narrowed it down to the RenderComponent being the issue. Here are the things we’ve tried to prevent the issue from happening.

  1. create a minimal repo with just a single custom component
  2. generated the server static HTML and client HTML and placed in the diff directory of the repo
  3. created a diff of the dom tree
  4. manually modified the server static HTML to match client diff
  5. statically stored the content json from getContents - attempting to eliminate getContents being an issue

@kara