├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public └── index.html ├── server.js └── ssr.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (https://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # TypeScript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # next.js build output 61 | .next 62 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Server side render using headless chrome 2 | === 3 | 4 | ### run locally 5 | 6 | - install 7 | ```bash 8 | $ npm i 9 | ``` 10 | 11 | - start the server 12 | 13 | ```bash 14 | $ node server.js 15 | ``` 16 | 17 | - visit `localhost:8080/` 18 | 19 | ### notes 20 | 21 | In `server.js`, make the `public/index.html` accessible. 22 | 23 | ```js 24 | app.use(express.static("./")); 25 | ``` 26 | 27 | process `localhost:8080/` to return `public/index.htmtl` throught puppeteer. 28 | 29 | see the time cost by ssr in Chrome Devtools. 30 | 31 | 32 | 33 | ### reference 34 | 35 | - [Headless Chrome: an answer to server-side rendering JS sites](https://developers.google.com/web/tools/puppeteer/articles/ssr) -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ssr", 3 | "version": "1.0.0", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "accepts": { 8 | "version": "1.3.5", 9 | "resolved": "http://registry.npm.taobao.org/accepts/download/accepts-1.3.5.tgz", 10 | "integrity": "sha1-63d99gEXI6OxTopywIBcjoZ0a9I=", 11 | "requires": { 12 | "mime-types": "~2.1.18", 13 | "negotiator": "0.6.1" 14 | } 15 | }, 16 | "agent-base": { 17 | "version": "4.2.0", 18 | "resolved": "http://registry.npm.taobao.org/agent-base/download/agent-base-4.2.0.tgz", 19 | "integrity": "sha1-mDi1wzkrliutAx5qTF4QJKvsRc4=", 20 | "requires": { 21 | "es6-promisify": "^5.0.0" 22 | } 23 | }, 24 | "array-flatten": { 25 | "version": "1.1.1", 26 | "resolved": "http://registry.npm.taobao.org/array-flatten/download/array-flatten-1.1.1.tgz", 27 | "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=" 28 | }, 29 | "async-limiter": { 30 | "version": "1.0.0", 31 | "resolved": "http://registry.npm.taobao.org/async-limiter/download/async-limiter-1.0.0.tgz", 32 | "integrity": "sha1-ePrtjD0HSrgfIrTphdeehzj3IPg=" 33 | }, 34 | "balanced-match": { 35 | "version": "1.0.0", 36 | "resolved": "http://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.0.tgz", 37 | "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=" 38 | }, 39 | "body-parser": { 40 | "version": "1.18.2", 41 | "resolved": "http://registry.npm.taobao.org/body-parser/download/body-parser-1.18.2.tgz", 42 | "integrity": "sha1-h2eKGdhLR9hZuDGZvVm84iKxBFQ=", 43 | "requires": { 44 | "bytes": "3.0.0", 45 | "content-type": "~1.0.4", 46 | "debug": "2.6.9", 47 | "depd": "~1.1.1", 48 | "http-errors": "~1.6.2", 49 | "iconv-lite": "0.4.19", 50 | "on-finished": "~2.3.0", 51 | "qs": "6.5.1", 52 | "raw-body": "2.3.2", 53 | "type-is": "~1.6.15" 54 | } 55 | }, 56 | "brace-expansion": { 57 | "version": "1.1.11", 58 | "resolved": "http://registry.npm.taobao.org/brace-expansion/download/brace-expansion-1.1.11.tgz", 59 | "integrity": "sha1-PH/L9SnYcibz0vUrlm/1Jx60Qd0=", 60 | "requires": { 61 | "balanced-match": "^1.0.0", 62 | "concat-map": "0.0.1" 63 | } 64 | }, 65 | "bytes": { 66 | "version": "3.0.0", 67 | "resolved": "http://registry.npm.taobao.org/bytes/download/bytes-3.0.0.tgz", 68 | "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=" 69 | }, 70 | "concat-map": { 71 | "version": "0.0.1", 72 | "resolved": "http://registry.npm.taobao.org/concat-map/download/concat-map-0.0.1.tgz", 73 | "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=" 74 | }, 75 | "concat-stream": { 76 | "version": "1.6.0", 77 | "resolved": "http://registry.npm.taobao.org/concat-stream/download/concat-stream-1.6.0.tgz", 78 | "integrity": "sha1-CqxmL9Ur54lk1VMvaUeE5wEQrPc=", 79 | "requires": { 80 | "inherits": "^2.0.3", 81 | "readable-stream": "^2.2.2", 82 | "typedarray": "^0.0.6" 83 | } 84 | }, 85 | "content-disposition": { 86 | "version": "0.5.2", 87 | "resolved": "http://registry.npm.taobao.org/content-disposition/download/content-disposition-0.5.2.tgz", 88 | "integrity": "sha1-DPaLud318r55YcOoUXjLhdunjLQ=" 89 | }, 90 | "content-type": { 91 | "version": "1.0.4", 92 | "resolved": "http://registry.npm.taobao.org/content-type/download/content-type-1.0.4.tgz", 93 | "integrity": "sha1-4TjMdeBAxyexlm/l5fjJruJW/js=" 94 | }, 95 | "cookie": { 96 | "version": "0.3.1", 97 | "resolved": "http://registry.npm.taobao.org/cookie/download/cookie-0.3.1.tgz", 98 | "integrity": "sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s=" 99 | }, 100 | "cookie-signature": { 101 | "version": "1.0.6", 102 | "resolved": "http://registry.npm.taobao.org/cookie-signature/download/cookie-signature-1.0.6.tgz", 103 | "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=" 104 | }, 105 | "core-util-is": { 106 | "version": "1.0.2", 107 | "resolved": "http://registry.npm.taobao.org/core-util-is/download/core-util-is-1.0.2.tgz", 108 | "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=" 109 | }, 110 | "debug": { 111 | "version": "2.6.9", 112 | "resolved": "http://registry.npm.taobao.org/debug/download/debug-2.6.9.tgz", 113 | "integrity": "sha1-XRKFFd8TT/Mn6QpMk/Tgd6U2NB8=", 114 | "requires": { 115 | "ms": "2.0.0" 116 | } 117 | }, 118 | "depd": { 119 | "version": "1.1.2", 120 | "resolved": "http://registry.npm.taobao.org/depd/download/depd-1.1.2.tgz", 121 | "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=" 122 | }, 123 | "destroy": { 124 | "version": "1.0.4", 125 | "resolved": "http://registry.npm.taobao.org/destroy/download/destroy-1.0.4.tgz", 126 | "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=" 127 | }, 128 | "ee-first": { 129 | "version": "1.1.1", 130 | "resolved": "http://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz", 131 | "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=" 132 | }, 133 | "encodeurl": { 134 | "version": "1.0.2", 135 | "resolved": "http://registry.npm.taobao.org/encodeurl/download/encodeurl-1.0.2.tgz", 136 | "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=" 137 | }, 138 | "es6-promise": { 139 | "version": "4.2.4", 140 | "resolved": "http://registry.npm.taobao.org/es6-promise/download/es6-promise-4.2.4.tgz", 141 | "integrity": "sha1-3EIhwrFlGHYL2MOaUtjzVvwA7Sk=" 142 | }, 143 | "es6-promisify": { 144 | "version": "5.0.0", 145 | "resolved": "http://registry.npm.taobao.org/es6-promisify/download/es6-promisify-5.0.0.tgz", 146 | "integrity": "sha1-UQnWLz5W6pZ8S2NQWu8IKRyKUgM=", 147 | "requires": { 148 | "es6-promise": "^4.0.3" 149 | } 150 | }, 151 | "escape-html": { 152 | "version": "1.0.3", 153 | "resolved": "http://registry.npm.taobao.org/escape-html/download/escape-html-1.0.3.tgz", 154 | "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=" 155 | }, 156 | "etag": { 157 | "version": "1.8.1", 158 | "resolved": "http://registry.npm.taobao.org/etag/download/etag-1.8.1.tgz", 159 | "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=" 160 | }, 161 | "express": { 162 | "version": "4.16.3", 163 | "resolved": "http://registry.npm.taobao.org/express/download/express-4.16.3.tgz", 164 | "integrity": "sha1-avilAjUNsyRuzEvs9rWjTSL37VM=", 165 | "requires": { 166 | "accepts": "~1.3.5", 167 | "array-flatten": "1.1.1", 168 | "body-parser": "1.18.2", 169 | "content-disposition": "0.5.2", 170 | "content-type": "~1.0.4", 171 | "cookie": "0.3.1", 172 | "cookie-signature": "1.0.6", 173 | "debug": "2.6.9", 174 | "depd": "~1.1.2", 175 | "encodeurl": "~1.0.2", 176 | "escape-html": "~1.0.3", 177 | "etag": "~1.8.1", 178 | "finalhandler": "1.1.1", 179 | "fresh": "0.5.2", 180 | "merge-descriptors": "1.0.1", 181 | "methods": "~1.1.2", 182 | "on-finished": "~2.3.0", 183 | "parseurl": "~1.3.2", 184 | "path-to-regexp": "0.1.7", 185 | "proxy-addr": "~2.0.3", 186 | "qs": "6.5.1", 187 | "range-parser": "~1.2.0", 188 | "safe-buffer": "5.1.1", 189 | "send": "0.16.2", 190 | "serve-static": "1.13.2", 191 | "setprototypeof": "1.1.0", 192 | "statuses": "~1.4.0", 193 | "type-is": "~1.6.16", 194 | "utils-merge": "1.0.1", 195 | "vary": "~1.1.2" 196 | } 197 | }, 198 | "extract-zip": { 199 | "version": "1.6.6", 200 | "resolved": "http://registry.npm.taobao.org/extract-zip/download/extract-zip-1.6.6.tgz", 201 | "integrity": "sha1-EpDt6NINCHK0Kf0/NRyhKOxe+Fw=", 202 | "requires": { 203 | "concat-stream": "1.6.0", 204 | "debug": "2.6.9", 205 | "mkdirp": "0.5.0", 206 | "yauzl": "2.4.1" 207 | } 208 | }, 209 | "fd-slicer": { 210 | "version": "1.0.1", 211 | "resolved": "http://registry.npm.taobao.org/fd-slicer/download/fd-slicer-1.0.1.tgz", 212 | "integrity": "sha1-i1vL2ewyfFBBv5qwI/1nUPEXfmU=", 213 | "requires": { 214 | "pend": "~1.2.0" 215 | } 216 | }, 217 | "finalhandler": { 218 | "version": "1.1.1", 219 | "resolved": "http://registry.npm.taobao.org/finalhandler/download/finalhandler-1.1.1.tgz", 220 | "integrity": "sha1-7r9O2EAHnIP0JJA4ydcDAIMBsQU=", 221 | "requires": { 222 | "debug": "2.6.9", 223 | "encodeurl": "~1.0.2", 224 | "escape-html": "~1.0.3", 225 | "on-finished": "~2.3.0", 226 | "parseurl": "~1.3.2", 227 | "statuses": "~1.4.0", 228 | "unpipe": "~1.0.0" 229 | } 230 | }, 231 | "forwarded": { 232 | "version": "0.1.2", 233 | "resolved": "http://registry.npm.taobao.org/forwarded/download/forwarded-0.1.2.tgz", 234 | "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=" 235 | }, 236 | "fresh": { 237 | "version": "0.5.2", 238 | "resolved": "http://registry.npm.taobao.org/fresh/download/fresh-0.5.2.tgz", 239 | "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=" 240 | }, 241 | "fs.realpath": { 242 | "version": "1.0.0", 243 | "resolved": "http://registry.npm.taobao.org/fs.realpath/download/fs.realpath-1.0.0.tgz", 244 | "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=" 245 | }, 246 | "glob": { 247 | "version": "7.1.2", 248 | "resolved": "http://registry.npm.taobao.org/glob/download/glob-7.1.2.tgz", 249 | "integrity": "sha1-wZyd+aAocC1nhhI4SmVSQExjbRU=", 250 | "requires": { 251 | "fs.realpath": "^1.0.0", 252 | "inflight": "^1.0.4", 253 | "inherits": "2", 254 | "minimatch": "^3.0.4", 255 | "once": "^1.3.0", 256 | "path-is-absolute": "^1.0.0" 257 | } 258 | }, 259 | "http-errors": { 260 | "version": "1.6.3", 261 | "resolved": "http://registry.npm.taobao.org/http-errors/download/http-errors-1.6.3.tgz", 262 | "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=", 263 | "requires": { 264 | "depd": "~1.1.2", 265 | "inherits": "2.0.3", 266 | "setprototypeof": "1.1.0", 267 | "statuses": ">= 1.4.0 < 2" 268 | } 269 | }, 270 | "https-proxy-agent": { 271 | "version": "2.2.1", 272 | "resolved": "http://registry.npm.taobao.org/https-proxy-agent/download/https-proxy-agent-2.2.1.tgz", 273 | "integrity": "sha1-UVUpcPoE1yPgTFbQQXjD+SWSu8A=", 274 | "requires": { 275 | "agent-base": "^4.1.0", 276 | "debug": "^3.1.0" 277 | }, 278 | "dependencies": { 279 | "debug": { 280 | "version": "3.1.0", 281 | "resolved": "http://registry.npm.taobao.org/debug/download/debug-3.1.0.tgz", 282 | "integrity": "sha1-W7WgZyYotkFJVmuhaBnmFRjGcmE=", 283 | "requires": { 284 | "ms": "2.0.0" 285 | } 286 | } 287 | } 288 | }, 289 | "iconv-lite": { 290 | "version": "0.4.19", 291 | "resolved": "http://registry.npm.taobao.org/iconv-lite/download/iconv-lite-0.4.19.tgz", 292 | "integrity": "sha1-90aPYBNfXl2tM5nAqBvpoWA6CCs=" 293 | }, 294 | "inflight": { 295 | "version": "1.0.6", 296 | "resolved": "http://registry.npm.taobao.org/inflight/download/inflight-1.0.6.tgz", 297 | "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", 298 | "requires": { 299 | "once": "^1.3.0", 300 | "wrappy": "1" 301 | } 302 | }, 303 | "inherits": { 304 | "version": "2.0.3", 305 | "resolved": "http://registry.npm.taobao.org/inherits/download/inherits-2.0.3.tgz", 306 | "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" 307 | }, 308 | "ipaddr.js": { 309 | "version": "1.6.0", 310 | "resolved": "http://registry.npm.taobao.org/ipaddr.js/download/ipaddr.js-1.6.0.tgz", 311 | "integrity": "sha1-4/o1e3c9phnybpXwSdBVxyeW+Gs=" 312 | }, 313 | "isarray": { 314 | "version": "1.0.0", 315 | "resolved": "http://registry.npm.taobao.org/isarray/download/isarray-1.0.0.tgz", 316 | "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=" 317 | }, 318 | "media-typer": { 319 | "version": "0.3.0", 320 | "resolved": "http://registry.npm.taobao.org/media-typer/download/media-typer-0.3.0.tgz", 321 | "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=" 322 | }, 323 | "merge-descriptors": { 324 | "version": "1.0.1", 325 | "resolved": "http://registry.npm.taobao.org/merge-descriptors/download/merge-descriptors-1.0.1.tgz", 326 | "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=" 327 | }, 328 | "methods": { 329 | "version": "1.1.2", 330 | "resolved": "http://registry.npm.taobao.org/methods/download/methods-1.1.2.tgz", 331 | "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=" 332 | }, 333 | "mime": { 334 | "version": "1.4.1", 335 | "resolved": "http://registry.npm.taobao.org/mime/download/mime-1.4.1.tgz", 336 | "integrity": "sha1-Eh+evEnjdm8xGnbh+hyAA8SwOqY=" 337 | }, 338 | "mime-db": { 339 | "version": "1.33.0", 340 | "resolved": "http://registry.npm.taobao.org/mime-db/download/mime-db-1.33.0.tgz", 341 | "integrity": "sha1-o0kgUKXLm2NFBUHjnZeI0icng9s=" 342 | }, 343 | "mime-types": { 344 | "version": "2.1.18", 345 | "resolved": "http://registry.npm.taobao.org/mime-types/download/mime-types-2.1.18.tgz", 346 | "integrity": "sha1-bzI/YKg9ERRvgx/xH9ZuL+VQO7g=", 347 | "requires": { 348 | "mime-db": "~1.33.0" 349 | } 350 | }, 351 | "minimatch": { 352 | "version": "3.0.4", 353 | "resolved": "http://registry.npm.taobao.org/minimatch/download/minimatch-3.0.4.tgz", 354 | "integrity": "sha1-UWbihkV/AzBgZL5Ul+jbsMPTIIM=", 355 | "requires": { 356 | "brace-expansion": "^1.1.7" 357 | } 358 | }, 359 | "minimist": { 360 | "version": "0.0.8", 361 | "resolved": "http://registry.npm.taobao.org/minimist/download/minimist-0.0.8.tgz", 362 | "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=" 363 | }, 364 | "mkdirp": { 365 | "version": "0.5.0", 366 | "resolved": "http://registry.npm.taobao.org/mkdirp/download/mkdirp-0.5.0.tgz", 367 | "integrity": "sha1-HXMHam35hs2TROFecfzAWkyavxI=", 368 | "requires": { 369 | "minimist": "0.0.8" 370 | } 371 | }, 372 | "ms": { 373 | "version": "2.0.0", 374 | "resolved": "http://registry.npm.taobao.org/ms/download/ms-2.0.0.tgz", 375 | "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" 376 | }, 377 | "negotiator": { 378 | "version": "0.6.1", 379 | "resolved": "http://registry.npm.taobao.org/negotiator/download/negotiator-0.6.1.tgz", 380 | "integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk=" 381 | }, 382 | "on-finished": { 383 | "version": "2.3.0", 384 | "resolved": "http://registry.npm.taobao.org/on-finished/download/on-finished-2.3.0.tgz", 385 | "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=", 386 | "requires": { 387 | "ee-first": "1.1.1" 388 | } 389 | }, 390 | "once": { 391 | "version": "1.4.0", 392 | "resolved": "http://registry.npm.taobao.org/once/download/once-1.4.0.tgz", 393 | "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", 394 | "requires": { 395 | "wrappy": "1" 396 | } 397 | }, 398 | "parseurl": { 399 | "version": "1.3.2", 400 | "resolved": "http://registry.npm.taobao.org/parseurl/download/parseurl-1.3.2.tgz", 401 | "integrity": "sha1-/CidTtiZMRlGDBViUyYs3I3mW/M=" 402 | }, 403 | "path-is-absolute": { 404 | "version": "1.0.1", 405 | "resolved": "http://registry.npm.taobao.org/path-is-absolute/download/path-is-absolute-1.0.1.tgz", 406 | "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=" 407 | }, 408 | "path-to-regexp": { 409 | "version": "0.1.7", 410 | "resolved": "http://registry.npm.taobao.org/path-to-regexp/download/path-to-regexp-0.1.7.tgz", 411 | "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=" 412 | }, 413 | "pend": { 414 | "version": "1.2.0", 415 | "resolved": "http://registry.npm.taobao.org/pend/download/pend-1.2.0.tgz", 416 | "integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA=" 417 | }, 418 | "process-nextick-args": { 419 | "version": "2.0.0", 420 | "resolved": "http://registry.npm.taobao.org/process-nextick-args/download/process-nextick-args-2.0.0.tgz", 421 | "integrity": "sha1-o31zL0JxtKsa0HDTVQjoKQeI/6o=" 422 | }, 423 | "progress": { 424 | "version": "2.0.0", 425 | "resolved": "http://registry.npm.taobao.org/progress/download/progress-2.0.0.tgz", 426 | "integrity": "sha1-ihvjZr+Pwj2yvSPxDG/pILQ4nR8=" 427 | }, 428 | "proxy-addr": { 429 | "version": "2.0.3", 430 | "resolved": "http://registry.npm.taobao.org/proxy-addr/download/proxy-addr-2.0.3.tgz", 431 | "integrity": "sha1-NV8mJQWmIWRrMTCnKOtkfiIFU0E=", 432 | "requires": { 433 | "forwarded": "~0.1.2", 434 | "ipaddr.js": "1.6.0" 435 | } 436 | }, 437 | "proxy-from-env": { 438 | "version": "1.0.0", 439 | "resolved": "http://registry.npm.taobao.org/proxy-from-env/download/proxy-from-env-1.0.0.tgz", 440 | "integrity": "sha1-M8UDmPcOp+uW0h97gXYwpVeRx+4=" 441 | }, 442 | "puppeteer": { 443 | "version": "1.4.0", 444 | "resolved": "http://registry.npm.taobao.org/puppeteer/download/puppeteer-1.4.0.tgz", 445 | "integrity": "sha1-Q38PNFDXbkNxhcC/BvRG6A8YRpI=", 446 | "requires": { 447 | "debug": "^3.1.0", 448 | "extract-zip": "^1.6.5", 449 | "https-proxy-agent": "^2.1.0", 450 | "mime": "^2.0.3", 451 | "progress": "^2.0.0", 452 | "proxy-from-env": "^1.0.0", 453 | "rimraf": "^2.6.1", 454 | "ws": "^3.0.0" 455 | }, 456 | "dependencies": { 457 | "debug": { 458 | "version": "3.1.0", 459 | "resolved": "http://registry.npm.taobao.org/debug/download/debug-3.1.0.tgz", 460 | "integrity": "sha1-W7WgZyYotkFJVmuhaBnmFRjGcmE=", 461 | "requires": { 462 | "ms": "2.0.0" 463 | } 464 | }, 465 | "mime": { 466 | "version": "2.3.1", 467 | "resolved": "http://registry.npm.taobao.org/mime/download/mime-2.3.1.tgz", 468 | "integrity": "sha1-sWIcVNY7l8R9PP5/chX31kUXw2k=" 469 | } 470 | } 471 | }, 472 | "qs": { 473 | "version": "6.5.1", 474 | "resolved": "http://registry.npm.taobao.org/qs/download/qs-6.5.1.tgz", 475 | "integrity": "sha1-NJzfbu+J7EXBLX1es/wMhwNDptg=" 476 | }, 477 | "range-parser": { 478 | "version": "1.2.0", 479 | "resolved": "http://registry.npm.taobao.org/range-parser/download/range-parser-1.2.0.tgz", 480 | "integrity": "sha1-9JvmtIeJTdxA3MlKMi9hEJLgDV4=" 481 | }, 482 | "raw-body": { 483 | "version": "2.3.2", 484 | "resolved": "http://registry.npm.taobao.org/raw-body/download/raw-body-2.3.2.tgz", 485 | "integrity": "sha1-vNYMd9Prk83gBQKVw/N5OJvIj4k=", 486 | "requires": { 487 | "bytes": "3.0.0", 488 | "http-errors": "1.6.2", 489 | "iconv-lite": "0.4.19", 490 | "unpipe": "1.0.0" 491 | }, 492 | "dependencies": { 493 | "depd": { 494 | "version": "1.1.1", 495 | "resolved": "http://registry.npm.taobao.org/depd/download/depd-1.1.1.tgz", 496 | "integrity": "sha1-V4O04cRZ8G+lyif5kfPQbnoxA1k=" 497 | }, 498 | "http-errors": { 499 | "version": "1.6.2", 500 | "resolved": "http://registry.npm.taobao.org/http-errors/download/http-errors-1.6.2.tgz", 501 | "integrity": "sha1-CgAsyFcHGSp+eUbO7cERVfYOxzY=", 502 | "requires": { 503 | "depd": "1.1.1", 504 | "inherits": "2.0.3", 505 | "setprototypeof": "1.0.3", 506 | "statuses": ">= 1.3.1 < 2" 507 | } 508 | }, 509 | "setprototypeof": { 510 | "version": "1.0.3", 511 | "resolved": "http://registry.npm.taobao.org/setprototypeof/download/setprototypeof-1.0.3.tgz", 512 | "integrity": "sha1-ZlZ+NwQ+608E2RvWWMDL77VbjgQ=" 513 | } 514 | } 515 | }, 516 | "readable-stream": { 517 | "version": "2.3.6", 518 | "resolved": "http://registry.npm.taobao.org/readable-stream/download/readable-stream-2.3.6.tgz", 519 | "integrity": "sha1-sRwn2IuP8fvgcGQ8+UsMea4bCq8=", 520 | "requires": { 521 | "core-util-is": "~1.0.0", 522 | "inherits": "~2.0.3", 523 | "isarray": "~1.0.0", 524 | "process-nextick-args": "~2.0.0", 525 | "safe-buffer": "~5.1.1", 526 | "string_decoder": "~1.1.1", 527 | "util-deprecate": "~1.0.1" 528 | } 529 | }, 530 | "rimraf": { 531 | "version": "2.6.2", 532 | "resolved": "http://registry.npm.taobao.org/rimraf/download/rimraf-2.6.2.tgz", 533 | "integrity": "sha1-LtgVDSShbqhlHm1u8PR8QVjOejY=", 534 | "requires": { 535 | "glob": "^7.0.5" 536 | } 537 | }, 538 | "safe-buffer": { 539 | "version": "5.1.1", 540 | "resolved": "http://registry.npm.taobao.org/safe-buffer/download/safe-buffer-5.1.1.tgz", 541 | "integrity": "sha1-iTMSr2myEj3vcfV4iQAWce6yyFM=" 542 | }, 543 | "send": { 544 | "version": "0.16.2", 545 | "resolved": "http://registry.npm.taobao.org/send/download/send-0.16.2.tgz", 546 | "integrity": "sha1-bsyh4PjBVtFBWXVZhI32RzCmu8E=", 547 | "requires": { 548 | "debug": "2.6.9", 549 | "depd": "~1.1.2", 550 | "destroy": "~1.0.4", 551 | "encodeurl": "~1.0.2", 552 | "escape-html": "~1.0.3", 553 | "etag": "~1.8.1", 554 | "fresh": "0.5.2", 555 | "http-errors": "~1.6.2", 556 | "mime": "1.4.1", 557 | "ms": "2.0.0", 558 | "on-finished": "~2.3.0", 559 | "range-parser": "~1.2.0", 560 | "statuses": "~1.4.0" 561 | } 562 | }, 563 | "serve-static": { 564 | "version": "1.13.2", 565 | "resolved": "http://registry.npm.taobao.org/serve-static/download/serve-static-1.13.2.tgz", 566 | "integrity": "sha1-CV6Ecv1bRiN9tQzkhqQ/S4bGzsE=", 567 | "requires": { 568 | "encodeurl": "~1.0.2", 569 | "escape-html": "~1.0.3", 570 | "parseurl": "~1.3.2", 571 | "send": "0.16.2" 572 | } 573 | }, 574 | "setprototypeof": { 575 | "version": "1.1.0", 576 | "resolved": "http://registry.npm.taobao.org/setprototypeof/download/setprototypeof-1.1.0.tgz", 577 | "integrity": "sha1-0L2FU2iHtv58DYGMuWLZ2RxU5lY=" 578 | }, 579 | "statuses": { 580 | "version": "1.4.0", 581 | "resolved": "http://registry.npm.taobao.org/statuses/download/statuses-1.4.0.tgz", 582 | "integrity": "sha1-u3PURtonlhBu/MG2AaJT1sRr0Ic=" 583 | }, 584 | "string_decoder": { 585 | "version": "1.1.1", 586 | "resolved": "http://registry.npm.taobao.org/string_decoder/download/string_decoder-1.1.1.tgz", 587 | "integrity": "sha1-nPFhG6YmhdcDCunkujQUnDrwP8g=", 588 | "requires": { 589 | "safe-buffer": "~5.1.0" 590 | } 591 | }, 592 | "type-is": { 593 | "version": "1.6.16", 594 | "resolved": "http://registry.npm.taobao.org/type-is/download/type-is-1.6.16.tgz", 595 | "integrity": "sha1-+JzjQVQcZysl7nrjxz3uOyvlAZQ=", 596 | "requires": { 597 | "media-typer": "0.3.0", 598 | "mime-types": "~2.1.18" 599 | } 600 | }, 601 | "typedarray": { 602 | "version": "0.0.6", 603 | "resolved": "http://registry.npm.taobao.org/typedarray/download/typedarray-0.0.6.tgz", 604 | "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=" 605 | }, 606 | "ultron": { 607 | "version": "1.1.1", 608 | "resolved": "http://registry.npm.taobao.org/ultron/download/ultron-1.1.1.tgz", 609 | "integrity": "sha1-n+FTahCmZKZSZqHjzPhf02MCvJw=" 610 | }, 611 | "unpipe": { 612 | "version": "1.0.0", 613 | "resolved": "http://registry.npm.taobao.org/unpipe/download/unpipe-1.0.0.tgz", 614 | "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=" 615 | }, 616 | "util-deprecate": { 617 | "version": "1.0.2", 618 | "resolved": "http://registry.npm.taobao.org/util-deprecate/download/util-deprecate-1.0.2.tgz", 619 | "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=" 620 | }, 621 | "utils-merge": { 622 | "version": "1.0.1", 623 | "resolved": "http://registry.npm.taobao.org/utils-merge/download/utils-merge-1.0.1.tgz", 624 | "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=" 625 | }, 626 | "vary": { 627 | "version": "1.1.2", 628 | "resolved": "http://registry.npm.taobao.org/vary/download/vary-1.1.2.tgz", 629 | "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=" 630 | }, 631 | "wrappy": { 632 | "version": "1.0.2", 633 | "resolved": "http://registry.npm.taobao.org/wrappy/download/wrappy-1.0.2.tgz", 634 | "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=" 635 | }, 636 | "ws": { 637 | "version": "3.3.3", 638 | "resolved": "http://registry.npm.taobao.org/ws/download/ws-3.3.3.tgz", 639 | "integrity": "sha1-8c+E/i1ekB686U767OeF8YeiKPI=", 640 | "requires": { 641 | "async-limiter": "~1.0.0", 642 | "safe-buffer": "~5.1.0", 643 | "ultron": "~1.1.0" 644 | } 645 | }, 646 | "yauzl": { 647 | "version": "2.4.1", 648 | "resolved": "http://registry.npm.taobao.org/yauzl/download/yauzl-2.4.1.tgz", 649 | "integrity": "sha1-lSj0QtqxsihOWLQ3m7GU4i4MQAU=", 650 | "requires": { 651 | "fd-slicer": "~1.0.1" 652 | } 653 | } 654 | } 655 | } 656 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ssr", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "express": "^4.16.3", 14 | "puppeteer": "^1.4.0" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 |
6 | 7 | 28 | -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | var express = require("express"); 2 | var ssr = require("./ssr.js"); 3 | var fs = require("fs"); 4 | 5 | const app = express(); 6 | app.use(express.static("./")); 7 | 8 | app.get("/", async (req, res, next) => { 9 | console.log("r"); 10 | const { html, ttRenderMs } = await ssr( 11 | `${req.protocol}://${req.get("host")}/public/index.html` 12 | ); 13 | // Add Server-Timing! See https://w3c.github.io/server-timing/. 14 | res.set( 15 | "Server-Timing", 16 | `Prerender;dur=${ttRenderMs};desc="Headless render time (ms)"` 17 | ); 18 | return res.status(200).send(html); // Serve prerendered page as response. 19 | }); 20 | 21 | app.get("/posts", function(req, res) { 22 | var data = [ 23 | { 24 | title: "post title", 25 | content: "post content", 26 | summary: "post summary" 27 | } 28 | ]; 29 | return res.json(data); 30 | }); 31 | 32 | app.listen(8080, () => console.log("Server started. Press Ctrl+C to quit")); 33 | -------------------------------------------------------------------------------- /ssr.js: -------------------------------------------------------------------------------- 1 | var puppeteer = require("puppeteer"); 2 | 3 | // In-memory cache of rendered pages. Note: this will be cleared whenever the 4 | // server process stops. If you need true persistence, use something like 5 | // Google Cloud Storage (https://firebase.google.com/docs/storage/web/start). 6 | const RENDER_CACHE = new Map(); 7 | 8 | async function ssr(url) { 9 | console.log("url", url); 10 | if (RENDER_CACHE.has(url)) { 11 | return { html: RENDER_CACHE.get(url), ttRenderMs: 0 }; 12 | } 13 | 14 | const start = Date.now(); 15 | 16 | const browser = await puppeteer.launch(); 17 | const page = await browser.newPage(); 18 | try { 19 | // networkidle0 waits for the network to be idle (no requests for 500ms). 20 | // The page's JS has likely produced markup by this point, but wait longer 21 | // if your site lazy loads, etc. 22 | await page.goto(url, { waitUntil: "networkidle0" }); 23 | // await page.waitForSelector("#posts"); // ensure #posts exists in the DOM. 24 | } catch (err) { 25 | console.error(err); 26 | throw new Error("page.goto/waitForSelector timed out."); 27 | } 28 | 29 | const html = await page.content(); // serialized HTML of page DOM. 30 | await browser.close(); 31 | 32 | const ttRenderMs = Date.now() - start; 33 | console.info(`Headless rendered page in: ${ttRenderMs}ms`); 34 | 35 | RENDER_CACHE.set(url, html); // cache rendered page. 36 | 37 | return { html, ttRenderMs }; 38 | } 39 | 40 | module.exports = ssr; 41 | --------------------------------------------------------------------------------