prerender-loader - 📰 Painless universal pre-rendering for Webpack.

  •        55

Painless universal prerendering for Webpack. Works great with html-webpack-plugin. Pre-rendering describes the process of rendering a client-side application at build time, producing useful static HTML that can be sent to the browser instead of an empty bootstrapping page.

https://npm.im/prerender-loader
https://github.com/GoogleChromeLabs/prerender-loader

Dependencies:

jsdom : ^11.11.0
loader-utils : ^1.1.0

Tags
Implementation
License
Platform

   




Related Projects

prerender-spa-plugin - Prerenders static HTML in a single-page application.

  •    Javascript

Flexible, framework-agnostic static site generation for sites and SPAs built with webpack. 👉 This is the stable 3.x version of prerender-spa-plugin based on puppeteer. If you're looking for the (now-deprecated) 2.x version, based on PhantomJS, take a look at the v2 branch.

prep - Pre-renders your web app (React, Vue, Angular,

  •    Javascript

Pre-renders your web app into static HTML based on your specified routes enabling SEO for single page applications.NOTE: prep is now based on Chromeless. We'll shortly release an updated version.

prep - Pre-renders your web app (React, Vue, Angular,

  •    Javascript

Pre-renders your web app into static HTML based on your specified routes enabling SEO for single page applications. NOTE: prep is now based on Chromeless. We'll shortly release an updated version.

react-snap - 👻 Zero-configuration framework-agnostic static prerendering for SPAs

  •    Javascript

Pre-renders web app into static HTML. Uses headless chrome to crawl all available links starting from the root. Heavily inspired by prep and react-snapshot, but written from scratch. Uses best practices to get best loading performance. Zero configuration is the main feature. You do not need to worry how does it work or how to configure it. But if you are curious here are details.

guess - Libraries & tools for enabling Machine Learning driven user-experiences on the web

  •    TypeScript

Libraries and tools for enabling data-driven user-experiences on the web. Install and configure GuessPlugin - the Guess.js webpack plugin which automates as much of the setup process for you as possible.


usus - Webpage pre-rendering service. ⚡️

  •    Javascript

Static HTML pages with inline CSS load faster and are better indexed than single page applications (SPA). Å«sus pre-renders single page applications into static HTML with the critical CSS inlined. Removing the blocking CSS and inlining the CSS required to render the page increases the perceived page loading speed. Presumably, improves SEO by reducing the page loading time.

prerender-node - Express middleware for prerendering javascript-rendered pages on the fly for SEO

  •    Javascript

Google, Facebook, Twitter, Yahoo, and Bing are constantly trying to view your website... but they don't execute JavaScript. That's why we built Prerender. Prerender is perfect for AngularJS SEO, BackboneJS SEO, EmberJS SEO, and any other JavaScript framework. This middleware intercepts requests to your Node.js website from crawlers, and then makes a call to the (external) Prerender Service to get the static HTML instead of the JavaScript for that page.

prerender - Node server that uses Headless Chrome to render a javascript-rendered page as HTML

  •    Javascript

Prerender is a node server that uses Headless Chrome to render HTML, screenshots, PDFs, and HAR files out of any web page. The Prerender server listens for an http request, takes the URL and loads it in Headless Chrome, waits for the page to finish loading by waiting for the network to be idle, and then returns your content. The Prerender server can be used in conjunction with our Prerender.io middleware in order to serve the prerendered HTML of your javascript website to search engines (Google, Bing, etc) and social networks (Facebook, Twitter, etc) for SEO. We run the Prerender server at scale for SEO needs at https://prerender.io/.

prerender_rails - Rails middleware gem for prerendering javascript-rendered pages on the fly for SEO

  •    Ruby

Google, Facebook, Twitter, Yahoo, and Bing are constantly trying to view your website... but they don't execute javascript. That's why we built Prerender. Prerender is perfect for AngularJS SEO, BackboneJS SEO, EmberJS SEO, and any other javascript framework. This middleware intercepts requests to your Rails website from crawlers, and then makes a call to the (external) Prerender Service to get the static HTML instead of the javascript for that page.

ngtemplate-loader - Include AngularJS templates in the Webpack bundle and preload the template cache

  •    Javascript

Includes your AngularJS templates into your webpack Javascript Bundle. Pre-loads the AngularJS template cache to remove initial load times of templates. ngTemplate loader does not minify or process your HTML at all, and instead uses the standard loaders such as html-loader or raw-loader. This gives you the flexibility to pick and choose your HTML loaders.

d3-pre - Pre-render d3 visualizations

  •    HTML

A JavaScript library that pre-renders d3 visualizations into inline SVG elements, to reduce perceived page-load time and cut down on unwanted paint flashes. The pre-rendering tool uses a headless browser to turn d3 code into its resulting SVG, and inserts the markup into your HTML. Then, the d3-pre JavaScript library overrides d3.append to check if a pre-rendered DOM node already exists before creating a new one. This approach allows you to use pre-rendered SVG without changing your visualization code.

suicrux - 🚀 Ultimate universal starter with lazy-loading, SSR and i18n. [not maintained]

  •    Javascript

Ultimate universal starter with lazy-loading, SSR and i18n. /static folder + url-loader. Everything in /static/public/ is copied to /dist/client with copy-webpack-plugin.

isomorphic-style-loader - CSS style loader for Webpack that is optimized for isomorphic (universal) web apps

  •    Javascript

CSS style loader for Webpack that works similarly to style-loader, but is optimized for critical path CSS rendering and also works great in the context of isomorphic apps. It provides two helper methods on to the styles object - ._insertCss() (injects CSS into the DOM) and ._getCss() (returns a CSS string).Note: Configuration is the same for both client-side and server-side bundles. For more information visit https://webpack.js.org/configuration/module/.

webpack.js.org - New repository for webpack documentation and more!

  •    Javascript

Guides, documentation, and all things webpack.We haven't created issues for the other sections yet, but they will be coming soon. For dev-related work please see General - Current Longterm Plan, which will soon be replaced by a more dev-specific issue.

lqip-loader - Low Quality Image Placeholders (LQIP) for Webpack

  •    Javascript

PS: The large image file will be emitted & only 400byte of Base64 (if set to true in the loader options) will be bundled. To save memory and improve GPU performance, browsers (including Chrome started from 61.0.3163.38) will now render a slightly more crisp or pixelated Base64 encoded images.

ts-loader - TypeScript loader for webpack

  •    Javascript

This is the typescript loader for webpack. We have a number of example setups to accomodate different workflows. From "vanilla" ts-loader, to using ts-loader in combination with babel for transpilation, happypack or thread-loader for faster builds and fork-ts-checker-webpack-plugin for performing type checking in a separate process. Not forgetting Hot Module Replacement. Our examples can be found here.

reactGo - Your One-Stop solution for a full-stack universal Redux App!

  •    Javascript

Redux Predictive state containers. Server-side rendering with React Router 3.x. Having server-side rendering allows you to pre-render the initial state of your components when a user (or search engine crawler) requests a page.

ReactScriptLoader - A library for creating React components that depend on external scripts.

  •    Javascript

ReactScriptLoader simplifies creating React components whose rendering depends on dynamically loaded scripts. It can be used for lazily loading heavy scripts but it's especially useful for loading components that rely on 3rd party scripts, such as Google Maps or Stripe Checkout. React apps are typically single-page apps that are rendered client-side in Javascript. When loading a site built with React, the browser typically pre-loads the javascript necessary to render the site's React components so that they can be rendered with no latency. This works well for sites that serve a relatively small amount of javascript from their own servers in a single bundle. However, in some situations pre-loading all the scripts necessary to render the site's components is impractial. For example, a site may have a Map component that relies on a dynamically loaded 3rd party library to render itself. It may be possible to delay rendering the app until the third party library is finished loading but doing so would make the site feel unnecessarily sluggish. It's a much better strategy to first render the page with a placeholder for the map and asynchronously render the map once the third party library has loaded. Deferring the loading of the external script is even more important when the map component isn't rendered right away but is only revealed after user interaction.

happypack - Happiness in the form of faster webpack build times.

  •    Javascript

HappyPack makes initial webpack builds faster by transforming files in parallel. HappyPack provides both a plugin and a loader in order to do its job so you must use both to enable it.





We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.