Skip to content

fix(content): prevent forceUpdate in SSR #27440

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sean-perkins merged 3 commits into from
May 9, 2023
Merged

fix(content): prevent forceUpdate in SSR #27440

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ddc5840
fix(content): prevent forceUpdate in SSR
sean-perkins May 9, 2023
38f5db0
chore: docs, clean-up
sean-perkins May 9, 2023
98431cb
chore: documentation
sean-perkins May 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 16 additions & 6 deletions core/src/components/content/content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import type { ComponentInterface, EventEmitter } from '@stencil/core';
import { Component, Element, Event, Host, Listen, Method, Prop, forceUpdate, h, readTask } from '@stencil/core';
import { Build, Component, Element, Event, Host, Listen, Method, Prop, forceUpdate, h, readTask } from '@stencil/core';

import { getIonMode } from '../../global/ionic-global';
import type { Color } from '../../interface';
Expand Down Expand Up @@ -172,11 +172,21 @@ export class Content implements ComponentInterface {
}

private resize() {
if (this.fullscreen) {
readTask(() => this.readDimensions());
} else if (this.cTop !== 0 || this.cBottom !== 0) {
this.cTop = this.cBottom = 0;
forceUpdate(this);
/**
* Only force update if the component is rendered in a browser context.
* Using `forceUpdate` in a server context with pre-rendering can lead to an infinite loop.
* The `hydrateDocument` function in `@stencil/core` will render the `ion-content`, but
* `forceUpdate` will trigger another render, locking up the server.
*
* TODO: Remove if STENCIL-834 determines Stencil will account for this.
*/
if (Build.isBrowser) {
Copy link
Copy Markdown
Contributor

@liamdebeasi liamdebeasi May 9, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And so I understand, this is to work around a stencil bug correct?

Copy link
Copy Markdown
Contributor Author

@sean-perkins sean-perkins May 9, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This isn't a workaround per-say. The reported issues attached are resolved by this change.

I had some discussions with Tanner around if forceUpdate should internally account for this. It checks for build conditions to see if it updatable: https://github.com/ionic-team/stencil/blob/main/src/runtime/update-component.ts#L328-L342, but should likely also check if it is in a browser context. At this time, we don't have enough historic data to confidently determine if forceUpdate should only execute in the browser or not. He is leading that conversation with the team and we will re-sync on the outcomes (if we can remove this in a future update of Stencil).

The problem that was occurring is that the pre-rendering logic would attempt to mock ion-content DOM tree, but would call forceUpdate as part of the first render, resulting in an infinite loop.

Copy link
Copy Markdown
Contributor

@liamdebeasi liamdebeasi May 9, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! Can we include this context in the comment too?

Copy link
Copy Markdown
Contributor

@liamdebeasi liamdebeasi May 9, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also if there's an open stencil issue it would be good to link to that in the comment

Copy link
Copy Markdown
Contributor Author

@sean-perkins sean-perkins May 9, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added some extra context + created a spike in JIRA for Stencil to track (and referenced it in the code comments).

if (this.fullscreen) {
readTask(() => this.readDimensions());
} else if (this.cTop !== 0 || this.cBottom !== 0) {
this.cTop = this.cBottom = 0;
forceUpdate(this);
}
}
}

Expand Down