https://github.com/bernabe9/render-it
Render any JavaScript content to create static sites ready for SEO
https://github.com/bernabe9/render-it
crawler javascript prerender prerenderio puppeteer render seo seo-tools server-side-rendering static-site static-site-generator
Last synced: 4 months ago
JSON representation
Render any JavaScript content to create static sites ready for SEO
- Host: GitHub
- URL: https://github.com/bernabe9/render-it
- Owner: bernabe9
- Created: 2019-02-25T13:27:16.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-04-23T02:57:28.000Z (over 6 years ago)
- Last Synced: 2025-04-11T06:09:05.579Z (6 months ago)
- Topics: crawler, javascript, prerender, prerenderio, puppeteer, render, seo, seo-tools, server-side-rendering, static-site, static-site-generator
- Language: JavaScript
- Homepage: https://bernabe9.github.io/render-it
- Size: 190 KB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Render It :pencil:
[](https://npmjs.org/package/render-it)
Render any JavaScript content to create static sites ready for SEO.
```bash
$ yarn add --dev render-it
```
or
```bash
$ npm install --save-dev render-it
```
**Render it** uses [Headless Chrome](https://github.com/GoogleChrome/puppeteer) to render the JavaScript content and [JSDOM](https://github.com/jsdom/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.
```html
Content from the server
```
But you want to return the document HTML with the content (usually for SEO and SMO).
```html
Content from the server
Content from the client
```
**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.
```javascript
// 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 |