webcomponents.org
webcomponents.org copied to clipboard
webcomponents
Prerender question
Hi. I was wondering if you generate meta tags dynamically or statically. Example of such tag would be below, when browsing a specific component.
<meta property="og:description" content="A simple way to add an prefixed icon to an input that responds to disabled, focused and invalid states.">
If you do it dynamically by querying a backend and setting value for example, then is there any server pre-rendering involved or do you do something else? Just curious on your approach.
Thanks.
They're generated dynamically. See the Medium post which explains our approach: https://medium.com/dev-channel/solving-seo-with-headless-chrome-for-your-client-side-framework-288e66fdd2b7
hm, ok. this approach seems very similar to using phantomjs and pre-render (https://prerender.io) for headless rendering. we actually did this in angular 1 type of apps, then went to universal with angular 2.x+. in polymer, we thought maybe there was some isomorphic way to handle it. Do you find there are significant advantages to using chrome headless vs phantomjs?
Also not sure if you knew, but there are other chrome pre-renderers out there, like https://github.com/bosondata/chrome-prerender that are configurable. Also instead of doing routing in the app, you could do it at the web server level (nginx, apache) where you setup simple rewrite rules and id the traffic so you know when to proxy.
What's configurable about it?
AFAIK, this approach is the same, and all the middleware functions (eg. for Apache, Nginx) there would work as well. The main repo is over here for now: https://github.com/samuelli/bot-render
Look under "CONFIGURATION" section.
HOST 0.0.0.0 Prerender listen host PORT 8000 Prerender listen port DEBUG false Toggle debug mode PRERENDER_TIMEOUT 30 renderring timeout CONCURRENCY 2 * CPU count Chrome pages count MAX_ITERATIONS 200 Restart Chrome page after rendering this many pages CHROME_HOST localhost Chrome remote debugging host CHROME_PORT 9222 Chrome remote debugging port USER_AGENT Chrome User Agent ALLOWED_DOMAINS Domains allowed for renderring, comma seperated CACHE_BACKEND dummy Cache backend, dummy, disk, s3 CACHE_LIVE_TIME 3600 Disk cache live seconds CACHE_ROOT_DIR /tmp/prerender Disk cache root directory S3_SERVER s3.amazonaws.com S3 server address S3_ACCESS_KEY S3 access key S3_SECRET_KEY S3 secret key S3_REGION S3 region S3_BUCKET prerender S3 bucket name SENTRY_DSN Sentry DSN, for exception monitoring
Middleware is not needed for routing or identification with web server like nginx for example, you simply need a few rewrite rules, to do what you are doing at application layer with bot-filter.py. That is what I was referring to. Thanks.