Render It 📝

Render any JavaScript content to create static sites ready for SEO.

$ yarn add --dev render-it

$ npm install --save-dev render-it

Render it uses Headless Chrome to render the JavaScript content and JSDOM to replace the content in the original HTML document.

Motivation

If you are here, you probably have a problem like this:

Your server is returning a HTML structure without the content that JavaScript renders.

<!-- DOCUMENT HTML -->
<!DOCTYPE html>
<html>
  <body>
    <div>Content from the server</div>
    
    <div id='root'></div> <!-- placeholder for JavaScript to render content -->
  </body>
</html>

But you want to return the document HTML with the content (usually for SEO and SMO).

<!-- DOCUMENT HTML -->
<!DOCTYPE html>
<html>
  <body>
    <div>Content from the server</div>
    
    <div id='root'>Content from the client</div>
  </body>
</html>

Render It allows you to generate all the static pages WITH the content. It returns the same HTML structure from the server but with the JavaScript content inside the placeholder.

Why is it awesome?

Zero config required in the server side.
Zero config required in the client side.
Works with any server language.
Works with any JavaScript library or framework. (like React, VueJS, Angular)
Just render what you need.
Does not depend on Webpack.
Allows a production site URL to generate the static pages.

Usage

Create a Node task to generate the static pages.

// render-it.js

const renderIt = require('render-it')

const config = {
  url: 'http://localhost:3000',
  paths: ['/', '/about', '/contact'],
  selector: '#root',
  outputFolder: 'dist'
}

renderIt(config)

Then you can run it with: node ./render-it.js

So, you can use this task in any environment with Node.

Conguration

Option	Default	Description
url	none	URL of the site to crawl. If this parameter isn't present, render-it will run it's own static server using the output folder.
outputFolder	output	Path of the folder to store the generated static pages
paths	['/']	Url pathnames to render
selector	#root	Selector to render the JavaScript content
puppeteerConfig	`{ headless: true }`	Force to use another options for puppeteer

Roadmap

Feature	Status
CLI	In progress
Render meta tags	Pending
Auto crawling	Pending
Wait to render	Pending
Auto render	Pending
Support multiple selectors	Pending

Project Name	Stars	Repos Using This	Packages Using This	Most Recent Commit	Total Releases	Latest Release	Open Issues	License	Language
Next Js Boilerplate	3,504			7 days ago			3	mit	TypeScript
🚀🎉📚 Boilerplate and Starter for Next.js 13+, Tailwind CSS 3.2 and TypeScript ⚡️ Made with developer experience first: Next.js + TypeScript + ESLint + Prettier + Husky + Lint-Staged + Jest + Testing Library + Cypress + Commitlint + VSCode + Netlify + PostCSS + Tailwind CSS
Elderjs	2,058		7	4 months ago	148	July 31, 2022	41	mit	TypeScript
Elder.js is an opinionated static site generator and web framework for Svelte built with SEO in mind.
Next Js Blog Boilerplate	492			4 months ago				mit	TypeScript
🚀 Nextjs Blog Boilerplate is starter code for your blog based on Next framework. ⚡️ Made with Nextjs 12, TypeScript, ESLint, Prettier, PostCSS, Tailwind CSS 3.
Eleventy Starter Boilerplate	168			2 years ago			1	mit	EJS
🚀 Eleventy Starter is production-ready with SEO-friendly for quickly starting a blog. ⚡ Built with Eleventy, ESLint, Prettier, Webpack, PostCSS, Tailwind CSS and Netlify CMS (optional).
Gatsby Plugin Advanced Sitemap	149	62	34	3 months ago	29	March 24, 2022	31	mit	JavaScript
Advanced XML Sitemaps for Gatsby.js
Cookie	65			4 months ago			1	mit	HTML
Landing website + Blog using Jekyll & Tailwind CSS
Zola.386	58			a year ago			2	mit	HTML
Port of BOOTSTRA.386 for Zola.
Jaan.io	55			a month ago			1	mit	HTML
A Retina-ready Jekyll-powered blog with responsiveness, SEO, etc.; up at https://jaan.io
Eventually Jekyll Theme	31			3 months ago				other	SCSS
A Jekyll version of the "Eventually" theme by HTML5 UP.
Apod.pwa	27			a month ago					TypeScript
🪐🛰 PWA Aplication Based on NASA APOD API