Skip to content
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.

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

Improve server side only rendering #497

Closed
wants to merge 13 commits into from
Closed

Improve server side only rendering #497

wants to merge 13 commits into from

Conversation

gazab
Copy link
Contributor

@gazab gazab commented Jan 15, 2018

This PR fixes two issues with rendering server side ONLY components:

  • Component containers are no longer rendered
  • @Html.ReactInitJavaScript() no longer outputs JavaScript hydrating the component

For example, consider the following code:
@Html.React("HelloWorld", Model, serverOnly: true)

Before the fix this resulted in the following HTML:
<div id="react-container123"><h1>Hello world!</h1></div>

And Html.ReactInitJavaScript() rendered:
<script>ReactDOM.hydrate(React.createElement(HelloWorld, {"name":"example"}), document.getElementById("react-container123"));</script>

despite the serverOnly = true argument

After this fix the component will be rendered like this:
<h1>Hello world!</h1>
and ReactInitJavaScript() won't render anything at all for this component.

This should fix #340

@gazab
Copy link
Contributor Author

gazab commented Jan 15, 2018

I'll rebase tomorrow

Copy link
Member

@dustinsoftware dustinsoftware left a comment

Choose a reason for hiding this comment

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

Thanks for the PR! At first glance this looks good..need to test this on my workstation before merging.

It looks like the line endings changed in one of the tests, and some lock files were committed. Can you please remove those changes?

@gazab
Copy link
Contributor Author

gazab commented Jan 16, 2018

@dustinsoftware fixed! If you wonder why I changed some of the test assertions it's because they made more sense that way. Passing true to either clientOnly or serverOnly, but not both at the same time.

Ideally, maybe those parameters should be joined to an enum or something instead. I.e enum RenderMode: ClientAndServer, ClientOnly, ServerOnly.

I didn't want to introduce too big changes though so I left it like it was.

Copy link
Member

@dustinsoftware dustinsoftware left a comment

Choose a reason for hiding this comment

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

Looks good to me. There are a few code style nits but I can fix those after merging.

dustinsoftware pushed a commit that referenced this pull request Jan 21, 2018
@dustinsoftware
Copy link
Member

Merged

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Html.ReactInitJavaScript() outputs server only components in initialization code
2 participants