WIP: POC Vue SSR
What does this MR do?
This is super POC and super early stages please do not take the code in here as final or ship-able in its current state
This allows us to render Vue components server side!
To check that this works correctly I have converted the simple related merge requests component into server rendered. Why this one? It was a simple enough app that used Vuex as a store which is the most common. Could this mean more complex apps could be used? Yes, maybe, it depends on the app.
Can this expanded to other Vue apps? Yes totally! We could totally create a Apollo renderer as well as just a simple Vue app.
How does this work?
It creates a simple node server that runs hypernova which then uses https://ssr.vuejs.org/ to render the component into a HTML string which then gets sent to the browser.
Once the page has loaded, hypernova then re-runs on the client and Vue re-hydrates on the client side.
Performance
Is the performance good? This depends on what you do with it! Currently it sends a very simple request to the GitLab API to get related merge requests.
Considerations/Questions to think about
- Does this make our performance worse?
- We need to come up with some rules around what data should be pre-fetched and what shouldn't.
- We need to consider how this will be shipped in Omnibus as an optional part of GitLab. If the install doesn't have it, we should fall back to full client-side rendering.
- Maybe adding some timeout so we don't just block the page loading forever?
Screenshots
Does this MR meet the acceptance criteria?
Conformity
-
Changelog entry -
Documentation (if required) -
Code review guidelines -
Merge request performance guidelines -
Style guides -
Database guides -
Separation of EE specific content
Availability and Testing
-
Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process. -
Tested in all supported browsers -
Informed Infrastructure department of a default or new setting change, if applicable per definition of done
Security
If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:
-
Label as security and @ mention @gitlab-com/gl-security/appsec -
The MR includes necessary changes to maintain consistency between UI, API, email, or other methods -
Security reports checked/validated by a reviewer from the AppSec team