tessl/npm-vue--server-renderer

Server-side rendering library for Vue.js applications with support for streaming and multiple environments

—

Pending

Overview

Eval results

Files

String Rendering

Name: tessl/npm-vue--server-renderer
Author: tessl

Core string rendering functionality for converting Vue applications and VNodes to complete HTML strings. This is the most straightforward rendering approach, ideal for simple SSR setups and when you need the complete HTML upfront.

Capabilities

renderToString

Renders a Vue application or VNode to a complete HTML string asynchronously. Handles the full rendering lifecycle including teleport resolution and watcher cleanup.

/**
 * Renders a Vue application or VNode to a complete HTML string
 * @param input - Vue application instance or VNode to render
 * @param context - Optional SSR context for teleports and additional data
 * @returns Promise resolving to the complete HTML string
 */
function renderToString(
  input: App | VNode,
  context?: SSRContext
): Promise<string>;

interface SSRContext {
  [key: string]: any;
  /** Teleported content after rendering */
  teleports?: Record<string, string>;
  /** Internal teleport buffers (do not use directly) */
  __teleportBuffers?: Record<string, SSRBuffer>;
  /** Internal watcher handles (do not use directly) */
  __watcherHandles?: (() => void)[];
}

Usage Examples:

import { createSSRApp } from "vue";
import { renderToString } from "@vue/server-renderer";

// Basic string rendering
const app = createSSRApp({
  data: () => ({ title: "My App", count: 0 }),
  template: `
    <div>
      <h1>{{ title }}</h1>
      <p>Count: {{ count }}</p>
    </div>
  `,
});

const html = await renderToString(app);
console.log(html);
// Output: <div><h1>My App</h1><p>Count: 0</p></div>

// Rendering with SSR context
const context = {};
const htmlWithContext = await renderToString(app, context);

// Check for teleported content
if (context.teleports) {
  console.log("Teleported content:", context.teleports);
}

// Rendering a VNode directly
import { h } from "vue";

const vnode = h('div', { class: 'container' }, [
  h('h1', 'Hello World'),
  h('p', 'This is rendered from a VNode')
]);

const vnodeHtml = await renderToString(vnode);
console.log(vnodeHtml);
// Output: <div class="container"><h1>Hello World</h1><p>This is rendered from a VNode</p></div>

SSR Context Usage

The SSR context allows passing data between server and client, and automatically handles teleported content.

import { createSSRApp } from "vue";
import { renderToString } from "@vue/server-renderer";

const app = createSSRApp({
  template: `
    <div>
      <h1>Main Content</h1>
      <Teleport to="#modal">
        <div class="modal">This will be teleported</div>
      </Teleport>
    </div>
  `,
});

const context = {
  // Custom data available during rendering
  user: { name: "John", role: "admin" },
  apiUrl: "https://api.example.com",
};

const html = await renderToString(app, context);

// Main content HTML
console.log(html);
// <div><h1>Main Content</h1><!--teleport start--><!--teleport end--></div>

// Teleported content is available in context
console.log(context.teleports);
// { '#modal': '<div class="modal">This will be teleported</div>' }

// Inject teleported content into your HTML template
const fullHtml = `
<!DOCTYPE html>
<html>
<head><title>My App</title></head>
<body>
  ${html}
  <div id="modal">${context.teleports?.['#modal'] || ''}</div>
</body>
</html>
`;

Error Handling

String rendering automatically handles errors and cleanup, but you should wrap calls in try-catch for proper error handling.

import { createSSRApp } from "vue";
import { renderToString } from "@vue/server-renderer";

const app = createSSRApp({
  setup() {
    throw new Error("Component error during SSR");
  },
  template: `<div>Never reached</div>`,
});

try {
  const html = await renderToString(app);
} catch (error) {
  console.error("SSR Error:", error.message);
  // Handle error - render fallback HTML, log error, etc.
}

Advanced Usage

Component-Level SSR Context Access

Components can access the SSR context during rendering using the ssrContext injection key.

import { createSSRApp, inject } from "vue";
import { renderToString, ssrContextKey } from "@vue/server-renderer";

const app = createSSRApp({
  setup() {
    const ssrContext = inject(ssrContextKey);
    
    // Access context data during rendering
    const user = ssrContext?.user;
    
    return { user };
  },
  template: `<div>Hello {{ user?.name }}!</div>`,
});

const context = { user: { name: "Alice" } };
const html = await renderToString(app, context);
// Output: <div>Hello Alice!</div>

Performance Considerations

Memory Usage: String rendering loads the entire HTML into memory before returning
Blocking: The function waits for all async components to resolve before returning
Best For: Simple applications, static content, or when you need the complete HTML upfront
Not Ideal For: Large applications where streaming would provide better user experience

Install with Tessl CLI

npx tessl i tessl/npm-vue--server-renderer

docs

index.md

internal-helpers.md

nodejs-integration.md

streaming-rendering.md

string-rendering.md

web-streams.md

tile.json

tessl/npm-vue--server-renderer