├── .dockerignore
├── .gitignore
├── .npmignore
├── README.md
├── bin
└── cli.js
├── package-lock.json
├── package.json
├── src
├── index.ts
├── logger.ts
├── plugins.ts
├── proxy-cache.ts
├── ssr-build.ts
├── ssr-proxy.ts
├── ssr-render.ts
├── types.ts
└── utils.ts
├── test
├── build.ts
├── docker
│ ├── docker-compose.yml
│ ├── nginx.Dockerfile
│ ├── nginx.conf
│ ├── ssr-proxy-js.config.json
│ └── ssr.Dockerfile
├── package-lock.json
├── package.json
├── proxy.js
├── proxy.ts
├── public
│ ├── iframe.html
│ ├── index.css
│ ├── index.html
│ ├── index.js
│ ├── nested.dot
│ │ ├── index.dot.css
│ │ └── index.html
│ ├── nested
│ │ ├── index.css
│ │ └── index.html
│ └── page.html
├── ssr-build-js.config.json
├── ssr-proxy-js.config.json
├── test-request.js
├── test-stream.js
└── tsconfig.json
├── tsconfig.json
└── webpack.config.js
/.dockerignore:
--------------------------------------------------------------------------------
1 | # Node.js .dockerignore
2 |
3 | **/dist
4 | **/logs
5 | **/*.log
6 | **/node_modules/
7 | **/npm-debug.log
8 | **/.git
9 | **/.vscode
10 | **/.gitignore
11 | **/.dockerignore
12 | **/README.md
13 | **/LICENSE
14 | **/.editorconfig
15 | **/Dockerfile
16 | **/*.Dockerfile
17 | **/docs
18 | **/.github
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Node.js .gitignore
2 |
3 | **/dist
4 | **/node_modules
5 | output.html
6 |
7 | # Logs
8 | logs
9 | *.log
10 | npm-debug.log*
11 | pnpm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | lerna-debug.log*
15 |
16 | # OS
17 | .DS_Store
18 |
19 | # Tests
20 | /coverage
21 | /.nyc_output
22 |
23 | # IDEs and editors
24 | /.idea
25 | .project
26 | .classpath
27 | .c9/
28 | *.launch
29 | .settings/
30 | *.sublime-workspace
31 |
32 | # IDE - VSCode
33 | .vscode/*
34 | !.vscode/settings.json
35 | !.vscode/tasks.json
36 | !.vscode/launch.json
37 | !.vscode/extensions.json
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | test/
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | [](https://www.npmjs.com/package/ssr-proxy-js)
2 | [](https://www.npmjs.com/package/ssr-proxy-js)
3 |
4 | # SSRProxy.js
5 |
6 | Modes:\
7 | [SSR Build - Static Site Generator](#ssr-build-static-site-generator-mode)\
8 | [SSR Proxy - Server Rendering](#ssr-proxy-server-rendering-mode)
9 |
10 | A Node.js tool for Server-Side Rendering (SSR) and Static Site Generation (SSG) using headless Chrome via Puppeteer.
11 |
12 | Server-Side Rendering, or SSR for short, is a technique used to serve Single-Page Applications (SPAs, e.g. React.js, Vue.js and Angular based websites) with Web Crawlers in mind, such as Googlebot. Crawlers are used everywhere in the internet to a variety of objectives, with the most known being for indexing the web for search engines, which is done by companies such as Google (Googlebot), Bing (Bingbot) and DuckDuckGo (DuckDuckBot).
13 |
14 | The main problem of serving SPAs "normally" (i.e. Client-Side Rendering) is that when your website is accessed by a Web Crawler, it's usually only able to read the source HTML code, which most probably does not represent your actual website. In case of a React App, for example, a Crawler might be only able to interpret your website like so:
15 |
16 | ```html
17 |
18 |
19 |
20 |
21 | React App
22 |
23 |
24 |
25 |
26 |
27 |
28 | ```
29 |
30 | For the contents of a SPA to be correct, the JavaScript files should be loaded and executed by the browser, and that's where Server-Side Rendering plays a big role. SSR will receive the HTTP request from the client, create a browser instance, load the page just like we do while surfing the web, and just then return the actual rendered HTML to the request, after the SPA is fully loaded.
31 |
32 | The implemantation of this package is hugelly inspired by an article from Google, using Pupperteer as it's engine:
33 | https://developers.google.com/web/tools/puppeteer/articles/ssr
34 |
35 | The main problem regarding the workflow described above is that the process of rendering the web page through a browser takes some time, so if done incorrectly, it might have a big impact on the users experience. That's why this package also comes with two essencial feature: **Caching**, **Fallbacks** and **Static Site Generation**.
36 |
37 | ---
38 |
39 | ## SSR Build (Static Site Generator mode)
40 |
41 | Build pre-rendered pages to serve to your users, without any added server complexity or extra response delay, using your server tool of choice (e g. nginx).
42 |
43 | If all your content is static, meaning it won't change dependending on who or how your pages are accessed, you can pre-build all your routes using the `--mode=build` option, instead of building in real time with the default SSR Proxy mode. This will access all your pre-defined routes in build time, render the HTML, and save the resulting content back to a dist folder. You can then serve your dist folder instead of serving your original non pre-rendered bundle.
44 |
45 | ### npx Example
46 |
47 | **Commands**
48 | ```bash
49 | # With Args
50 | npx ssr-proxy-js --mode=build --src=./public --dist=./dist --job.routes='[{"url":"/"},{"url":"/nested"}]'
51 |
52 | # With Config File
53 | npx ssr-proxy-js --mode=build -c ./ssr-build-js.config.json
54 | ```
55 |
56 | **Config File**
57 | ```javascript
58 | // ./ssr-build-js.config.json
59 | {
60 | "src": "./public",
61 | "dist": "./src",
62 | "job": {
63 | "routes": [
64 | { "method": "GET", "url": "/" },
65 | { "method": "GET", "url": "/nested" }
66 | ]
67 | }
68 | }
69 | ```
70 |
71 | ### Simple Example
72 |
73 | ```javascript
74 | const { SsrBuild } = require('ssr-proxy-js');
75 |
76 | const ssrBuild = new SsrBuild({
77 | "src": "./public",
78 | "dist": "./src",
79 | "job": {
80 | "routes": [
81 | { "method": "GET", "url": "/" },
82 | { "method": "GET", "url": "/nested" }
83 | ]
84 | }
85 | });
86 |
87 | ssrBuild.start();
88 | ```
89 |
90 | ### Full Example
91 |
92 | ```typescript
93 | import * as os from 'os';
94 | import * as path from 'path';
95 | import { LogLevel, SsrBuild, SsrBuildConfig } from 'ssr-proxy-js';
96 |
97 | const config: SsrBuildConfig = {
98 | httpPort: 8080,
99 | hostname: 'localhost',
100 | src: 'public',
101 | dist: 'dist',
102 | stopOnError: false,
103 | serverMiddleware: async (req, res, next) => {
104 | res.sendFile(path.join(__dirname, 'public/index.html'));
105 | },
106 | reqMiddleware: async (params) => {
107 | params.headers['Referer'] = 'http://google.com';
108 | return params;
109 | },
110 | resMiddleware: async (params, result) => {
111 | if (result.text == null) return result;
112 | result.text = result.text.replace('