Fixed component rerendering if there's only one renderer (framework components) #12131

elite174 · 2024-10-06T06:34:44Z

Changes

In this PR multiple server rerendering of the solid component is skipped if there's only one renderer in the project (solid-js).

I used only part of the solution for this issue.

If there're multiple rerenders, it should be processed in another way I suppose, but this little change can help if there's only one solid-js renderer.

Testing

Test was also added.

Docs

No need to update docs

changeset-bot · 2024-10-06T06:34:49Z

⚠️ No Changeset found

Latest commit: 1cf5bab

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

packages/astro/src/runtime/server/render/component.ts

elite174 · 2024-10-06T07:40:38Z

packages/astro/src/runtime/server/render/component.ts

+ 			// If there's only one renderer in the project (solid-js)
+			// we can skip the `check` calls and use that renderer (to not render solid component twice)
+			if (renderers.length === 1 && renderers[0].name === '@astrojs/solid') {
+				renderer = renderers[0];
+			} else {


this is the only change

matthewp

oops, accidentally approved.

matthewp · 2024-10-07T14:01:43Z

packages/astro/src/runtime/server/render/component.ts

-						break;
+ 			// If there's only one renderer in the project (solid-js)
+			// we can skip the `check` calls and use that renderer (to not render solid component twice)
+			if (renderers.length === 1 && renderers[0].name === '@astrojs/solid') {


Why only Solid.js?

because for some reason the tests fail for other frameworks. Moreover for solid it's critical to be rendered once, because solid doesn't have this "rerender" paradigm as react, preact or others.

More common solution could require much more efforts, so it should be carefully implemented. This is really easy fix which can help many people (because solid-start it's not that production-ready yet, so many people use astro+solid to get SSR), so we can do improvements step by step.

I tried to apply the solution suggested here, but looks like it doesn't work anymore for all the frameworks.

What tests fail? It's likely something we can fix. I don't think we should special-case one particular renderer in this case. There's nothing about this suggestion that shouldn't work everywhere.

If you could post the errors that occur when this is enabled for all renderers that would be helpful.

I would appreciate if you help to understand why the tests are failing.

Just pushed a commit

thanks, will take a look.

maybe here we need to check not renderers but validRenderers? I see that there can be a renderer with astro:jsx name, maybe this is the point...

No, the problem is that some renderers (Preact in particular), expect both check and renderToStaticMarkup to be called because they store state in check. We can probably make it a breaking change in 5.0 that check is not guaranteed to always be called.

Easy fix though, pushed a change.

Well there must be another issue too, will look into that.

elite174 · 2024-10-10T02:37:09Z

packages/astro/src/runtime/server/render/component.ts

@@ -132,6 +132,9 @@ async function renderFrameworkComponent(
 			// we can skip the `check` calls and use that renderer
 			if (renderers.length === 1) {
 				renderer = renderers[0];
+
+				// Still call `check` because some renderers store state during the check phase that they expect when `renderToStaticMarkup` is called.
+				await renderer.ssr.check.call({ result }, Component, props, children)


If you do this you render solid-js component twice (but that was the case we want to fix), so... you can just remove this if statement

I guess, it's possible to extend renderer interface with boolean flag shouldRun in order to explicitly say that this renderer should be called because it has some state which depends on the initial call?

You discovered that:

some renderers (Preact in particular), expect both check and renderToStaticMarkup to be called because they store state in check

Looks like it's not really obvious from the renderer interface, so that's why I suggest to extend it.

Hmm, it's a bit strange that function check (which should be pure) has some store in it

If you want to resubmit against next we could make this a breaking change that check is not guaranteed to run. In that case it would be on the renderer to not rely on it running. We'd also need to update Preact to account for that, I could do that part.

What do you mean by "resubmit" against next? next is a function which is called inside check?

@elite174 sorry for not explaining. We can't change the expectation that both check and renderToStaticMarkup both get called in 4.x. We already know it breaks out built-in renderers. That means it might also break external renderers.

We can make that a breaking change in 5.0 though, which is currently in beta. We are using the next branch for 5.0. If this PR was for 5.0 we could make this a breaking change, update the Preact renderer, document the change, etc.

Oh, yes, that would be awesome.

Just rebased the PR
And removed check call if there's only one renderer.

elite174 · 2024-10-18T02:34:06Z

Any news about this one? Will it be added to 5.0?

elite174 · 2024-10-23T10:54:34Z

@matthewp

bluwy · 2024-11-04T08:31:15Z

The tests aren't fixed yet. From what I understand above, Matthew will look into it, but might be a bit tight to take a look.

Personally I don't know if this is the right fix. Once you add another renderer, like MDX or Svelte, you'd get the double rendering behaviour again. It's patching things and makes the DX unpredictable.

It's also risky that if you used a component but forgot to add the integration or renderer, you'd get a cryptic error about rendering issues, rather than "couldn't find matching renderer for this component" type of errors. (I guess the test fails could be related to this)

elite174 · 2024-11-05T06:04:57Z

It doesn't fix the situation with multiple renderers, however this easy fix helps if there's only one. Looks like to fix this problem it should be done more work, so I suggest doing it at least step by step.

bluwy · 2024-11-05T07:58:15Z

I don't think it helps if there's no plan for the next steps, it'll only add upon the technical debt that we have to maintain. This easy fix is also going to impact DX as I mentioned above and isn't as harmless as it seems.

elite174 · 2024-11-05T16:00:53Z

Yeah, but... there's already a tech debt. And this debt is a bug. It should be fixed anyways.

github-actions bot added the pkg: astro Related to the core `astro` package (scope) label Oct 6, 2024

elite174 commented Oct 6, 2024

View reviewed changes

packages/astro/src/runtime/server/render/component.ts Outdated Show resolved Hide resolved

Fix component rerenders if there's only one renderer

d9fba90

elite174 force-pushed the fix-multiple-component-rerenders branch from 993f55b to d9fba90 Compare October 6, 2024 06:39

This was referenced Oct 6, 2024

@astrojs/solid-js renders solid-js components twice #8368

Closed

[Astro] createResource results get mixed up when rendering server only components with Suspense solidjs/solid#2131

Open

elite174 changed the title ~~Fix component rerenders if there's only one renderer~~ Fix component rerendering if there's only one renderer Oct 6, 2024

elite174 commented Oct 6, 2024

View reviewed changes

packages/astro/src/runtime/server/render/component.ts Outdated Show resolved Hide resolved

elite174 added 3 commits October 6, 2024 14:09

Try valid renderers

0a834a5

Check tests

dbf8b24

Fix rerenders only for solid

9be548c

elite174 changed the title ~~Fix component rerendering if there's only one renderer~~ Fix component rerendering if there's only one renderer (solid-js) Oct 6, 2024

elite174 commented Oct 6, 2024

View reviewed changes

elite174 changed the title ~~Fix component rerendering if there's only one renderer (solid-js)~~ Fixed component rerendering if there's only one renderer (solid-js) Oct 6, 2024

elite174 added 4 commits October 6, 2024 15:12

Added tests for solid

da70fb2

Try to fix solid renderer when there are many

d89706c

Renamed variable

b24c2b3

Removed possible fix

d2851c9

matthewp approved these changes Oct 7, 2024

View reviewed changes

matthewp requested changes Oct 7, 2024

View reviewed changes

matthewp reviewed Oct 7, 2024

View reviewed changes

elite174 and others added 2 commits October 8, 2024 10:28

Try to fix all for all the frameworks

68e0746

Ensure check is still called

834a01b

elite174 commented Oct 10, 2024

View reviewed changes

elite174 changed the base branch from main to next October 11, 2024 02:47

elite174 added 2 commits October 11, 2024 09:47

Merge branch 'next' into fix-multiple-component-rerenders

bf8d7d5

Remove renderer check call if there's only one renderer

1cf5bab

elite174 changed the title ~~Fixed component rerendering if there's only one renderer (solid-js)~~ Fixed component rerendering if there's only one renderer (framework components) Oct 14, 2024

elite174 mentioned this pull request Nov 2, 2024

Solid component is rendered several times on the server #12354

Open

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fixed component rerendering if there's only one renderer (framework components) #12131

Fixed component rerendering if there's only one renderer (framework components) #12131

elite174 commented Oct 6, 2024 •

edited

Loading

changeset-bot bot commented Oct 6, 2024 •

edited

Loading

elite174 Oct 6, 2024

matthewp left a comment

matthewp Oct 7, 2024 •

edited

Loading

elite174 Oct 7, 2024 •

edited

Loading

elite174 Oct 7, 2024

matthewp Oct 7, 2024

elite174 Oct 8, 2024

elite174 Oct 8, 2024

matthewp Oct 9, 2024

elite174 Oct 9, 2024

matthewp Oct 9, 2024

matthewp Oct 9, 2024

elite174 Oct 10, 2024 •

edited

Loading

elite174 Oct 10, 2024 •

edited

Loading

elite174 Oct 10, 2024

matthewp Oct 10, 2024

elite174 Oct 10, 2024

matthewp Oct 10, 2024

elite174 Oct 11, 2024

elite174 Oct 11, 2024 •

edited

Loading

elite174 commented Oct 18, 2024

elite174 commented Oct 23, 2024

bluwy commented Nov 4, 2024 •

edited

Loading

elite174 commented Nov 5, 2024

bluwy commented Nov 5, 2024

elite174 commented Nov 5, 2024

Fixed component rerendering if there's only one renderer (framework components) #12131

Are you sure you want to change the base?

Fixed component rerendering if there's only one renderer (framework components) #12131

Conversation

elite174 commented Oct 6, 2024 • edited Loading

Changes

Testing

Docs

changeset-bot bot commented Oct 6, 2024 • edited Loading

⚠️ No Changeset found

Choose a reason for hiding this comment

matthewp left a comment

Choose a reason for hiding this comment

matthewp Oct 7, 2024 • edited Loading

Choose a reason for hiding this comment

elite174 Oct 7, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

elite174 Oct 10, 2024 • edited Loading

Choose a reason for hiding this comment

elite174 Oct 10, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

elite174 Oct 11, 2024 • edited Loading

Choose a reason for hiding this comment

elite174 commented Oct 18, 2024

elite174 commented Oct 23, 2024

bluwy commented Nov 4, 2024 • edited Loading

elite174 commented Nov 5, 2024

bluwy commented Nov 5, 2024

elite174 commented Nov 5, 2024

elite174 commented Oct 6, 2024 •

edited

Loading

changeset-bot bot commented Oct 6, 2024 •

edited

Loading

matthewp Oct 7, 2024 •

edited

Loading

elite174 Oct 7, 2024 •

edited

Loading

elite174 Oct 10, 2024 •

edited

Loading

elite174 Oct 10, 2024 •

edited

Loading

elite174 Oct 11, 2024 •

edited

Loading

bluwy commented Nov 4, 2024 •

edited

Loading