@vue/compiler-ssr

What is @vue/compiler-ssr?

The @vue/compiler-ssr package is part of the Vue.js framework and is responsible for compiling Vue components into server-side renderable code. It is used in server-side rendering (SSR) applications to pre-render Vue components on the server before sending them to the client. This can improve performance and SEO for Vue.js applications.

What are @vue/compiler-ssr's main functionalities?

Compiling Vue components for SSR

This feature allows you to compile Vue.js templates into render functions that can be used on the server. The code sample demonstrates how to compile a simple Vue template into a server-renderable format.

const { compile } = require('@vue/compiler-ssr');
const template = `<div>{{ message }}</div>`;
const { code } = compile(template);
console.log(code);

Optimizing template compilation for SSR

The package provides options to optimize the compilation process for server-side rendering. The code sample shows how to enable SSR-specific optimizations during the compilation of a Vue template.

const { compile } = require('@vue/compiler-ssr');
const template = `<div>{{ message }}</div>`;
const { code } = compile(template, { optimizeSSR: true });
console.log(code);

Other packages similar to @vue/compiler-ssr

svelte

Svelte is a compiler that converts Svelte components into efficient JavaScript code that runs on the client or server. While not a direct equivalent to @vue/compiler-ssr, Svelte offers server-side rendering capabilities as part of its compilation process, similar to how Vue components can be pre-rendered on the server.

README

@vue/compiler-ssr

Changelog

3.5.13 (2024-11-15)

Bug Fixes

• compiler-core: handle v-memo + v-for with functional key (#12014) (99009ee), closes #12013
• compiler-dom: properly stringify template string style (#12392) (2d78539), closes #12391
• custom-element: avoid triggering mutationObserver when relecting props (352bc88), closes #12214 #12215
• deps: update dependency postcss to ^8.4.48 (#12356) (b5ff930)
• hydration: the component vnode's el should be updated when a mismatch occurs. (#12255) (a20a4cb), closes #12253
• reactiivty: avoid unnecessary watcher effect removal from inactive scope (2193284), closes #5783 #5806
• reactivity: release nested effects/scopes on effect scope stop (#12373) (bee2f5e), closes #12370
• runtime-dom: set css vars before user onMounted hooks (2d5c5e2), closes #11533
• runtime-dom: set css vars on update to handle child forcing reflow in onMount (#11561) (c4312f9)
• ssr: avoid updating subtree of async component if it is resolved (#12363) (da7ad5e), closes #12362
• ssr: ensure v-text updates correctly with custom directives in SSR output (#12311) (1f75d4e), closes #12309
• ssr: handle initial selected state for select with v-model + v-for option (#12399) (4f8d807), closes #12395
• teleport: handle deferred teleport update before mounted (#12168) (8bff142), closes #12161
• templateRef: set ref on cached async component which wrapped in KeepAlive (#12290) (983eb50), closes #4999 #5004
• test: update snapshot (#12169) (828d4a4)
• Transition: fix transition memory leak edge case (#12182) (660132d), closes #12181
• transition: reflow before leave-active class after leave-from (#12288) (4b479db), closes #2593
• types: defineEmits w/ interface declaration (#12343) (1022eab), closes #8457
• v-once: setting hasOnce to current block only when in v-once (#12374) (37300fc), closes #12371

Performance Improvements

• reactivity: do not track inner key `__v_skip`` (#11690) (d637bd6)
• runtime-core: use feature flag for call to resolveMergedOptions (#12163) (1755ac0)