How to use preact-render-to-string - 10 common examples

<div>
					<header>
						<h1>my page</h1>
					</header>
					<div>
						<article>main article</article>
					</div>
					<footer>
						goodbye
					</footer>
				</div>
			`.replace(/\s+\s+/g, '&gt;')

			expect(result).toBe(expectedResult)

			result = render(
				
					
				
			)

			// work around preact-render-to-string generating comment
			// nodes for empty (null/undefined) vdom elements. It's
			// a bug according to Jason
			result = result.replace(//g, '')

			const reversedExpected = `
				<div>
					<footer>
						goodbye
					</footer>
					<div></div></div>

}

			// 2 levels
			// nested children above tested 1 level deep, this tests 2 levels deep
			let result = render(
				
					
						
					
				
			)

			expect(result.indexOf('my page')).not.toBe(-1)

			// 3 levels
			result = render(
				
					
						
							
						
					
				
			)

			expect(result.indexOf('my page')).not.toBe(-1)

			// 4 levels
			result = render(

path.join(__dirname, '../node_modules/preact/dist/preact.js')
          )}
          // require reshapePreact
          ${fs.readFileSync(path.join(__dirname, '../lib/browser.js'))}
          // our custom component
          ${component}
          // implementation
          var el = document.querySelector('p')
          window.out = reshapePreact.hydrateInitialState(el.getAttribute('data-state'), {
            'my-component': MyComponent
          })
        
      `,
        { runScripts: 'dangerously' }
      )
      t.is(render(dom.window.out), '<p>the value of foo is "bar"</p>')
    })
})

import { h } from 'preact';
import render from 'preact-render-to-string';

export const AppPlaceholder = () =&gt; (<div id="app">);

const appPlaceholder = render(h(AppPlaceholder)),
	appRegex = /<div id="app">]*&gt;.*?(?= {
	const headTag = '',
		templateApp = template.includes(appPlaceholder) ? appPlaceholder : appRegex;
	return props =&gt; {
		const app = render(h(rootComponentClass, props)),
			head = '', // you could use something like Helmet here
			renderedTemplate = template
				.replace(headTag, headTag + head)
				.replace(templateApp, app);

		return renderedTemplate;
	};
};
</div></div>

static render(element, opts) {
    // eslint-disable-next-line global-require
    const { ServerStyleSheet, StyleSheetManager } = require('styled-components')

    const sheet = new ServerStyleSheet()
    const html = preactToString(
      
        {element}
      , null, opts,
    )
    const styles = sheet.getStyleElement()[0]
    const css = (styles)
      // eslint-disable-next-line no-underscore-dangle
      ? styles.attributes.dangerouslySetInnerHTML.__html : ''

    return { html, css }
  }
}

<title>Preact Hacker News</title>
      
      ${supportsManifest ? '' : ''}
      <style>${resources.inline}</style>
      ${resources.inline === null &amp;&amp; resources.css !== null
        ? ''
        : ''}
      ${supportsManifest ? '' : ''}
      
      
      
    
    
      <div id="mount">`);

  const RoutedViewComponent: string = render();

  res.write(`
        ${RoutedViewComponent}
        </div>
      
    `);

  // TODO: More research on why these scripts cannot be loaded async.

  res.end();

  next();
}

node => {
        // encode/compress the original html structure
        // this can be rehydrated later to reduce client/server duplication
        const originalHtml = encode(node)
        return parse(render(toVdom(components, node, originalHtml)))
      }
    )

render(el: ReactElement, context?: any) {
    // FIXME - The behavior here is different across different Preact versions.
    // Historically this was because preact-render-to-string v4.x did not support
    // Preact 10. In future we should unify them. This will be a breaking change
    // as it will affect the output for either Preact v8 or Preact v10.
    if (isPreact10()) {
      const tempContainer = document.createElement('div');
      render(el as any, tempContainer);
      const html = tempContainer.innerHTML;
      render(h('unmount-me', {}), tempContainer);
      return html;
    } else {
      return renderToString(el as any, context);
    }
  }

import App from './App'
import { render } from 'preact'
import { default as renderToString } from 'preact-render-to-string'
import { ServerStyleSheet } from 'styled-components'
import * as OfflinePluginRuntime from 'offline-plugin/runtime'

if (typeof window === 'undefined') {
  /* eslint-disable */
  const sheet = new ServerStyleSheet()
  const html = renderToString(sheet.collectStyles())
  const styleTags = sheet.getStyleTags()
  /* eslint-enable */
}
if (typeof window !== 'undefined') {
  render(, document.getElementById('root'))
  OfflinePluginRuntime.install()
}

it('should render icon & text', () => {
			expect(render(<button>bar</button>)).to.equal('<button class="btn btn-default"><span class="icon icon-home icon-text"></span>bar</button>');
		});
	});