Expose registered components during SSR compilation #4854
Comments
|
Looks like they are just hashing the file path. I'll have a look as to how this may be implemented in svelte |
|
They are using the loader/compiler const hash = require('hash-sum')
module.exports = function(source, map) { //svelte-loader
const { request } = this
const id = hash(request) // feed this to compiler options in SSR mode, then compiler can know the client hash (as they should be identical), and match to client manifest
} |
|
PR would solve this issue, and enable the feature, |
|
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. |
|
+1 for adding this. In the vite docs something like this get's described. For the meantime I'm using the following Plugin but that is not a fixexport function usedSsrComponents(dirname) {
return {
transform(code, id, options) {
if (!options?.ssr || !id.endsWith('.svelte'))
return;
const file = relative(dirname, id);
const initFnSign = 'create_ssr_component(($$result, $$props, $$bindings, slots) => {';
let idx = code.indexOf(initFnSign);
if (idx < 0)
return;
idx += initFnSign.length;
code = `
import { getContext as __modulesGetContext } from 'svelte';
${ code.substr(0, idx) }
(() => {
const ctx = __modulesGetContext('modules');
if (ctx && ctx instanceof Set) {
ctx.add('${ file }');
}
})();
${ code.substr(idx) }
`;
return code;
}
};
}This then matches nicely to the ssr manifest that get's generated by vite. |
Is your feature request related to a problem? Please describe.
@Rich-Harris https://twitter.com/PromatiaGov/status/1262183956004220928
Svelte needs to expose which components the SSR compiler has come across during SSR Rendering. This will let the server-side renderer know which components have been registered, so the page can preload the necessary components on the client-side;
eg:
Registered components may just be a
new Set()with the unique ID of the component (perhaps a file path) - vue-loader uses some sort of module identifier that is the same across client & server-side I think.This can allow Svelte routers and code-split svelte apps to enable faster loading speeds, as the necessary client-side scripts can be preloaded. The svelte-loader and rollup loader can make use of these, by matching the module's ID to a client-manifest. This would mean that svelte-loader would also need to be updated I believe.
vue-loaderexposes a_registeredComponents, which is used by the server-side renderer and matched with the client manifest to find which async files should be preloaded on the website:client-manifest
The number value of each module ID links to a specific output script
client manifest generator plugin
Not sure what would be the best way to go across this
Describe the solution you'd like
Not sure
Describe alternatives you've considered
Have tried to do route-level matching, but it's hard.
How important is this feature to you?
Pretty important feature for SSR, could be used by Sapper as well.
The text was updated successfully, but these errors were encountered: