tessl/npm-preact-compat
A React compatibility layer for Preact
—
Pending
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
server-rendering.mddocs/
Server-Side Rendering
Server-side rendering capabilities for generating HTML strings from components, supporting both static markup and hydration patterns.
Capabilities
Render to String
Renders components to HTML strings for server-side rendering and hydration.
/**
* Render a component to an HTML string
* @param {VNode} vnode - Virtual DOM node to render
* @returns {string} HTML string representation
*/
function renderToString(vnode);
/**
* Render a component to static HTML markup (alias for renderToString)
* @param {VNode} vnode - Virtual DOM node to render
* @returns {string} Static HTML string without React-specific attributes
*/
function renderToStaticMarkup(vnode);Usage Examples:
import { renderToString, renderToStaticMarkup } from 'preact-compat/server';
import App from './App';
// Server-side rendering with hydration support
const html = renderToString(<App />);
const response = `
<!DOCTYPE html>
<html>
<body>
<div id="root">${html}</div>
<script src="/bundle.js"></script>
</body>
</html>
`;
// Static HTML generation (no hydration)
const staticHtml = renderToStaticMarkup(<StaticPage />);Import Patterns
// Import from server module
import { renderToString, renderToStaticMarkup } from 'preact-compat/server';
// CommonJS
const { renderToString, renderToStaticMarkup } = require('preact-compat/server');Integration with Hydration
When using server-side rendering, you'll typically want to hydrate the rendered content on the client:
// Server-side (Node.js)
import { renderToString } from 'preact-compat/server';
const serverHtml = renderToString(<App />);
// Client-side
import { hydrate } from 'preact-compat';
hydrate(<App />, document.getElementById('root'));Implementation Details
The server-side rendering functionality is provided through integration with the preact-render-to-string package:
// Internal implementation (server.js)
var renderToString = dep(require('preact-render-to-string'));
function dep(obj) { return obj['default'] || obj; }
module.exports = {
renderToString: renderToString,
renderToStaticMarkup: renderToString // Alias - same implementation
};Key Features
- Shared Implementation: Both
renderToStringandrenderToStaticMarkupuse the same underlying function frompreact-render-to-string - Universal API: Provides the same interface as React's server rendering functions
- Default Handling: Automatically handles both ES6 default exports and CommonJS modules
- No React-specific Attributes: Since Preact doesn't use React-specific attributes, the output is naturally "static"
Differences from React
Unlike React's server rendering:
- No distinction between
renderToStringandrenderToStaticMarkup(both produce the same output) - No data-react-* attributes added to the markup
- Smaller bundle size and faster rendering performance
- Direct compatibility with Preact's client-side hydration
Types
type RenderFunction = (vnode: VNode) => string;Install with Tessl CLI
npx tessl i tessl/npm-preact-compat