feat(router): introduce support for Analog Server Components #1518
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
PR Checklist
Closes #989
What is the new behavior?
Introduces
Analog Server Components
which are inspired by/similar toNuxt Server Components
andAstro Islands
in that the component is only rendered on the server, with its HTML output being sent back to the client.This is not the same as Incremental Hydration in Angular, where the client-side JS is loaded for the component(s) after the hydration trigger happens. The JS for these components is never sent to the client.
Examples
The server components are placed in the
src/server/components
directory without any trailing names like.component.ts
:injectStaticProps
function provides the props sent from the clientinjectStaticOutputs
provides a way to communicate "outputs" back to the client. They must be serializable as JSON.For usage on the client-side, a
ServerOnly
component import is provided:component
input points to the server-only component path, minus the file extension.props
input should be JSON serializable data.outputs
are received from the server-only component.Server-only components can also be used as top-level routes:
Setup
Add the server components path to the
tsconfig.app.json
Use the new
render
function in themain.server.ts
:Does this PR introduce a breaking change?
Other information
Demo links:
https://deploy-preview-1518--analog-app.netlify.app/client - Client w/server component
https://deploy-preview-1518--analog-app.netlify.app/server - Server component as route
https://deploy-preview-1518--analog-app.netlify.app/goodbye - Analog SFCs
Additional uses cases and feedback can be provided here: #1517
[optional] What gif best describes this PR or how it makes you feel?